body{

  margin:0;

  padding:0;

  height:100vh;

  display:flex;

  justify-content:center;

  align-items:center;

  font-family:Arial, sans-serif;

  background:
  linear-gradient(
    rgba(0,0,0,0.55),
    rgba(0,0,0,0.75)
  ),

  url("bg.jpg");

  background-size:cover;

  background-position:center;

  overflow:hidden;
}

/* BOX */

.container{

  width:350px;

  padding:35px;

  border-radius:28px;

  background:
  rgba(15,15,15,0.45);

  backdrop-filter:blur(12px);

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

  box-shadow:
  0 0 35px rgba(0,0,0,0.5);

  text-align:center;

  color:white;
}

/* TITLE */

.container h1{

  margin-bottom:25px;

  font-size:34px;

  font-weight:bold;

  letter-spacing:1px;
}

/* INPUT */

input{

  width:100%;

  padding:14px;

  margin-bottom:18px;

  border:none;

  outline:none;

  border-radius:15px;

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

  color:white;

  font-size:15px;

  box-sizing:border-box;
}

input::placeholder{

  color:#bbb;
}

/* BUTTON */

button{

  width:100%;

  padding:14px;

  margin-top:8px;

  border:none;

  border-radius:16px;

  background:
  linear-gradient(
    135deg,
    #2457ff,
    #6a00ff
  );

  color:white;

  font-size:16px;

  font-weight:bold;

  cursor:pointer;

  transition:0.25s;

  box-shadow:
  0 0 18px rgba(90,100,255,0.45);
}

button:hover{

  transform:scale(1.04);

  box-shadow:
  0 0 28px rgba(120,100,255,0.75);
}

/* TEXT */

p{

  margin-top:18px;

  color:#ddd;
}

/* LINK */

a{

  color:#9ab3ff;

  text-decoration:none;

  font-weight:bold;
}

a:hover{

  text-decoration:underline;
}