*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

body{
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  background:
    linear-gradient(rgba(0,0,0,0.75),
    rgba(0,0,0,0.75)),
    url("../images/bg.jpg");

  background-size:cover;
  background-position:center;
  padding:20px;
}

.container{
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

.card{
  width:100%;
  max-width:430px;

  background:rgba(255,255,255,0.08);

  backdrop-filter:blur(18px);

  border:1px solid rgba(255,255,255,0.12);

  border-radius:22px;

  padding:45px 35px;

  text-align:center;

  box-shadow:
    0 8px 32px rgba(0,0,0,0.35);
}

.logo{
  width:90px;
  margin-bottom:20px;
}

.card h1{
  color:#fff;
  font-size:30px;
  margin-bottom:12px;
}

.subtitle{
  color:#cfcfcf;
  font-size:14px;
  line-height:1.6;
  margin-bottom:30px;
}

.input-box{
  width:100%;
  margin-bottom:20px;
}

.input-box input{
  width:100%;
  padding:15px 18px;

  border:none;
  outline:none;

  border-radius:12px;

  background:rgba(255,255,255,0.12);

  color:#fff;

  font-size:15px;

  transition:0.3s;
}

.input-box input::placeholder{
  color:#c7c7c7;
}

.input-box input:focus{
  background:rgba(255,255,255,0.18);

  box-shadow:
    0 0 0 2px #ffd70055;
}

.reset-btn{
  width:100%;

  padding:15px;

  border:none;
  border-radius:12px;

  background:#ffd700;

  color:#111;

  font-size:16px;
  font-weight:600;

  cursor:pointer;

  transition:0.3s;
}

.reset-btn:hover{
  transform:translateY(-2px);

  background:#ffdf33;

  box-shadow:
    0 8px 18px rgba(255,215,0,0.25);
}

.back-login{
  margin-top:25px;

  color:#cfcfcf;

  font-size:14px;
}

.back-login a{
  color:#ffd700;
  text-decoration:none;
  font-weight:500;
}

.back-login a:hover{
  text-decoration:underline;
}

@media(max-width:500px){

  .card{
    padding:35px 22px;
  }

  .card h1{
    font-size:25px;
  }

}