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


*{
    box-sizing:border-box;
}


body{

    margin:0;

    background:#f5f5f5;

    color:#111;

    font-family:"Manrope",sans-serif;

}




.container{

    max-width:1600px;

    margin:auto;

    padding:170px 40px 80px;

}



/* Fixed title and email */

header{

    position:fixed;

    top:40px;

    left:40px;

    z-index:1000;

    mix-blend-mode:difference;

}



h1{

    margin:0;

    font-size:16px;

    font-weight:300;

    letter-spacing:.08em;

    color:white;

}



/* Email */

.email{

    margin-top:5px;

}



.email a,
.email a:visited,
.email a:hover,
.email a:active{

    color:white;

    text-decoration:none;

    font-size:14px;

    font-weight:300;

    letter-spacing:.08em;

    text-transform:uppercase;

}


.email a:hover{

    opacity:.7;

}



/* Navigation */

.words{

    display:flex;

    gap:70px;

    margin-bottom:100px;

}


.words span{

    color:#111;

    font-size:18px;

    font-weight:300;

}



/* Homepage Projects */

.project-preview{

    margin-bottom:140px;

}


.project-preview img{

    width:100%;

    display:block;

    transition:opacity .3s ease;

}


.project-preview img:hover{

    opacity:.8;

}



/* Responsive */

@media(max-width:900px){


    header{

        left:auto;

        right:20px;

        top:20px;

        text-align:right;

    }



    h1{

        font-size:14px;

    }



    .email{

        margin-top:4px;

    }



    .email a{

        font-size:12px;

    }



    .container{

        padding:100px 20px 40px;

    }



    .words{

        gap:30px;

        flex-wrap:wrap;

        margin-bottom:60px;

    }



    .project-preview{

        margin-bottom:80px;

    }


}