* {
    box-sizing: border-box;
}
html, body {
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    font-family: 'Open Sans', 'Liberation sans', 'Ubuntu', sans-serif;
    height: 100%;
}
body {
    color: #f9f5d7;
    background-color: #282828;
    height: 100%;
    scroll-behavior: smooth;
}
h1 img {
    max-width: 100%; 
    margin-top: 2.5rem;
}
h2, h3 {
    font-family: 'Oswald', sans-serif;
    font-size: 3rem;
    font-weight: normal;
    margin: 0.2rem 0;
}
h3 {
    font-size: 2rem;
    margin-top: 1.4rem;
    margin-bottom: 1rem;
}
a {
    color: #282828;
}
a:hover {
    color: #d65d0e;
}
::-moz-selection{
    background:#b8bb26;
    color:#282828;
}
::selection {
    background:#b8bb26;
    color:#282828;
}
.section {
    position: relative;
    max-width: 100%;
    margin: 0 auto;
    min-height: 100vh;
    padding: 1rem 3rem;
}
.section:focus {
    outline-style:none;
    box-shadow:none;
    border-color:transparent;
}
.menu {
    position: fixed;
    top: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    margin: 0;
    min-width: 100%;
    background-color: #282828;
    z-index: 2;
}
.menu li {
    margin: 0 20px;
}
.menu a {
    color: #f9f5d7;
    border: 1px solid;
    border-radius: 3px;
    padding: 3px 5px;
    text-decoration: none;
    transition: color 1s, background-color 1s;
}
.menu a:hover {
    background-color: #f9f5d7;
    color: #282828;
}

/* presentation */
#presentation {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
#presentation h2 {
    text-align: center;
}
#presentation h2, #presentation h3 {
    font-weight: normal;
}
#main {
    max-width: 60%;
    padding: 1rem 2rem;
}
ul.skills {
    list-style-position: inside;
    padding:0;
    columns: 3 auto;
}
#presentation li {
    line-height: 2rem;
}

/* portfolio */
#portfolio {
background-color: #ffff66;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg %3E%3Cpath fill='%23ffe757' d='M486%2C705.8c-109.3-21.8-223.4-32.2-335.3-19.4C99.5%2C692.1%2C49%2C703%2C0%2C719.8V800h843.8c-115.9-33.2-230.8-68.1-347.6-92.2C492.8%2C707.1%2C489.4%2C706.5%2C486%2C705.8z'/%3E%3Cpath fill='%23ffce48' d='M1600%2C0H0v719.8c49-16.8%2C99.5-27.8%2C150.7-33.5c111.9-12.7%2C226-2.4%2C335.3%2C19.4c3.4%2C0.7%2C6.8%2C1.4%2C10.2%2C2c116.8%2C24%2C231.7%2C59%2C347.6%2C92.2H1600V0z'/%3E%3Cpath fill='%23ffb539' d='M478.4%2C581c3.2%2C0.8%2C6.4%2C1.7%2C9.5%2C2.5c196.2%2C52.5%2C388.7%2C133.5%2C593.5%2C176.6c174.2%2C36.6%2C349.5%2C29.2%2C518.6-10.2V0H0v574.9c52.3-17.6%2C106.5-27.7%2C161.1-30.9C268.4%2C537.4%2C375.7%2C554.2%2C478.4%2C581z'/%3E%3Cpath fill='%23ff9b29' d='M0%2C0v429.4c55.6-18.4%2C113.5-27.3%2C171.4-27.7c102.8-0.8%2C203.2%2C22.7%2C299.3%2C54.5c3%2C1%2C5.9%2C2%2C8.9%2C3c183.6%2C62%2C365.7%2C146.1%2C562.4%2C192.1c186.7%2C43.7%2C376.3%2C34.4%2C557.9-12.6V0H0z'/%3E%3Cpath fill='%23fe8019' d='M181.8%2C259.4c98.2%2C6%2C191.9%2C35.2%2C281.3%2C72.1c2.8%2C1.1%2C5.5%2C2.3%2C8.3%2C3.4c171%2C71.6%2C342.7%2C158.5%2C531.3%2C207.7c198.8%2C51.8%2C403.4%2C40.8%2C597.3-14.8V0H0v283.2C59%2C263.6%2C120.6%2C255.7%2C181.8%2C259.4z'/%3E%3Cpath fill='%23fe8916' d='M1600%2C0H0v136.3c62.3-20.9%2C127.7-27.5%2C192.2-19.2c93.6%2C12.1%2C180.5%2C47.7%2C263.3%2C89.6c2.6%2C1.3%2C5.1%2C2.6%2C7.7%2C3.9c158.4%2C81.1%2C319.7%2C170.9%2C500.3%2C223.2c210.5%2C61%2C430.8%2C49%2C636.6-16.6V0z'/%3E%3Cpath fill='%23ff9112' d='M454.9%2C86.3C600.7%2C177%2C751.6%2C269.3%2C924.1%2C325c208.6%2C67.4%2C431.3%2C60.8%2C637.9-5.3c12.8-4.1%2C25.4-8.4%2C38.1-12.9V0H288.1c56%2C21.3%2C108.7%2C50.6%2C159.7%2C82C450.2%2C83.4%2C452.5%2C84.9%2C454.9%2C86.3z'/%3E%3Cpath fill='%23ff9a0e' d='M1600%2C0H498c118.1%2C85.8%2C243.5%2C164.5%2C386.8%2C216.2c191.8%2C69.2%2C400%2C74.7%2C595%2C21.1c40.8-11.2%2C81.1-25.2%2C120.3-41.7V0z'/%3E%3Cpath fill='%23ffa207' d='M1397.5%2C154.8c47.2-10.6%2C93.6-25.3%2C138.6-43.8c21.7-8.9%2C43-18.8%2C63.9-29.5V0H643.4c62.9%2C41.7%2C129.7%2C78.2%2C202.1%2C107.4C1020.4%2C178.1%2C1214.2%2C196.1%2C1397.5%2C154.8z'/%3E%3Cpath fill='%23ffaa00' d='M1315.3%2C72.4c75.3-12.6%2C148.9-37.1%2C216.8-72.4h-723C966.8%2C71%2C1144.7%2C101%2C1315.3%2C72.4z'/%3E%3C/g%3E%3C/svg%3E");
background-attachment: fixed;
background-size: cover;
background-position: center;
}
#portfolio h2 {
    margin-top: 2.5rem;
    color: #282828;
    text-align: center;
}
#portfolio .grid {
    max-width: 100%;
    margin: 1rem auto 3rem auto;
    display: grid;
    grid-gap: 20px;
    grid-template-columns: repeat(3, 1fr);
}
.project {
    position: relative;
}
.project p {
    color: #f9f5d7;
    position: absolute;
    height: 40px;
    padding: 10px;
    bottom: 0;
    background-color: rgba(28,28,28,0.85);
    left: 0;
    right: 0;
    margin: 0;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
}
.project img {
    display: block;
    max-width: 100%;
    border-radius: .5rem;
}

/* footer */
#footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 30rem;
}
#footer h2 {
    margin-top: 2.5rem;
}
#footer h2, #footer a, #footer p, #followme {
    color: #f9f5d7;
}
ul#followme {
    list-style: none;
    padding: 0;
    text-align: center;
    font-size: 1rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 20px auto;
    justify-content: center;
}
ul#followme li {
    margin: 20px;
}