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

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

html,
body{
    width:100%;
    height:100%;
}

body{
    overflow:hidden;
    font-family:'Poppins',sans-serif;
    background:#000;
}

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

.background{

    position:fixed;

    inset:0;

    background:
    url('../img/bg.png')
    center center
    no-repeat;

    background-size:cover;

    z-index:1;
}

.background::before{

    content:'';

    position:absolute;

    inset:0;

    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,.05),
        rgba(0,0,0,.20)
    );
}

.background::after{

    content:'';

    position:absolute;

    inset:0;

    background:
    radial-gradient(
        circle at center,
        transparent 20%,
        rgba(0,0,0,.25)
    );
}

/* ===============================
   PAGE
================================ */

.page{

    position:relative;

    z-index:10;

    width:100%;

    height:100vh;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    padding-right:80px;
}

/* ===============================
   LOGIN PANEL
================================ */

.login-panel{

    position:relative;

    width:460px;

    padding:45px;

    border-radius:35px;

    overflow:hidden;

    background:
    rgba(5,5,5,.78);

    backdrop-filter:
    blur(18px);

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

    box-shadow:
    0 0 40px rgba(255,0,0,.18),
    0 0 100px rgba(255,0,0,.10);
}

.login-panel::before{

    content:'';

    position:absolute;

    inset:-2px;

    border-radius:35px;

    background:
    linear-gradient(
        180deg,
        rgba(255,180,80,.8),
        rgba(255,40,40,.8)
    );

    filter:blur(25px);

    opacity:.15;

    z-index:-1;
}

/* ===============================
   SHINE
================================ */

.shine{

    position:absolute;

    top:-150%;
    left:-60%;

    width:120px;
    height:300%;

    background:
    linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.05),
        transparent
    );

    transform:rotate(25deg);

    animation:sweep 8s linear infinite;
}

@keyframes sweep{

    from{
        transform:
        translateX(-400px)
        rotate(25deg);
    }

    to{
        transform:
        translateX(1000px)
        rotate(25deg);
    }

}

/* ===============================
   TAGLINE
================================ */

.tagline{

    text-align:center;

    margin-bottom:35px;
}

.tagline small{

    display:block;

    color:white;

    font-size:15px;

    margin-bottom:6px;
}

.tagline h1{

    color:#ff4040;

    font-size:62px;

    font-weight:800;

    line-height:1;

    text-shadow:
    0 0 25px rgba(255,0,0,.35);
}

.tagline h2{

    color:#efc178;

    font-size:70px;

    font-weight:800;

    line-height:1;

    text-shadow:
    0 0 25px rgba(239,193,120,.15);
}

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

.input-box{

    position:relative;

    margin-bottom:18px;
}

.input-box input{

    width:100%;

    height:68px;

    border-radius:18px;

    background:
    rgba(10,10,10,.85);

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

    padding:0 22px;

    color:white;

    font-size:16px;

    transition:.3s;
}

.input-box input:focus{

    outline:none;

    border-color:#dba85e;

    box-shadow:
    0 0 15px rgba(219,168,94,.2);
}

.input-box label{

    position:absolute;

    left:22px;
    top:22px;

    color:#8c8c8c;

    pointer-events:none;

    transition:.3s;
}

.input-box input:focus~label,
.input-box input:valid~label{

    top:-10px;

    left:16px;

    background:#0a0a0a;

    padding:0 10px;

    font-size:12px;

    color:#dba85e;
}

#togglePassword{

    position:absolute;

    right:18px;
    top:22px;

    cursor:pointer;
}

/* ===============================
   CAPTCHA
================================ */

.captcha-title{

    color:#d0d0d0;

    margin-bottom:10px;
}

.captcha-wrapper{

    display:flex;

    gap:10px;

    margin-bottom:18px;
}

#captcha{

    flex:1;

    height:60px;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    font-weight:700;

    letter-spacing:8px;

    color:white;

    background:
    repeating-linear-gradient(
        -45deg,
        #171717,
        #171717 10px,
        #242424 10px,
        #242424 20px
    );
}

#refreshCaptcha{

    width:60px;

    border:none;

    border-radius:14px;

    background:#171717;

    color:white;

    cursor:pointer;

    font-size:20px;
}

/* ===============================
   REMEMBER
================================ */

.remember{

    display:flex;

    justify-content:space-between;

    margin-bottom:22px;

    color:white;

    font-size:14px;
}

.remember a{

    color:#4a6bff;

    text-decoration:none;
}

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

.login-btn{

    width:100%;

    height:70px;

    border:none;

    border-radius:18px;

    cursor:pointer;

    color:white;

    font-size:22px;

    font-weight:700;

    background:
    linear-gradient(
        180deg,
        #ff4343,
        #dc1010
    );

    box-shadow:
    0 0 30px rgba(255,0,0,.35);

    transition:.3s;
}

.login-btn:hover{

    transform:translateY(-2px);

    box-shadow:
    0 0 40px rgba(255,0,0,.50);
}

/* ===============================
   FOOTER
================================ */

.footer-fire{

    text-align:center;

    margin-top:25px;

    color:#dba85e;

    font-size:14px;

    line-height:1.8;
}

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

@media(max-width:900px){

    .page{

        justify-content:center;

        padding-right:0;
    }

    .login-panel{

        width:90%;
    }

    .tagline h1{
        font-size:52px;
    }

    .tagline h2{
        font-size:58px;
    }
}