*{
  box-sizing:border-box;
  font-family:Arial, sans-serif;
}

body{
  background:#111118;

  display:flex;
  justify-content:center;
  align-items:center;

  min-height:100vh;

  margin:0;

  color:white;

  padding:20px;
}

/* WRAPPER */
.login-wrapper{
  width:100%;
  max-width:340px;
}

/* LOGO */
.logo-container{
  display:flex;
  justify-content:center;
  align-items:center;

  margin-bottom:20px;
}

.logo{
  width:180px;
  max-width:100%;
  height:auto;

  object-fit:contain;

  filter:
  drop-shadow(0 0 10px rgba(255,79,163,.25));
}

/* LOGIN */
.login-container{
  background:#1d1d2e;

  padding:35px;

  border-radius:20px;

  width:100%;

  border:2px solid rgba(255,79,163,.15);

  box-shadow:
  0 0 25px rgba(0,0,0,.5),
  0 0 15px rgba(255,0,119,.12);
}

/* TITULO */
.login-container h2{
  text-align:center;

  color:#ff4fa3;

  margin-bottom:25px;

  font-size:30px;

  text-shadow:
  0 0 10px rgba(255,79,163,.25);
}

/* INPUTS */
input{
  width:100%;

  padding:14px;

  margin:12px 0;

  border:none;

  border-radius:12px;

  background:#2a2a44;

  color:white;

  font-size:15px;

  outline:none;

  transition:.2s;
}

input:focus{
  box-shadow:
  0 0 10px rgba(255,79,163,.25);
}

input::placeholder{
  color:#bdbdbd;
}

/* BOTON */
button{
  width:100%;

  padding:14px;

  margin-top:10px;

  background:linear-gradient(
    135deg,
    #ff4fa3,
    #ff0077
  );

  border:none;

  color:white;

  border-radius:12px;

  cursor:pointer;

  font-weight:bold;

  font-size:16px;

  box-shadow:
  0 0 15px rgba(255,0,119,.2);

  transition:.2s;
}

button:hover{
  transform:scale(1.02);
}

button:active{
  transform:scale(.98);
}

/* ERROR */
.error{
  color:#ff6b9f;

  font-size:14px;

  margin-top:14px;

  text-align:center;

  display:none;
}

/* CELULAR */
@media(max-width:480px){

  .login-wrapper{
    max-width:100%;
  }

  .logo{
    width:150px;
  }

  .login-container{
    width:100%;
    padding:28px;
  }

  .login-container h2{
    font-size:26px;
  }

  input{
    padding:12px;
    font-size:14px;
  }

  button{
    padding:13px;
    font-size:15px;
  }

}