*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:"Segoe UI",sans-serif;
}

/* ===========================
   BACKGROUND
=========================== */

body{
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:20px;

    background:linear-gradient(-45deg,#0f172a,#1e293b,#0b1220,#1b2a41);
    background-size:400% 400%;
    animation:gradientMove 10s ease infinite;
}

@keyframes gradientMove{

    0%{background-position:0% 50%;}

    50%{background-position:100% 50%;}

    100%{background-position:0% 50%;}

}

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

.card{

    width:100%;
    max-width:390px;

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

    backdrop-filter:blur(20px);

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

    padding:34px 28px;

    border-radius:22px;

    color:#fff;

    box-shadow:
    0 25px 80px rgba(0,0,0,.50);

    animation:slideIn .6s ease;

}

@keyframes slideIn{

    from{

        opacity:0;

        transform:
        translateY(35px)
        scale(.95);

    }

    to{

        opacity:1;

        transform:
        translateY(0)
        scale(1);

    }

}

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

h2{

    text-align:center;

    font-size:34px;

    font-weight:700;

    margin-bottom:26px;

}

/* ===========================
   INPUT
=========================== */

input{

    width:100%;

    padding:15px;

    margin:12px 0;

    border-radius:12px;

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

    background:rgba(0,0,0,.25);

    color:#fff;

    font-size:16px;

    outline:none;

    transition:.25s;

}

input::placeholder{

    color:#aeb5c3;

}

input:focus{

    border-color:#8CC63F;

    box-shadow:
    0 0 0 3px rgba(140,198,63,.25);

}

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

button{

    width:100%;

    padding:15px;

    margin-top:16px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    font-size:16px;

    font-weight:700;

    background:
    linear-gradient(135deg,#8CC63F,#A6E34B);

    transition:.25s;

    box-shadow:
    0 0 22px rgba(140,198,63,.35);

}

button:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 35px rgba(140,198,63,.60);

}

/* ===========================
   SHAKE
=========================== */

@keyframes shake{

    0%,100%{

        transform:translateX(0);

    }

    25%{

        transform:translateX(-6px);

    }

    50%{

        transform:translateX(6px);

    }

    75%{

        transform:translateX(-6px);

    }

}

.shake{

    animation:shake .3s ease;

    border:1px solid #ff4d4d!important;

}

/* ===========================
   SUCCESS
=========================== */

.success{

    animation:successSlide .5s ease forwards;

}

@keyframes successSlide{

    from{

        opacity:1;

        transform:scale(1);

    }

    to{

        opacity:0;

        transform:
        scale(1.08)
        translateY(-45px);

    }

}

/* ===========================
   LOADER
=========================== */

.loader{

    width:20px;

    height:20px;

    border-radius:50%;

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

    border-top:3px solid #8CC63F;

    margin:16px auto;

    display:none;

    animation:spin .8s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}

/* ===========================
   ERROR
=========================== */

#error{

    margin-top:14px;

    text-align:center;

    color:#ff5a5a;

    font-size:15px;

}

/* ===========================
   MOBILE
=========================== */

@media(max-width:480px){

    body{

        padding:22px;

    }

    .card{

        max-width:100%;

        padding:34px 26px;

        border-radius:22px;

    }

    h2{

        font-size:32px;

        margin-bottom:24px;

    }

    input{

        padding:16px;

        font-size:16px;

    }

    button{

        padding:16px;

        font-size:16px;

    }

}

/* ===========================
   TABLET
=========================== */

@media(min-width:768px){

    .card{

        max-width:470px;

        padding:44px;

    }

    h2{

        font-size:38px;

    }

    input{

        padding:17px;

        font-size:17px;

    }

    button{

        padding:17px;

        font-size:17px;

    }

}

/* ===========================
   LAPTOP
=========================== */

@media(min-width:992px){

    .card{

        max-width:540px;

        padding:52px;

    }

    h2{

        font-size:42px;

    }

}

/* ===========================
   DESKTOP
=========================== */

@media(min-width:1400px){

    .card{

        max-width:600px;

        padding:60px;

    }

    h2{

        font-size:46px;

    }

}