@media (max-width: 500px) {
    body{
        overflow-y: scroll !important;
    }

    .card{
        margin-top: 44px !important;
    }
    .final-logo {
        width: var(--logo-container-size-mobile);
        height: var(--logo-container-size-mobile);
    }

    .logo-container {
        width: var(--logo-container-size-mobile);
        height: var(--logo-container-size-mobile);  
    }

    body.landing-page.loaded .final-logo {
        top: 8px;
        left: 8px;
        transform: translate(0, 0);
    }
}
@media (min-width: 500px) {
    .col.text-center {
        top: 5%;
        right: 5%;
        position: absolute;
        transform: translate(0, -50%);
        display: flex;
        justify-content: right;
    }

    span#switchText.me-2 {
        display: flex;
        align-items: center;
    }

    .d-grid {
        display: flex !important;
        width: 300px;
        justify-content: center;
        margin: 0 auto;
    }

    .btn-primary {
        width: 100px;
    }

    #switchExtras {
        display: flex;
        align-items: center;
        gap: 8px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease-in-out 0.3s, visibility 0s linear 0.3s;
    }

    .logo-container {
        width: var(--logo-container-size-mobile);
        height: var(--logo-container-size-mobile);
    }

    body.landing-page.loaded .final-logo {
        top: 8px;
        left: 8px;
        transform: translate(0, 0);
    }
}

@media (min-width: 768px) {

    #loginCard,
    #signupCard {
        opacity: 0;
        transition: opacity 0.5s ease-in-out 0.7s;
        width: 650px;
    }

    .col-md-4 {
        width: 100%;
    }

    body.landing-page {
        background-color: #f0f0f0;
    }

    .initial-logo {
        display: none !important;
    }

    body.landing-page.loaded .login-logo {
        width: 70px;
    }

    body.landing-page.loaded .logo-container,
    body.landing-page.loaded .final-logo,
    body.landing-page.loaded #switchExtras {
        transition-delay: 0s;
        transition-duration: 0.5s;
    }

    .final-logo {
        opacity: 1;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: opacity 1s ease-in-out, transform 0.5s ease-in-out 0.5s;
    }

    body.landing-page.loaded #loginCard,
    body.landing-page.loaded #signupCard {
        opacity: 1;
        transition: opacity 0.3s ease-in-out 0.2s;
    }

    body.landing-page.loaded .final-logo {
        top: 20px;
        left: 20px;
        transform: translate(0, 0);
    }
}

@media (min-width: 1920px) {
    #switchExtras {
      left: 0;
        max-width: 1920px;
        width: 100%;
        display: flex;
        justify-content: end;
    }
  }