style.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Syne Mono', monospace;
}

body{
    height: 100vh;
    background: linear-gradient( to bottom, rgba(0,0,0,.4) 21%, rgba(240,246,218,.65) 87.4% ), url(./images/img1.jpg);
    background-size: cover;
    background-position: center;
}

header nav{
    padding: 2em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header nav .logo h2{
    color: #fff;
    font-size: 2.5em;
}
header nav ul li{
    list-style: none;
    display: inline-block;
    margin-right: 1em;
}

header ul li a{
    text-decoration: none;
    color: #fff;
    font-size: 1.4em;
    position: relative;
    transition: .5s ease;
}
 header ul li #active{
background: #eee;    
color: #000;
border: 0;
outline: 0;
padding: .3em 1.5em;
border-radius: 150px;
} 

 header nav ul li a:hover{
background: #eee;    
color: #000;
border: 0;
outline: 0;
padding: .3em 1.5em;
border-radius: 150px;
} 

.container{
    position: relative;
    width: 80vw;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-40%);
    text-align: center;
    line-height: 1.5;
}

.container h1{
    font-size: 6vw;
    color: #fff;
}

.container p{
    color: #fff;
    margin-top: .7em;
    font-weight: 100;
}
.container a{
    text-decoration: none;
    color: hsla(212,35%,95%,.8);
    padding: .5em 1.5em;
    margin-top: 20px;
    display: inline-block;
    border-radius: 150px;
    background:hsla(212,15%,15%,.6);
    font-size: 1.1em;
    transition: .5s ease;
}

.container a:hover{
    background: hsla(212,15%,15%,1);
    color: #fff;
}

@media (max-width:570px){
    header nav {
        padding: 1.5em .5em;
    }
header nav .logo h2{
        font-size: 1.7em;
    }
    header nav ul li{
        margin-right: .3em;
    }
    header nav ul li a{
        font-size: .9em;
    }
    header nav ul li #active{
        padding: .2em .9em;
    }
    header nav ul li a:hover{
        padding: .2em .8em;
    }

.container h1{
    font-size: 2em;
}

}