/* ===========================
   Global
=========================== */

*,
*::before,
*::after{
    box-sizing:border-box;
}

html{
    font-size:16px;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    min-height:100vh;

    font-family:Roboto,sans-serif;
    font-weight:400;

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

    background:none;
}

/* ===========================
   Login Container
=========================== */

.login-container{

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

    padding:20px;

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

    overflow:hidden;
}

/* ===========================
   Form
=========================== */

.login-container form{

    width:100%;

    display:flex;
    flex-direction:column;

    gap:12px;
}

/* ===========================
   Inputs
=========================== */

input{

    width:100%;

    padding:14px;

    border:1px solid #000;
    border-radius:6px;

    background:#e5f0fe;

    font-size:1rem;
    text-align:center;

    font-family:inherit;
}

/* ===========================
   Buttons
=========================== */

.button-container{

    display:flex;

    gap:10px;

    width:100%;
}

.submit-button,
.btn{

    padding:14px;

    border:1px solid #000;
    border-radius:6px;

    background:#e5f0fe;

    cursor:pointer;

    font-size:1rem;

    transition:background .2s;
}

.submit-button{

    flex:1;
}

.btn{

    width:110px;
}

.submit-button:hover,
.btn:hover,
.options-container a:hover{

    background:#ffb801;
    color:#fff;
}

/* ===========================
   Options
=========================== */

.options-container{

    display:none;

    width:100%;

    flex-direction:column;

    gap:10px;

    margin-top:12px;
}

.options-container a{

    display:block;

    width:100%;

    padding:14px;

    text-decoration:none;

    text-align:center;

    color:#000;

    border:1px solid #000;
    border-radius:6px;

    background:#e5f0fe;
}

/* ===========================
   Spinner
=========================== */

.spinner{

    position:fixed;
    inset:0;

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

    background:transparent;

    z-index:9999;
}

.loader{

    width:42px;
    height:42px;

    border:6px solid #f3f3f3;
    border-top:6px solid #3498db;

    border-radius:50%;

    animation:spin 1s linear infinite;
}

@keyframes spin{

    to{
        transform:rotate(360deg);
    }
}

/* ===========================
   Page
=========================== */

#page{

    display:none;
}

/* ===========================
   Overlay
=========================== */

.page-overlay{

    position:fixed;
    inset:0;

    display:none;

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

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

    backdrop-filter:blur(10px);

    z-index:9999;

    animation:fadeIn .25s ease;
}

.page-overlay.fade-out{

    animation:fadeOut .25s forwards;
}

.page-content{

    width:min(95%,700px);

    max-height:90vh;

    overflow:auto;

    padding:24px;

    border-radius:10px;

    background:#fff;

    color:#000;

    box-shadow:0 0 15px rgba(0,0,0,.15);
}

.close-overlay{

    margin-top:20px;

    padding:10px 18px;

    border:none;

    border-radius:6px;

    background:#30add5;

    color:#fff;

    cursor:pointer;
}

.close-overlay:hover{

    background:#ffb801;
}

/* ===========================
   Blur
=========================== */

body.blurred .login-container,
body.blurred .header,
body.blurred .image-background{

    filter:blur(5px);

    pointer-events:none;

    transition:filter .3s;
}

/* ===========================
   Animations
=========================== */

@keyframes fadeIn{

    from{
        opacity:0;
        transform:scale(.98);
    }

    to{
        opacity:1;
        transform:scale(1);
    }
}

@keyframes fadeOut{

    from{
        opacity:1;
        transform:scale(1);
    }

    to{
        opacity:0;
        transform:scale(.98);
    }
}

/* ===========================
   Mobile
=========================== */

@media (max-width:600px){

    html{
        font-size:15px;
    }

    .login-container{
        padding:15px;
    }

    .button-container{

        flex-direction:column;
    }

    .btn,
    .submit-button{

        width:100%;
    }

}

/* ===========================
   Landscape Phones
=========================== */

@media (max-height:500px){

    body{

        align-items:flex-start;
    }

    .login-container{

        padding:20px;

        margin:20px auto;
    }

}