body {
  margin-top: 40px;
  background: linear-gradient(to right, #460f0f, #2d2b91);
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.card {
  background-color: black;
  border: solid 1px gray;
  box-shadow: 0 0 30px rgb(198, 22, 252);
  border-radius: 20px;
  margin: 40px auto;
  max-width: 400px;
  padding: 30px;
  height: 550px;
  text-align: center;
}

h1{
  color: #e2a109;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-size: 20px;
  font-weight: 400;
  
}

#loginForm {
  width: 100%;
  max-width: 320px; /* keeps form from stretching too much */
  margin: 40px auto 0 auto;
}

#loginForm label {
  display: block;
  margin-bottom: 5px;
  text-align: left;
  color: #e2a109;
}

#loginForm input {
  width: 100%;
  padding: 10px;
  font-size: 18px;
  margin-bottom: 15px;
  border: 1px solid #8e8e8e;
  border-radius: 5px;
  box-sizing: border-box;
}

#loginForm button {
  background-color: #b03cfe;
  color: white;
  padding: 12px;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 500;
  width: 100%; /* ✅ fits small screens */
  transition: 0.2s;
}

#loginForm button:hover {
  background-color: #e0a416;
  transform: scale(.97);
}

a {
  color: whitesmoke;
  text-decoration: none;
}

.link:hover {
  color: #989ea7;
}

.privacy,
.login,
.forget {
  color: #d39b02;
  font-size: 20px;
  margin: 10px auto;
  width: 100%;
  max-width: 320px;
  text-align: center;
}

/* ✅ Mobile tweaks */
@media screen and (max-width: 480px) {
  .card {
    max-width: 95%;
    height: 650px;
    margin: 10px auto;
    padding: 20px;
    box-shadow: 0 0 15px rgb(198, 22, 252);
  }

  #loginForm {
    max-width: 100%;
    margin-top: 20px;
  }
#loginForm label{
font-size: 22px;
}


  #loginForm input,
  #loginForm button {
    font-size: 24px;
    font-family: Georgia, 'Times New Roman', Times, serif;
  }

  .privacy,
  .login,
  .forget {
    font-size: 22px;
    line-height: 1.4;
    padding: 0 10px;
  }

  .input-wrapper .eye{
    position: absolute;
  }
}

/* Eye icon inside input */
.eye-icon {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  cursor: pointer;
  color: #ccc;
}


.input-wrapper {
    position: relative;
    margin-bottom: 20px;
}

.input-wrapper input {
    width: 100%;
    padding: 13px 44px 13px 12px; /* space for eye icon */
    border: 2px solid #d6d6d6;
    border-radius: 10px;
    font-size: 16px;
    transition: 0.2s;
}

.input-wrapper input:focus {
    border-color: #6721dd;
    outline: none;
}

.input-wrapper .eye {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    cursor: pointer;
    opacity: 0.9;
    transition: 0.2s;
}

.input-wrapper .eye:hover {
    opacity: 1;
}