*{
    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(32, 233, 14);
     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("bg10.jpg");
    grid-column: 4 /-1;
    background-position: center;
    background-size: cover;
   
 }
 .tara {
 margin-top: 5%;
 margin-right: 40%;
 margin-left: 20%;
  display: block;

 }
 .tara img{
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 3px solid ;
    border-color: rgb(247, 105, 10);
   

 }
 .myself {
    color: #cee409de;
    margin-top: 2%;
   margin-bottom: 10%;
    text-align: center;
    text-shadow: rgb(0, 17, 255);
 }


 .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 {
  min-height: 60vh;
   margin-top:0;
    background-color: rgb(0, 17, 255);
    grid-column: 1 /-1;
 }
 .contact-container{

    width:450px;
    margin:40px auto;
    background:rgb(133, 196, 233);
    padding:30px;
    border-radius:10px;
    box-shadow:0 0 15px rgba(0,0,0,.2);

}

h2{
    text-align:center;
    margin-bottom:20px;
    color:#006400;
}

label{
    display:block;
    margin-top:15px;
    margin-bottom:5px;
}

input,
textarea{

    width:100%;
    padding:12px;
    border:1px solid #ccc;
    border-radius:5px;
    font-size:16px;

}

textarea{
    resize:none;
}

input[type=submit]{

    margin-top:10px;
    background:#006400;
    color:white;
    border:none;
    cursor:pointer;
    font-size:18px;

}

input[type=submit]:hover{

    background:#008000;

} 
 #click {
    display: none;
 }

 @media (max-width: 940px) {
   .header .menu-btn {
     display: block;
     
   }
.footer {
  min-height: 70vh;
   margin-top:0;
    background-color: rgb(0, 17, 255);
    grid-column: 1 /-1;
 }
   #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%;
       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-left: 20%;
      margin-right: 20%;
     
     
      
    }
    .tara {
      margin-top: 5%;
      margin-right: -20%;
      margin-left: 0%;
      display: block;
  
    } 
    
   
   @media (orientation: landscape) and (max-width: 940px){
      .footer {
         height: 80vh;
         margin-top: 0.3rem;
          background-color: rgb(15, 95, 185);
          grid-column: 1 /-1;
       }
   }
    
    
 }