/* ========================= */
/* ===== Login Pages ===== */

/* Max-Width 450px */
@media (max-width: 850px) {

    /* Login Modal */
    .user-form {
        width: 100%;
    }

    .login-modal {
        width: 90%;
        min-width: 0;
        padding: 35px;
    }

    .user-form input {
        width: 100%;
        padding: 8px 41px 8px 21px;
    }

    .back-arrow {
        top: 20px;
        left: 20px;
    }

    .input-wrapper img {
        top: 22.5px;
    }

    .login-modal h1 {
        text-align: center;
    }

    .reset-password-container {
        flex-direction: column-reverse;
        align-self: center;

    }

    .checkmark {
        margin: 0 20px 0 0;
    }

    .btn-container {
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }

    .btn-container>* {
        width: 150%;
        font-size: 16px;
        height: 45px;
    }

    /* Signup */
    .signup-container {
        top: auto;
        right: auto;
        bottom: 35px;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    /* Logo */
    #openImgContainer {
        background-color: var(--main-color);
    }

    #openImg path:not(:first-child) {
        fill: white;
        margin: 0;
    }

    .logo-animation path:not(:first-child) {
        fill: var(--main-color) !important;
        transition-duration: 825ms;
    }

    .logo-animation {
        top: 35px !important;
        left: 40px !important;
        scale: 0.6;
    }

    #login-form {
        gap: 20px;
    }
}

@media (max-height: 830px) {
    .logo-wrapper {
        height: 10vh;
    }

    .logo-animation {
        top: 30px !important;
    }

    #openImg {
        height: 10vh;
        margin: 0 !important;
    }

    .login-modal {
        height: 80vh;
        margin-top: 10vh;
        margin-bottom: 10vh;
    }

    .signup-container {
        height: 10vh;
        bottom: 0;
    }
}

@media (max-height: 650px) {
    .logo-animation {
        top: 25px !important;
    }

    .login-modal h1 {
        margin: 0;
    }

    .login-modal h1::after {
        bottom: -10px;
    }

    .user-form {
        gap: 20px;
    }

    .reset-password-container {
        gap: 20px;
    }

    .btn-container>* {
        height: 40px;
    }
}