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

 .header {
    
     background-color: rgb(91, 211, 22);
     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;
 }

 .header .logo:hover {
    color: yellow;
    font-size: 20PX;
 }

a {
   color: rgb(17, 0, 255);
   font: 1.5em sans-serif;
   text-decoration: none;
}


 .menu {
    background-color: rgb(0, 132, 255);
    grid-column: 1 / 4; 
 }
 .content {
   color: rgb(196, 236, 15);
    grid-column: 4 /-1;
    background-image: linear-gradient(rgba(13, 13, 14, 0.3),rgba(3, 41, 28, 0.7)),url("bg8.jpg");
    background-position: center;
    background-size: cover;
    margin: 8px;
   
 }
 .h1 {
    background-color: rgb(3, 46, 3);
    border: solid 2px  rgb(140, 0, 255);
    border-radius: 10px;
    margin-bottom: 20px;
    align-items: center;
    text-align: center;
 }

 img {
    float: right;
    width: min-content;
 }

 .text {
    text-align: justify;
    margin: 8px;
 }
 .para {
    justify-content: space-between;
    margin: 8px;
 }
 
 .middle {
    color: rgb(106, 231, 3 0.7);

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


.form {
   
   padding: 13px 13px;
   margin-top: 3rem;
   margin-left: 20%;
   margin-right: 40%;
  
   background-color: rgb(53, 144, 224);
   border-radius: 10px;
   display:grid;
   flex-direction: column;
   
 }
 .form input {
   margin: 5px;
   padding: 10px 10px;
   border: 1px rgba(81,91,233, 0.5);
   outline: none;
 }
 .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);
 }
 .subscribe {
    display: flex;
    float: right;
    background-color: darkslategray;
    border-radius: 10px;
    padding-bottom: 20px;
    margin-bottom: 5%;
 }
   

 .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;
    
   }
  
    
    
 }