:root {
    --ease-smooth: cubic-bezier(.22, .61, .36, 1);
    --dur-fast: 200ms;
    --dur: 320ms;
    --dur-slow: 600ms;

    --logo-pos-scale: 1;
    --logo-size-scale: 1;
    --signup-logo-pos-scale: 1;
    --signup-logo-size-scale: 1;
    --form-login-scale: 1;
    --form-signup-width-scale: 1;

    --logo-mobile-top: 37px;
    --logo-mobile-left: 37px;
}

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

html,
body {
    margin: 0;
    overflow-x: hidden;
}


.login-join-logo,
.signup-logo {
    transition:
        top var(--dur) var(--ease-smooth),
        left var(--dur) var(--ease-smooth),
        height var(--dur) var(--ease-smooth),
        width var(--dur) var(--ease-smooth),
        transform var(--dur) var(--ease-smooth);
    will-change: top, left, height, width, transform;
}

.form-for-login,
.form-for-signup,
.login-signup-form,
.login-signup-header,
.login-container,
.signup-container {
    transition:
        margin var(--dur-fast) var(--ease-smooth),
        padding var(--dur-fast) var(--ease-smooth),
        height var(--dur) var(--ease-smooth),
        width var(--dur) var(--ease-smooth),
        gap var(--dur-fast) var(--ease-smooth);
}


.login-join-logo {
    top: calc(var(--logo-position-top) * var(--logo-pos-scale));
    left: calc(var(--logo-position-left) * var(--logo-pos-scale));
    height: calc(var(--logo-height) * var(--logo-size-scale));
    width: calc(var(--logo-width) * var(--logo-size-scale));
}

.signup-logo {
    top: calc(var(--logo-position-top) * var(--signup-logo-pos-scale));
    left: calc(var(--logo-position-left) * var(--signup-logo-pos-scale));
    height: calc(var(--logo-height) * var(--signup-logo-size-scale));
    width: calc(var(--logo-width) * var(--signup-logo-size-scale));
}

.form-for-login {
    height: calc(var(--form-for-login-height) * var(--form-login-scale));
    width: calc(var(--form-for-login-width) * var(--form-login-scale));
}

.form-for-signup {
    width: calc(var(--form-for-signup-width) * var(--form-signup-width-scale));
}


@media (max-width: 1090px) {
    :root {
        --logo-pos-scale: .85;
        --logo-size-scale: .85;
        --form-login-scale: .85;
        --form-signup-width-scale: .8;
        --signup-logo-pos-scale: .5;
    }
}

@media (max-width: 880px) {
    :root {
        --signup-logo-pos-scale: .5;
        --signup-logo-size-scale: .7;
    }

    .login-container,
    .signup-container {
        padding: 0 16px;
    }

    .form-for-signup {
        margin-top: 70px;
    }
}


@media(max-height: 800px) {
    .form-for-signup {
        height: 530px !important;
    }

    .signup-container {
        margin-top: 76px !important;
    }

    .form-for-login {
        margin-bottom: 4px !important;
        height: 417px !important;
        margin-top: 140px !important;
    }

    .login-signup-input-field-container {
        margin-bottom: 0 !important;
    }

    .login-signup-header {
        margin-bottom: 49px !important;
    }

    .arrow-left {
        top: 28px !important;
    }

    .mb-26 {
        margin-bottom: 18px !important;
    }

    .mb-20 {
        margin-bottom: 12px;
    }
}

@media(max-height: 700px) {
    header.login-signup-header {
        margin-bottom: 0 !important;
    }

    .login-join-logo.signup-logo {
        height: calc(var(--logo-height) * 0.50);
        width: calc(var(--logo-width) * 0.50);
        top: 15px;
    }
}

@media (max-width: 600px) {
    :root {
        --form-login-scale: .75;
    }

    .login-signup-form {
        margin: 0;
        padding: 0 24px;
    }

    .form-for-signup {
        width: 100%;
        margin-top: 77px;
    }

    .login-signup-form h1 {
        font-size: 47px;
        transition: font-size var(--dur-fast) var(--ease-smooth);
    }

    .login-signup-h1-line {
        width: 88px;
        transition: width var(--dur-fast) var(--ease-smooth);
    }
}

