/* ===========================
   GOOGLE FONT
=========================== */

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

/* ===========================
   RESET
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Inter',sans-serif;
    background:
    linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55)),
    url("https://images.unsplash.com/photo-1511707171634-5f897ff02aa9?auto=format&fit=crop&w=1600&q=80");
    background-size:cover;
    background-position:center;
    min-height:100vh;
}

/* ===========================
   CONTAINER
=========================== */

.auth-container{

    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:40px;
}

/* ===========================
   CARD
=========================== */

.auth-card{

    width:430px;

    background:rgba(255,255,255,.12);

    backdrop-filter:blur(20px);

    border:1px solid rgba(255,255,255,.2);

    border-radius:30px;

    padding:45px;

    color:#fff;

    box-shadow:

    0 20px 60px rgba(0,0,0,.45);

    animation:fade .5s ease;
}

@keyframes fade{

from{

opacity:0;
transform:translateY(30px);

}

to{

opacity:1;
transform:translateY(0);

}

}

/* ===========================
   TITLE
=========================== */

.auth-card h1{

font-size:34px;

font-family:'Poppins',sans-serif;

margin-bottom:10px;

font-weight:700;

}

.auth-card p{

color:#d9d9d9;

margin-bottom:35px;

font-size:15px;

}

/* ===========================
   FORM
=========================== */

.auth-card label{

display:block;

margin-bottom:8px;

font-weight:600;

font-size:14px;

}

.auth-card input{

width:100%;

padding:15px 18px;

margin-bottom:22px;

border-radius:14px;

border:1px solid rgba(255,255,255,.25);

background:rgba(255,255,255,.08);

color:#fff;

font-size:15px;

transition:.3s;

}

.auth-card input::placeholder{

color:#d1d1d1;

}

.auth-card input:focus{

outline:none;

border-color:#2997ff;

background:rgba(255,255,255,.15);

box-shadow:0 0 0 4px rgba(41,151,255,.2);

}

/* ===========================
   BUTTON
=========================== */

.auth-card button{

width:100%;

padding:15px;

border:none;

border-radius:50px;

background:#0071e3;

color:#fff;

font-size:16px;

font-weight:600;

cursor:pointer;

transition:.3s;

}

.auth-card button:hover{

background:#2997ff;

transform:translateY(-2px);

box-shadow:0 15px 35px rgba(0,113,227,.35);

}

/* ===========================
   LINK
=========================== */

.auth-footer{

margin-top:28px;

text-align:center;

color:#ddd;

font-size:14px;

}

.auth-footer a{

color:white;

font-weight:600;

text-decoration:none;

}

.auth-footer a:hover{

text-decoration:underline;

}

/* ===========================
   ALERT
=========================== */

.alert{

padding:14px;

margin-bottom:20px;

border-radius:14px;

font-size:14px;

}

.success{

background:#16a34a;

color:white;

}

.error{

background:#dc2626;

color:white;

}

/* ===========================
   LOGO
=========================== */

.logo{

text-align:center;

margin-bottom:25px;

}

.logo img{

width:70px;

margin-bottom:15px;

}

.logo h2{

font-size:26px;

font-weight:700;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:600px){

.auth-card{

width:100%;

padding:35px 25px;

border-radius:22px;

}

.auth-card h1{

font-size:28px;

}

}