*{
    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 8fr 300px 300px 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 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(72, 134, 216);
    grid-column: 1 / 4; 
 }
 .content {
   
    grid-column: 4 /-1;
    background-image: linear-gradient(rgba(9,5,54,0.3),rgba(30, 29, 122, 0.7)),url("BG4.jpg");
    background-position: center;
    background-size: cover;
 }
.middle {
   color: rgb(106, 231, 3);
   text-align: center;
   font-size: 5rem;
   margin-top: 30%;
}

 
   

 .footer {
    color: #fff;
    background-color: rgb(0, 17, 255);
    grid-column: 1 /-1;
 }
 .time {
    float: right;
    margin-top: 30px;
    margin-right: 30px;
 }
 .date {
   float: right;
   margin-top: 5px;
  
 }
 .copyright {
   grid-column: 1 /-1;
    color: #fff;
    background-color: rgb(0, 17, 255);
    margin-left: 10%;
    margin-bottom: 5%;

 }
      
    a {
    text-decoration: none;
}

.fa-facebook-f {
    font-size: 4rem;
    color: #eaedf0;
    transition: 0.3s;
}

.fa-facebook-f:hover {
    color: #0d65d9;
    transform: scale(1.2);
}
 #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)),;
       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;
    
   }
    .copyright {
   grid-column: 1 /-1;
    color: #fff;
    background-color: rgb(50, 34, 255);
    margin-left: 5%;
    margin-top: 15%
    margin-bottom: 5%;

 }

    
 }