body{
  margin: 0;
  padding: 0;
  background-image:  linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../assest/image/03268f83a559303cd1141258e73a4b0c.jpg');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* Optional: keeps the background fixed while scrolling */
}

#form{
    background-color: rgb(255, 255, 255);
    width:28%;
    border-radius: 6px;
    margin:120px auto;
    padding:50px;
    box-shadow: 10px 10px 5px rgb(7, 7, 7);

    
}
h1{
    text-align: center;
}
input{
    width: 90%;
    border-radius: 4px;
    border: 3px solid #f6efef;
    padding: 5px;
}

#btn{
    width: 100%;
    color:rgb(255, 255, 255);
    background-color: rgb(7, 6, 7);
    padding:10px;
    font-size: large;
    border-radius: 10px;
}
#login {
  text-align: center;
  margin-top: 20px;
}

#login a {
  text-decoration: none;
  color: #007bff;
}
.password-field {
  position: relative;
}

.password-toggle-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
}

@media screen and (max-width: 1350px) {
    #form {
      width: 40%;
      margin-left:none;
      padding:40px;
    }
  }
@media screen and (max-width: 1100px) {
    #form {
      width: 50%;
      margin-left:none;
      padding:40px;
    }
  }
@media screen and (max-width: 700px) {
    #form {
      width: 80%;
      margin-left:none;
      padding:40px;
    }
  }