@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap");

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

body {
min-height:100vh;
background-image: url(hero-bg.jpg);
display:flex;
justify-content:center;
align-items:center;
}

.wrapper {
width:380px;
background:#fff;
border-radius:10px;
padding:30px;
box-shadow:0 15px 40px rgba(0,0,0,0.3);
}

/* FORMS */
.form {
transition:0.4s;
}

.hidden {
display:none;
}

h2 {
text-align:center;
margin-bottom:20px;
color:#333;
}

/* INPUT */
.input-field {
position:relative;
margin-bottom:15px;
}

.input-field input {
width:100%;
padding:10px;
border:1px solid #ccc;
border-radius:4px;
outline:none;
}

.input-field label {
position:absolute;
top:50%;
left:10px;
transform:translateY(-50%);
color:#888;
transition:.3s;
pointer-events:none;
}

.input-field input:focus ~ label,
.input-field input:valid ~ label {
top:-8px;
font-size:12px;
color: #3d7ea1;
background:white;
padding:0 5px;
}

/* LINK */
.toggle {
text-align:center;
margin-top:10px;
}

.toggle a {
color: #3d7ea1;
cursor:pointer;
text-decoration:none;
}

/* BUTTON */
button {
width:100%;
padding:10px;
border:none;
border-radius:4px;
background:#3d7ea1;
color:white;
cursor:pointer;
}

button:hover {
background:#333;
}

/* FORGOT */
.forget {
display:flex;
justify-content:space-between;
font-size:13px;
margin-bottom:15px;
}

/* BACK BUTTON */
.back-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  width: 45px;
  height: 45px;
  background: #3d7ea1;
  color: white;
  font-size: 22px;
  font-weight: bold;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
  transition: 0.3s;
  z-index: 1000;
}

.back-btn:hover {
  background: #333;
  transform: scale(1.1);
}

/* MOBILE FIX */
@media (max-width: 500px) {
  .back-btn {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}