*{
    margin: 0;
    padding: 0;
}

body{
    font-family: 'geomanist', sans-serif;
    background-image: url(./y-so-serious.png);
}

.container{
    max-width: 680px;
    margin: auto auto;
}

.nav{
    background-color: #fff;
    text-align: center;
    padding: 20px 0;
    width: 680px;
    position: fixed;
}

.nav h2{
    letter-spacing: 4px;
}

.hero img{
    width: 100%;
}

@media (max-width: 680px){
    .nav{
        background-color: rgb(236, 232, 232);
        text-align: center;
        width: 100%;
        position: fixed;
    }

    .hero img{
        margin-top: 80px;
    }
}

@media (min-width: 681px){
    .nav{
        background-color: rgb(236, 232, 232);
        text-align: center;
        position: fixed;
    }

    .hero img{
        margin-top: 100px;
    }
}