body    {
    font-family: 'Montserrat', sans-serif;
    background-color:black;
}
#a{
  background-color: darkcyan;
}
.sidebar{
    
   background-color: black;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    box-shadow: 5px,7px, 25px, #999;
    z-index: 1;
    position: sticky;
    
    

}

#l{
  
font-family: 'Oswald', sans-serif;
}
#m{
  font-family: 'Ephesis', cursive;
}
#q{
  font-family: 'Abril Fatface', cursive;
}
.bottom-border{
    border-bottom: 1px groove #eee;
    z-index: -1;
}
.sidebar-link{
    transition: all .4s;
}
.sidebar-link:hover{
    background-color: #444;
    border-radius: 5px;
}
.current{
    background-color: red ;
    border-radius: 7px;
    box-shadow: 2px 5px 10px #111 ;
    transition: all .3s;
}
.current:hover{
    background-color: rgb(177, 0, 0);
    border-radius: 7px;
    box-shadow: 2px 5px 20px #111;
    translate: (-1px);
}

@media (max-width: 768px){
    .sidebar{
      position: static;
      height: auto;
    }
    .top-navbar{
      position: static;

    }
    
}
#header{
  margin-top: 500px;
}

#cs{
      width: 100%;
   height: 100%;
   position: fixed;
   right: 0;
   left: 0;
   top: 0;
   bottom: 0;
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),  url(images/f.jpg) no-repeat center center /cover;
    z-index: -1;
    
   
    
    
    box-shadow: 8px 8px 20px 0px darkslategray inset, -8px -8px 20px 8px darkslategray inset; 
  }
  .banner{
    font-family: serif ;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  }
  .banner-heading{
    animation-name: anim;
    animation-duration: 3s;
  
    }
    .banner-par{
      animation-name: anim;
      animation-duration: 3s;
      animation-delay: .5s;
      animation-fill-mode: backwards;
  
  
  
  }
  #wheat-btn{
    border-color: wheat;
    color: wheat;
  }
  #wheat-btn:hover{
    background-color:wheat;
    color: black;
  }
  
  
  @keyframes anim{
    0%{
      transform: translateX(-100px);
      opacity: 0;
    }
    100%{
      transform: translateX(0);
      opacity: 1;
    }
  }
  
  
  .container{
      position: relative;
      
    
  }
 
 
 #d{
    font-size: 100px;
    font-weight: bold;
 }


 .fromLeft{
     animation-name: fromLeft;
     animation-duration: 3s;
 }
 .fromRight{
    animation-name: fromRight;
    animation-duration: 3s;
}

 @keyframes fromLeft{
    0%{
      transform: translateX(-120px);
      opacity: 0;
    }
    100%{
      transform: translateX(0);
      opacity: 1;
    }
  }


  @keyframes fromRight{
    0%{
      transform: translateX(30px);
      opacity: 0;
    }
    100%{
      transform: translateX(0);
      opacity: 1;
    }
  }
  #fname {
    background-color:white;
      width: 100%; /* Full width */
      padding: 12px; /* Some padding */ 
      border: 1px solid #ccc; /* Gray border */
      border-radius: 4px; /* Rounded borders */
      box-sizing: border-box; /* Make sure that padding and width stays in place */
      margin-top: 6px; /* Add a top margin */
      margin-bottom: 16px; /* Bottom margin */
      resize: vertical /* Allow the user to vertically resize the textarea (not horizontally) */
      
    }
   
  
    
   
   
    
    .container {
      border-radius: 5px;
      
      padding: 20px;
    }
    .startup{
      text-align: center;
      color: whitesmoke;
      font-family: serif;
      font-weight: bold;
    }
  
    #wheat-btn{
        border-color: white;
        border-radius: 5px;
        color: white;
      }
      #wheat-btn:hover{
        background-color:white;
        color: black;
      }
     
      #thank{
        color: #00dfdf;
        text-align: center;
       
      }
      .form-invalid{
        outline: 2px solid red !important;
      }