/* ===================================================== */
/* IMPORTAÇÃO DA FONTE                                   */
/* ===================================================== */

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

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

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

/* ===================================================== */
/* CORES                                                 */
/* ===================================================== */

:root{

    --primary:#2EA8FF;
    --primary-dark:#2563EB;

    --glass:rgba(255,255,255,.08);

    --glass-border:rgba(255,255,255,.15);

    --overlay:rgba(0,0,0,.40);

    --white:#FFFFFF;

}

/* ===================================================== */
/* BODY                                                  */
/* ===================================================== */

body{

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

    overflow:hidden;

    background:#000;

}

/* ===================================================== */
/* VÍDEO                                                 */
/* ===================================================== */

#background-video{

    position:fixed;

    top:0;
    left:0;

    width:100vw;
    height:100vh;

    object-fit:cover;

    z-index:-2;

}

/* ===================================================== */
/* OVERLAY                                               */
/* ===================================================== */

.overlay{

    position:fixed;

    inset:0;

    background:var(--overlay);

    z-index:-1;

}

/* ===================================================== */
/* ÁREA PRINCIPAL                                        */
/* ===================================================== */

main{

    width:100vw;

    height:100vh;

    display:flex;

    justify-content:center;

    align-items:center;

    transform:translateY(-6%);

}

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

.container{

    width:100%;

    max-width:430px;

    padding:34px;

    display:flex;

    flex-direction:column;

    align-items:center;

    border-radius:22px;

    background:var(--glass);

    border:1px solid var(--glass-border);

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    box-shadow:
        0 25px 70px rgba(0,0,0,.40);

}

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

.logo{

    width:220px;

    margin-bottom:26px;

    user-select:none;

}

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

form{

    width:100%;

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

}

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

input{

    width:100%;

    height:46px;

    border:none;

    border-radius:14px;

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

    padding:0 18px;

    font-size:15px;

    color:#222;

    outline:none;

    transition:.25s;

}

input::placeholder{

    color:#7b7b7b;

}

input:focus{

    box-shadow:
        0 0 0 4px rgba(46,168,255,.30);

}

/* ===================================================== */
/* BOTÃO                                                 */
/* ===================================================== */

button{

    width:38%;

    height:44px;

    border:none;

    border-radius:14px;

    cursor:pointer;

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

    font-size:15px;

    font-weight:600;

    color:white;

    background:
        linear-gradient(
            90deg,
            var(--primary),
            var(--primary-dark)
        );

    transition:.25s;

}

/* ===================================================== */
/* HOVER BOTÃO                                           */
/* ===================================================== */

button:hover{

    transform:translateY(-2px);

    box-shadow:
        0 10px 25px rgba(46,168,255,.40);

}

/* ===================================================== */
/* CLICK BOTÃO                                           */
/* ===================================================== */

button:active{

    transform:scale(.98);

}

/* ===================================================== */
/* RESPONSIVIDADE                                        */
/* ===================================================== */

@media(max-width:600px){

    .container{

        max-width:92%;

        padding:28px;

    }

    .logo{

        width:180px;

    }

    input{

        height:44px;

        font-size:14px;

    }

    button{

        width:55%;

        height:42px;

        font-size:14px;

    }

}