@font-face {
     font-family: 'BLOB-Regular';
     src: url(./BLOB-Regular.eot);
     src: url(./BLOB-Regular.eot?#iefix) format('embedded-opentype'),
          url(./BLOB-Regular.otf) format('otf'),
          url(./BLOB-Regular.svg#BLOB-Regular) format('svg'),
          url(./BLOB-Regular.ttf) format('truetype'),
          url(./BLOB-Regular.woff) format('woff'),
          url(./BLOB-Regular.woff2) format('woff2');
   }   

.container{
  width: 100%;
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, 0.7),rgba(0, 0, 0, 0.3)), url(loam.gif);
  background-size:cover;
}

.container .header{
     width: 90%;
     margin:0 auto; 
     display: flex;
     justify-content: space-between;
     align-items: cover;
}

.container .header h1 a{
     text-decoration: none;
     color: white;
     font-family:'BLOB-Regular';
     font-size: 50px;
}

.container .nav ul li{
     display: inline-block;
     margin:0 12px ;
     margin-top:25px ;
     font-family: 'Raleway', sans-serif;

}

.container .nav ul li a{
     text-decoration: none;
     color: white;
}

.container .nav ul li a:hover{
     color: #5B8A72;
}

.container .hero{
     position: absolute;
     left: 50%;
     top:50%;
     transform: translate(-50%,-50%);
     color: white;
     text-align: center;
}

.container .hero h2{
     font-size: 50px;
     margin: auto;
     font-family: 'Lexend Zetta', sans-serif;
}

.container .hero p{
     font-size: 21px;
     font-family: 'Raleway', sans-serif;}

.container .hero button{
     background: none;
     border:2px solid #BFCBA8;
     color: white;
     padding:15px 20px;
     border-radius: 20px;
     outline: none;
     cursor: pointer;
     transition: 0.4s ;
     font-family: 'roboto', sans-serif;
     font-weight:200px;
     font-size: 13px;
}

.container .hero button:hover {
     background-color: #3d493f;
     font-family: 'roboto', sans-serif;
     font-weight: 200px;
     font-size: 13px;
}