body{
  background-size: cover;
  background-origin: content-box;
  font-family: arial;
  background-repeat: no-repeat;  
  background-color:#d1eef0;
  border-radius: 5px;
  font-family: 'Poppins', sans-serif;
}
*{
  margin:0;
  padding: 0;
}

/* ---------------------------------header--------------------------- */
nav{
display: flex;
justify-content:  space-around;
align-items: center;
height: 80px;
background-color: rgb(105, 220, 228); 
width: 100%;


}
nav ul{
  display: flex;
  justify-content: center;
  overflow: hidden;
}
nav ul li{
  list-style: none;
  margin: 0 23px;
}

.dropbtn {
  background-color:rgb(12, 224, 239);
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  }
  
  .dropdown {
  position: relative;
  display: inline-block;
  border:none;
  width:100px;
  }
  
  .dropdown-content {
  display: none;
  position: absolute;
  background-color:white;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  }
  
  .dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  }
  
  .dropdown-content a:hover {background-color: rgb(12, 224, 239);}
  
  .dropdown:hover .dropdown-content {
  display: block;
  }
  
  .dropdown:hover .dropbtn {
  background-color:rgb(17, 233, 253);
  }
.right{
  font-size: 1.4rem;
  font-weight: 600;
  text-shadow: 2px 4px 4px gray;
  height: max-content;
  color: white;
 
}
.left{
  font-size: 1.1rem;

}
nav ul li a{
  color:rgb(41, 105, 161);
  text-decoration: none;
}
nav ul li a:hover{
  color: #ffffff;
}
.logo a{
color: #fff;
text-decoration: none;
}
/* .btomj li {
  list-style: none;
}
.btomj li a{
  text-decoration: none;
  color:rgb(12, 88, 155) ;
  font-size: 20px;
  
}

.btn{
  display: inline-block;
  background:rgb(210, 241, 245);
  width:fit-content;
  border:1px solid #f7f5f5;
  padding:12px 50px;
  border-radius:6px;
  transition:background 0.5s;
   
}
.btn:hover{
background:rgb(138, 232, 232);
} */

/* ---------------------------------form------------------------- */
form{
  top:10%;
  left: 50%;
  transform:translate(-50% -50%);
  width:390px ;
  height: 490px;
  padding: 20px;
  position:flex;
  background-color: #ffffff;
  margin: 100px;
  border-radius: 5px;

}
.forgot{
  color: #6bd5e6;
  text-decoration: none;
}
input[type="text"],input[type="password"]
{
  padding:12px ;
  background:#fafafa ;
  border:.3px solid #ccc;
  width: 290px;
  border-radius:3px;
  border-color: #b7b2b2;
}
input[type="submit"]{
padding: 12px;
  width:315px;
  background:#2bd7ee;
  color: #fff;
  border: none;
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
/* input[type="submit"]{
  background-color: #333;
} */
p{
  float: left;
  margin-left:40px ;
  font-weight:bold;
  opacity: .8;
}






#login{
  background: #fff;
  border: 1px solid #ccc;
  margin: 10px;
  border-radius:5px ;
  width:310px;
  padding: 15px;
  font-size: 15px;
  cursor: pointer;

}
img{
  width: 35px;
  height: auto;
  padding: 2px;
}
span{
  color: #555;
  text-decoration:none;
}

span a{
  color: #89d5e1;
  text-decoration: none;
}
h1{
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.heading{
  color: #2bd7ee;
  font-size: 40px;
 font-weight:bold;
}

@media screen and ( min-width: 200px) and (  max-width: 650px) {
  nav {
  flex-direction: column;
  align-items: center;
  height:auto;
   width: 440px;
  
}
nav ul {
display: none;
flex-direction: column;
align-items: center;
width: 100%;
background-color: rgb(105, 220, 228);
}

nav ul li {
margin: 10px 0;
}
form{
margin-left: 5px;
margin-right: 5px;
}
.dropbtn{
  margin-right: 0px !important;
}
}