*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Verdana, Tahoma, sans-serif;
}
 .container {
   
     min-height: 90vh;
     display: grid;
     grid-template-columns: repeat(12, 1fr);
    grid-template-rows: 50px auto auto 50px;
    
 }

 .header {
     background-color: rgb(135, 236, 41);
     grid-column: 1 /-1;
 }

 .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px 0px 50px;
 }
 .header .menu-btn {
    color: rgb(21, 25, 235);
    font-size: 30px;
    cursor: pointer;
    display: none;
 }

 .header ul {
    display: flex;
    list-style: none;

 }
 .header ul li {
    margin: 0 5px;
    
 }

 .header ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 1px;
    background-color: rgba(5,4,46,0.7);
    padding: 8px 10px;
    border-radius: 6px;
    transition: all 0.3s ease;

 }
 .header ul li a:hover, 
 .header ul li a.active {
    background-color: royalblue;

 }
 .header .logo {
  margin-top: 8px;
  margin-left: 20px;
  margin-bottom: 10px;
  border-radius: 50PX;
  cursor: pointer;
  font-weight: 500;
 }

 .menu {
    background-color: rgb(0, 132, 255);
    grid-column: 1 / 4; 
 }
 .content {
   background-image: linear-gradient(rgba(13, 13, 14, 0.3),rgba(3, 41, 28, 0.7)),url("bg9.jpg");
    grid-column: 4 /-1;
    background-position: center;
    background-size: cover;
 }
 .iecon {
   color: rgb(32, 223, 159);
}
 .middle {
    color: rgb(106, 231, 3 0.7);

    text-align: center;
    font-size: 5rem;
    margin-top: 30%;
 }



 .blue {
    color: rgb(140, 0, 255);
   background-color: rgb(27, 230, 8);
   text-decoration: none;
    padding: 3px;
    margin: 3px;
    border-radius: 6px;
 }
 
 .blue:hover{
   color:rgb(234, 233, 243);
   background:rgb(60, 46, 187);
 }
 

 .footer {
   height: 60vh;
   margin-top: 1rem;
    background-color: rgb(0, 17, 255);
    grid-column: 1 /-1;
 }
 #click {
    display: none;
 }

 @media (max-width: 940px) {
   .header .menu-btn {
     display: block;
     
   }

   #click:checked ~ .menu-btn i:before {
      content: "\f00d";
   }

    .header ul {
       position: fixed;
       top: 50px;
       left: -100%;
       background: linear-gradient(rgba(9,5,54,0.3),rgba(5,4,46,0.7)),url("bg5.jpg");
       background-position: center;
       image-resolution: 100%;
       min-height:100vh;
       width: 100%;
       display: block;
       text-align: center;
       transition: all 0.4s ease;
    }

    #click:checked ~ ul {
      left: 0%; 
    }
    .header ul li {
       margin: 40px 0;
    }
    .header ul li a {
       font-size: 20px;
    }
    .menu {
      background-color: rgb(0, 238, 255);
      grid-column: 1 /-1; 
   }
   .content {
   
      grid-column: 1 /-1;
    
   }
  
   .form {
   
      padding: 13px 13px;
      margin-top: 3rem;
      margin-left: 20%;
      margin-right: 20%;
     
    }
    
    .subscribe {
      display: block;
     
      background-color: darkslategray;
      border-radius: 10px;
      padding-bottom: 20px;
      margin-top: 8px;
      margin-bottom: 5%;
      margin-right: 20%;
   }
    
    
    
 }