@media (max-width: 500px) {
    .login-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        height: 100%;
    }

    .login-signup-header {
        order: 2;
        position: static;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        padding: 0 25px;
        min-height: 49px;
        margin-bottom: 75px;
    }

    .login-signup-header p {
        margin-right: 35px;
    }

    .login-container,
    .signup-container {
        order: 1;
        width: 100%;
        margin-top: 100px;
        padding: 0 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .login-container {
        margin-top: 0;
    }

    footer {
        order: 3;
    }

    .login-signup-footer {
        justify-content: center;
        align-items: center;
        gap: 16px;
        padding-bottom: 32px;
    }

    .login-signup-form {
        margin: 0;
    }

    .form-for-login {
        height: 450px;
        width: 100%;
    }

    .form-for-signup {
        height: 598px;
        width: 100%;
    }

    .login-signup-input-field-container {
        width: 100%;
        padding: 0 16px;
        margin-bottom: 18px;
    }

    .login-form-buttons {
        flex-direction: column;
        gap: 18px;
        margin-top: 0;
    }

    .signup-form-button {
        margin-top: 32px;
    }

    #signup-button {
        width: 180px;
    }

    .arrow-left {
        left: 31px;
        top: 44px;
        transform: scale(0.75);
        transition:
            left var(--dur-fast) var(--ease-smooth),
            transform var(--dur-fast) var(--ease-smooth),
            background-image var(--dur-fast) linear;
    }

    .arrow-left:hover {
        background-image: url("../assets/arrow-left-default.svg");
    }

    .arrow-left:active {
        left: 30px;
        background-image: url("../assets/arrow-left-variant1.svg");
    }

    .login-join-logo {
        top: var(--logo-mobile-top);
        left: var(--logo-mobile-left);
        transform: scale(0.82);
        height: calc(var(--logo-height) * 0.78);
        width: calc(var(--logo-width) * 0.78);
    }

    .signUp-safe-dialog {
        width: 280px;
    }

    @keyframes moveLogoMobile {
        from {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) scale(1.2);
            background-image: url('../assets/join-logo.svg');
        }

        50% {
            background-image: url('../assets/logo-for-Favicon.svg');
        }

        to {
            top: var(--logo-mobile-top);
            left: var(--logo-mobile-left);
            transform: scale(0.82);
        }
    }

    @keyframes fadeBackground {

        0%,
        40% {
            background-color: var(--bg-default);
        }

        100% {
            background-color: var(--default-bg-color);
        }
    }
}

@media (max-width: 450px) {
    .login-error-text {
        text-align: center;
    }
}

@media(max-width: 430px) {
    .login-signup-input {
        font-size: 18px;
        padding: 12px 50px 12px 12px;
    }
}

@media (max-width: 400px) {
    .login-join-logo {
        top: 21px;
        left: 26px;
    }

    .login-signup-form {
        padding: 0px 20px;
    }

    .login-signup-form h1 {
        font-size: 42px;
    }

    .form-for-login {
        height: 427px;
    }

    .login-signup-input {
        font-size: 16px;
        padding: 12px 50px 12px 12px;
    }

    .login-signup-input::placeholder {
        font-size: 16px;
    }
}

@media (max-width: 350px) {
    .arrow-left {
        left: 24px;
        transform: scale(0.6);
    }

    .arrow-left:hover {
        left: 24px;
    }

    .arrow-left:active {
        left: 20px;
    }

    .login-signup-form {
        padding: 0px 5px;
    }

    .login-signup-input {
        font-size: 16px;
        padding: 12px 31px 12px 10px;
    }

    .input-icons {
        right: 8px;
    }

    .login-toggle-password {
        right: 8px;
    }

    .login-signup-header p {
        font-size: 18px;
    }
}


@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}