@font-face {
    font-family: "NeueMontreal";
    src:
        local("NeueMontreal"), 
        url("/font/NeueMontreal-Regular.otf") format('opentype')
}

@font-face {
    font-family: "TuskerGrotesk";
    src: 
        local("TuskerGrotesk"), 
        url("/font/TuskerGrotesk-5700Bold.woff2") format('woff2')
}

:root {
    --shortest-resume-font-size: 25vh;
    --shortest-resume-top: 15vh;
    --short-intro-top: 55vh;
    --short-intro-font-size: 2.1vw;
    --short-intro-width: 25vw;
    --short-intro-left: 70vw;
    --header-nav-font-size: 2vw;
    --h1-font-size: 7rem;
    --h1-padding: 0 10vw;
    --about-picture-width: 50vw;
    --about-font-size: 2vw;
    --bio-poste-font-size: 2rem;
    --bio-poste-grid: 60% 20% 20%;
    --skills-p-font-size: 4rem;
    --skills-h2-font-size: 5.5rem;
    --contact-row-margin-left: 20%;
    --contact-img-height: 4rem;
    --contact-img-margin-right: 20px;
    --footer-cg-width: 40vw;
    --footer-cg-font-size: 1rem;
    --footer-cg-h1-font-size: 2rem;
    --footer-cg-h2-font-size: 1.5rem;
}

@media only screen and (max-width: 360px) {
    :root {
        --shortest-resume-top: 11vh;
        --shortest-resume-font-size: 13vh;
        --short-intro-top: 9vh;
        --short-intro-font-size: 3.2vw;
        --short-intro-width: 30vw;
        --short-intro-left: 65vw;
        --header-nav-font-size: 3.5vw;
        --h1-font-size: 3rem;
        --h1-padding: 0 5vw;
        --about-picture-width: 110vw;
        --about-font-size: 3vw;
        --bio-poste-font-size: 0.9rem;
        --bio-poste-grid: 100% 0 0;
        --skills-p-font-size: 1.5rem;
        --skills-h2-font-size: 2.5rem;
        --contact-row-margin-left: 5%;
        --contact-img-height: 1.2rem;
        --contact-img-margin-right: 10px;
        --footer-cg-width: 60vw;
        --footer-cg-font-size: 0.8rem;
        --footer-cg-h1-font-size: 1.1rem;
        --footer-cg-h2-font-size: 1rem;
    }
}

html, body {
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: black;
    color: white;
    z-index: 1;
}

header {
    display: flex;
    flex-direction: row;
    position: fixed;
    box-sizing: border-box;
    width: 100vw;
    padding: 28px;
    z-index: 200;
    justify-content: space-between;
}

header .title {
    font-size: var(--header-nav-font-size);
}

header nav {
    font-size: var(--header-nav-font-size);
}

a {
    text-decoration: none;
    color: white;
}

h1 {
    font-size: var(--h1-font-size);
    padding: var(--h1-padding);
}

#intro, #about, #bio {
    position: relative;
}

#intro picture {
    position: relative;
}

#intro picture img {
    width: 100%;
    object-fit: cover;
}

#intro .shortest-resume {
    position: absolute;
    top: var(--shortest-resume-top);
    left: 10vw;
    font-family: "TuskerGrotesk", sans-serif;
    text-transform: uppercase;
    font-size: var(--shortest-resume-font-size);
    font-weight: 500;
    letter-spacing: -1vh;
    line-height: 1;
}

#intro .short-intro {
    position: absolute;
    top: var(--short-intro-top);
    left: var(--short-intro-left);
    width: var(--short-intro-width);
    font-family: "NeueMontreal", sans-serif;
    text-transform: uppercase;
    line-height: 1.3333;
    font-size: var(--short-intro-font-size);
    font-weight: 500;
}

#about {
    margin: 10vh 0;
}

#about .introduction {
    font-family: "NeueMontreal", sans-serif;

    font-size: 1.5vw;
    font-weight: 500;

    padding: 0 10vw;
}

#about .introduction picture {
    margin: 2vw;
    width: var(--about-picture-width);
}

#about .introduction img {
    width: 100%;
    object-fit: contain;
}

#about .long-intro {
    font-size: var(--about-font-size);
}

#bio {
    padding: 0 10vw;
    font-family: "TuskerGrotesk", sans-serif;
}

#bio h1 {
    text-transform: uppercase;
}

#bio .postes {
    display: grid;
    grid-template-columns: var(--bio-poste-grid);
    font-size: var(--bio-poste-font-size);
}

#bio .postes div {
    overflow: hidden;
}

.row {
    display: flex;
    flex-direction: row;
}

#skills {
    font-family: "TuskerGrotesk", sans-serif;
}

#skills h1{
    text-transform: uppercase;
}

#skills h2{
    text-transform: uppercase;
    font-size: var(--skills-h2-font-size);
    padding: 0 10vw;
}

#skills p {
    font-size: var(--skills-p-font-size);
    padding: 0 10vw;
}

#contact {
    font-family: "NeueMontreal", sans-serif;
}

#contact .row {
    font-size: var(--contact-img-height);
    align-items: center;
    margin-left: var(--contact-row-margin-left);
}

#contact img {
    height: var(--contact-img-height);
    filter: invert();
    margin-right: var(--contact-img-margin-right);
}

.wrapper {
    position: fixed;
    z-index: 300;
    top: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    transition-property: width;
    transition-duration: 2s;
    transition-delay: 0.5s;
}

.wrapper[aria-hidden="true"] {
    width: 0;
    overflow: hidden;
    transition-property: width;
    transition-duration: 2s;
    transition-delay: 0.5s;
}

.close {
    position: absolute;
    font-size: 2rem;
}

#conditionsGenerales {
    position: absolute;
    background-color: black;
    width: var(--footer-cg-width);
    height: 100%;
    right: 0;
    padding: 5vw;
    font-size: var(--footer-cg-font-size);
    overflow-y: auto;
}

#conditionsGenerales h1 {
    font-size: var(--footer-cg-h1-font-size);
}

#conditionsGenerales h2 {
    font-size: var(--footer-cg-h2-font-size);
}

.close {
    cursor: pointer;
}

footer {
    padding: 10vh 10vw;
}

footer a {
    cursor: pointer;
    font-size: 1.5rem;
}