@import url('https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&display=swap');


*{
    margin: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

body{
    position: relative;
    background-color: black;
}

/* NAVBAR */


nav li{
    list-style: none;
    font-size: 16px;
}

nav{
    align-self: flex-start;
    display: flex;
    flex-direction: column;
    font-family: 'Space Mono', monospace;
    justify-content: center;
    align-items: center;
    width: 100vw;
    z-index: 999999;
    position: fixed;
    background-color: white;
    padding: 20px 0;
}

nav a{
    color: black;
    text-decoration: none;
}

nav span{
    display: flex;
    width: 85vw;
    justify-content: space-between;
}

nav span:nth-child(1){
    margin-bottom: 10px;
}

nav .logo{
    display: none;
}

nav h1{
    font-family: 'Space Mono', monospace;
    font-weight: 300;
    align-self: flex-end;
    margin-right: 7.5vw;
    margin-top: 30px;
}

@media screen and (min-width:1020px) {
    nav{
        flex-direction: row;
        justify-content: space-between;
        font-size: 16px;
        padding: 20px 50px;
        box-sizing: border-box;
        background-color: white;
        position: fixed;
        margin-top: 0px;
    }

    nav .logo{
        display: flex;
        height: 30px;
    }


    nav span{
        width: 30%;
    }

    nav h1{
        margin-right: 0;
        margin-top: 0;
        width: 30%;
        text-align: end;
    }
}

nav button{
    background-color: transparent;
    border: none;
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    cursor: pointer;
}




/* HEADER */




#header{
    display: flex;
    width: 100vw;
    height: 100vh;
    background-size: cover;
    position: relative;
    flex-direction: column;
    justify-content: end;
    z-index: 1;
    background-attachment: fixed;
}

#header .filter{
    width: 100vw;
    height: 100vh;
    background: linear-gradient(#fff, #000);
    mix-blend-mode: multiply;
    opacity: 75%;
    position: absolute;
    z-index : 2
}


#header .infos{
    display: flex;
    color: white;
    z-index: 3;
    justify-content: space-between;
    padding: 50px;
    box-sizing: border-box;
}

#header h1{
    font-size: 70px;
    font-weight: 300;
    margin-block-start: 0em;
    margin-block-end: 0em;
    align-self: end;
    transform: translateY(15px);
    font-family: 'Space Mono', monospace;
    font-weight: bolder;
}

#header .infos .right{
    width: 35%;
    font-family: 'Space Mono', monospace;
    text-align: right;
}

#header .infos .legende{
    font-size: 30px;
    margin-bottom: 20px;
}

#header .infos .intro{
    font-family: 'Karla';
}


@media screen and (max-width:1000px) {
    #header .infos{
        flex-direction: column;
    }

    #header{
        background-size: cover;
    }

    #header .infos .right{
        text-align: left;
        width: 100%;
    }

    #header h1{
        transform: none;
        font-size: 50px;
        line-height: 45px;
        margin-bottom:30px;
        text-align: left;
        align-self: flex-start;
    }

    #header .infos .intro{
        width: 100%;
    }
}





/* CONTENU */

#contenu{
    display: flex;
    flex-direction: column;
    width: 100vw;
    align-items: center;
    margin-bottom: 100px;
}

#contenu .container{
    width: 70%;
}
#contenu .img-proj{
    width: 100%;
    margin-top: 50px;
}

#contenu .img-proj img{
    width: 100%;
}


@media screen and (max-width:1000px) {
    #contenu .container{
        width: 85%;
    }
}