.logo-little-responsive {
    flex: 0 0 auto;
    height: 122px;
    width: 100px;
    display: none;
    margin: 16px 0 0 16px;
    transform: scale(0.8);
}

.login-page header {
    align-items: center;
}

.header-login {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 32px;
}

.login-container {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    height: 489px;
    width: 652px;
    background-color: var(--bg-white);
    border-radius: 30px;
    gap: 32px;
    box-shadow:
        0.4px 0.4px 2.2px rgba(0, 0, 0, 0.02),
        1.1px 1.1px 5.3px rgba(0, 0, 0, 0.028),
        2px 2px 10px rgba(0, 0, 0, 0.035),
        3.6px 3.6px 17.9px rgba(0, 0, 0, 0.042),
        6.7px 6.7px 33.4px rgba(0, 0, 0, 0.05),
        16px 16px 80px rgba(0, 0, 0, 0.07);
}

.errorText {
    color: red;
    font-size: 12px;
}

.error-message {
    height: 16px;
}

.animation-overlay {
    height: 100vh;
    width: 100vw;
    position: fixed;
    top: 0;
    left: 0;
    background-color: var(--bg-color);
    opacity: 1;
    z-index: 10;
}

.animation-overlay-dark {
    background-color: var(--primary-blue);
}

.animate {
    animation: shrinkToLeft 1000ms ease-in-out forwards;
}

.animate-mobile {
    animation: shrinkToLeftMobile 1000ms ease-in-out forwards;
}

.close-overlay {
    animation: closeAnimation 500ms ease-in-out 500ms forwards;
}

@keyframes shrinkToLeft {

    0%,
    50% {
        position: relative;
        top: calc(50vh - 32px);
        left: 50%;
        transform: translate(-50%, -50%) scale(200%);
        z-index: 11;
    }

    100% {
        position: relative;
        top: 0%;
        left: 0%;
        z-index: 11;
    }
}

@keyframes shrinkToLeftMobile {

    0%,
    50% {
        content: url('/assets/icons/join-logo-white.svg');
        position: relative;
        top: calc(50vh);
        left: 50%;
        transform: translate(-50%, -50%) scale(150%);
        z-index: 11;
    }

    100% {
        content: url('/assets/icons/join-logo.svg');
        position: relative;
        top: 0%;
        left: 0%;
        z-index: 11;
    }
}

@keyframes closeAnimation {
    100% {
        opacity: 0;
    }
}

@media(max-width: 768px) {
    .login-page .section-pad {
        padding: 24px 8px;
    }

    .login-page header {
        order: 1;
        margin: 0 auto;
    }

    .login-page footer {
        order: 3;
    }

    .login-page main {
        padding: 64px 24px;
    }

    .logo-little-responsive {
        display: block;
    }
}

@media(max-width: 600px) {
    .button-container {
        flex-direction: column;
        align-items: center;
        padding-top: 0px;
        width: 75%;
        gap: 15px;
    }

    .button,
    .button-2 {
        width: 100%;
    }

    .button-signup {
        width: 110px;
    }

    input {
        font-size: 16px;
        width: 100%;
    }

    form {
        width: 80%;
    }
}

@media(max-width: 500px) {

    .button,
    .button-2 {
        font-size: 16px;
    }

    .h1-login {
        font-size: 50px !important;
    }

    .login-container {
        width: 370px;
    }

    input {
        width: 100%;
    }

}

@media(max-width: 400px) {
    .errorText {
        text-align: center;
        padding: 0px 5px 0px 5px;
    }
}

@media(max-width: 375px) {

    .error-message {
        font-size: 10px !important;
    }
}