@media (prefers-color-scheme: light) {
  body {
    background: linear-gradient(
      to left,
      rgb(175, 183, 190),
      rgb(190, 168, 168)
    );
  }
  #login {
    background: linear-gradient(
      to left,
      rgb(135, 142, 148),
      rgb(154, 135, 135)
    );
  }
}

@media (prefers-color-scheme: dark){
    body{
    background: linear-gradient(to left , rgb(3, 30, 53), rgb(41, 1, 1));
    

}
#login{
   background: linear-gradient(to left , rgb(23, 46, 66), rgb(60, 25, 25));
}
#login b{
color: aliceblue;
}
#login Img{
    filter: invert(100%);
  }
  #login label {
    color: aliceblue;
  }
}

form input {
  display: flex;
  margin: 24px 0px 3px 0px;
  border-radius: 6px;
  border: 1px solid black;
  padding: 4px;
  background: rgb(202, 201, 187);
  width: 400px;
}
form button {
  margin: 18px auto;
  width: fit-content;
  padding: 6px 12px;
  border-radius: 360px;
  background: rgb(202, 201, 187);
  width: 95%;
  cursor: pointer;
}
#login {
  display: flex;
  flex-direction: column;
  width: fit-content;
  margin: 60px auto;
  /* background: rgb(223, 215, 215); */
  padding: 80px 100px;
  border-radius: 8px;
  opacity: 1;
}
#login img {
  width: 30px;
  margin: auto;
}
#login b {
  text-align: center;
}
#loginbtn {
  display: flex;
  margin: 3px auto;
}
a {
  color: rgb(167, 65, 65);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  text-decoration: none;
  margin-left: 0px;
}

@media only screen and (max-width: 632px) {
  #login {
    padding: 40px 20px;
    max-width: 80%;
    margin-top: 100px;
  }
  form input {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
  form button {
    max-width: 70%;
  }
}
#login a {
  font-size: 0.9em;
  margin: auto;
}

#form a {
  font-size: 0.9em;
  margin-left: 42px;
}