*{
    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, 8fr, auto, 50px;
    
    
 }
 

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

 .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 50px 0px 50px;
    height: 3rem;
    margin-top: 5px;
 }
 .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: 50%;
  cursor: pointer;
  font-weight: 500;
 }
 
 .menu {
    background-color: rgb(0, 132, 255);
    grid-column: 1 / 4; 
  
 }
 
 .content {
  background-color: black;
    grid-column: 4 /-1;
    background-image: linear-gradient(rgba(9,5,54,0.3),rgba(30, 29, 122, 0.7)),url("bg6.jpg");
    background-position: center;
    background-size: cover;
    margin-top: 0;
 }
 .LESSON {
     display: block;
     color: linen;
     height: 2rem;
     background-color: rgb(6, 87, 6);
     border-style: groove;
     text-align: center;
     justify-content: space-evenly;
     text-decoration: none;
     margin-top: 0;
 }
 .instraction {
    font-size: 1rem;
    margin-top: 2rem;
    color: rgb(3, 0, 209);
    background-color: hotpink;
    border-radius: 10px;
    border-style: groove;
    text-align: justify;
 }
 
 .ol-chiki ul li {
   display: inline;
   flex-direction: right;
   text-decoration: none;
   color: rgb(15, 28, 218);
   margin: 1rem;
   font-size: 3rem;
   justify-content: space-between;
  cursor: pointer;
  background-color: rgb(29, 221, 205);
  border-radius: 10%;
  box-sizing: border-box;
transition: 0.2s;
 }
 .ol-chiki ul li:hover {
   color: rgb(255, 0, 255);

 }
 

 
  .olchikib ul li {
    display: inline;
   flex-direction: right;
   text-decoration: none;
   margin: 1rem;
   font-size: 2.9rem;
   justify-content: space-between;
  cursor: pointer;
  background-color: rgb(35, 219, 29);
  border-radius: 10%;
  box-sizing: border-box;
  }
  .olchikib ul li:hover {
    color: rgb(255, 0, 255);
 
  }
  .olchikic ul li {
    display: inline;
   flex-direction: right;
   text-decoration: none;
   margin: 1rem;
   font-size: 3.4rem;
   justify-content: space-between;
  cursor: pointer;
  background-color: rgb(18, 171, 182);
  border-radius: 10%;
  box-sizing: border-box;
  }
  .olchikic ul li:hover {
    color: rgb(255, 0, 255);
 
  }
  .olchikid ul li {
    display: inline;
    flex-direction: right;
    text-decoration: none;
    margin: 1rem;
    font-size: 3rem;
    justify-content: space-between;
   cursor: pointer;
   background-color: rgb(189, 228, 17);
   border-radius: 10%;
   box-sizing: border-box;
  }
  .olchikid ul li:hover {
    color: rgb(255, 0, 255);
 
  }
  .olchikie ul li {
    display: inline;
   flex-direction: right;
   text-decoration: none;
   color: dodgerblue;
   margin: 1rem;
   font-size: 3rem;
   justify-content: space-between;
  cursor: pointer;
  background-color: rgb(36, 24, 192);
  border-radius: 10%;
  box-sizing: border-box;
  }
  .olchikie ul li:hover {
    color: rgb(255, 0, 255);
 
  }
  
  
  .olchikif ul li {
    display: inline;
    flex-direction: right;
    text-decoration: none;
    color: floralwhite;
    margin: 1rem;
    font-size: 3rem;
    justify-content: space-between;
   cursor: pointer;
   background-color: rgb(199, 165, 15);
   border-radius:10%;
   box-sizing: border-box;
  }
  .olchikif ul li:hover {
    color: rgb(255, 0, 255);
 
  }
  .olchikig ul li {
    display: inline;
    flex-direction: right;
    text-decoration: none;
    margin: 1rem;
    margin-bottom: 2rem;
    padding: 0.5rem;
    font-size: 3rem;
    justify-content: space-between;
   cursor: pointer;
   background-color: rgb(29, 155, 177);
   border-radius:10%;
   box-sizing: border-box;
  }
  .olchikig ul li:hover {
    color: rgb(255, 0, 0);
 
  }

 .instraction {
   font-size: 1rem;
   margin-top: 6rem;
   margin-bottom: 3rem;
  
}
 .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("E:\webpage/bg5.jpg");
       background-position: center;
       image-resolution: 100%;
       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;
    margin-bottom: 2rem;
   }
   .form {
   
      padding: 1rem 1rem;
      margin-top: 3rem; 
      margin-left: 20%;
      margin-right: 20%;
      
    }
    .footer {
      height: 60vh;
      margin-top: 8rem;
      background-color: rgb(0, 17, 255);
      grid-column: 1 /-1;
   }
  
    
    .subscribe {
      display: block;
     
      background-color: darkslategray;
      border-radius: 10px;
      padding-bottom: 20px;
      margin-top: 8px;
      margin-bottom: 0%;
      margin-right: 20%;
   }
   @media (orientation: landscape) and (max-width: 940px){
      .form {
         margin-top: 80vh;
         margin-bottom: 1rem;
         margin-left: 20%;
         margin-right: 20%;
     }
     .footer {
      height: 100vh;
     
      background-color: rgb(0, 17, 255);
      grid-column: 1 /-1;
   }
   .instraction {
      font-size: 1rem;
      margin-top: 2rem;
      margin-bottom: 4rem;
     
   }
   .content {
      background-color: black;
  
      grid-column: 4 /-1;
     
     
   }
   .menu {
      background-color: rgb(0, 132, 255);
      grid-column: 1 / 4; 
    
   }
  
  
   }
   

   
    
 }