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

*{
    font-family:Inter,sans-serif;
}

body{

    background:#FFF8E7;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    transition:.3s;
}

/* DARK */

body.dark{

    background:#1e1e1e;

}

/* Wrapper */

.login-wrapper{

    width:100%;

    display:flex;

    justify-content:center;

    padding:20px;

}

/* Card */

.login-card{

    width:420px;

    background:white;

    border:4px solid #000;

    border-radius:22px;

    padding:45px;

    box-shadow:12px 12px 0px #000;

    transition:.25s;
}

body.dark .login-card{

    background:#2D2D2D;

    color:white;

    border-color:white;

    box-shadow:12px 12px 0 white;

}

/* Logo */

.logo-box{

    text-align:center;

    margin-bottom:35px;

}

.logo-box h1{

    font-size:42px;

    font-weight:900;

}

.logo-box p{

    margin-top:10px;

    font-size:16px;

    font-weight:700;

    color:#777;

}

body.dark .logo-box p{

    color:#ccc;

}

/* Labels */

label{

    display:block;

    margin-bottom:8px;

    font-weight:800;

    font-size:15px;

}

/* Input */

.input-group{

    margin-bottom:22px;

}

input{

    width:100%;

    padding:16px;

    font-size:16px;

    border:4px solid #000;

    border-radius:14px;

    outline:none;

    background:#fff;

    transition:.2s;

}

body.dark input{

    background:#444;

    color:white;

    border-color:white;

}

input:focus{

    transform:translate(-3px,-3px);

    box-shadow:6px 6px 0 black;

}

body.dark input:focus{

    box-shadow:6px 6px 0 white;

}

/* Button */

.login-btn{

    width:100%;

    margin-top:10px;

    padding:18px;

    font-size:18px;

    font-weight:800;

    background:#FFD93D;

    border:4px solid black;

    border-radius:16px;

    cursor:pointer;

    box-shadow:7px 7px 0 black;

    transition:.15s;

}

.login-btn:hover{

    transform:translate(-4px,-4px);

    box-shadow:11px 11px 0 black;

}

.login-btn:active{

    transform:translate(3px,3px);

    box-shadow:none;

}

/* Theme Button */

.theme-btn{

    position:absolute;

    top:25px;

    right:25px;

    width:58px;

    height:58px;

    border:4px solid black;

    background:#7EE8FA;

    border-radius:16px;

    cursor:pointer;

    font-size:22px;

    font-weight:bold;

    box-shadow:6px 6px 0 black;

}

.theme-btn:hover{

    transform:translate(-3px,-3px);

}

body.dark .theme-btn{

    border-color:white;

    box-shadow:6px 6px 0 white;

}

/* Error */

.error-box{

    background:#FF6B6B;

    border:4px solid black;

    padding:15px;

    margin-bottom:20px;

    border-radius:16px;

    box-shadow:5px 5px 0 black;

}

.error-box p{

    color:black;

    font-weight:700;

}

/* Responsive */

@media(max-width:500px){

.login-card{

width:100%;

padding:30px;

}

.logo-box h1{

font-size:34px;

}

}