@media(max-width:1010px) {

    body {
        padding-bottom: 50px;
        max-height: calc(100% - 50px);
    }

    .j-logo-img {
        width: 254px;
        height: 334.07px;
        object-fit: contain;
        object-position: center;
        opacity: 0; 
        transition: opacity 0.2s ease; 
    }

    .start-position {
        position: absolute;
        top: 55%;
        left: 51%;
        transform: translate(-55%, -51%);
        opacity: 1; 
    }
    
    .animate-logo {
        position: absolute;
        object-fit: contain;
        top: 55%;
        left: 51%;
        animation: logoShrink 1s ease forwards;
        animation-delay: 0.1s;
    }
    

    @keyframes logoShrink {
        0% {
            width: 254px;
            height: 334.07px;
            transform: translate(-55%, -51%) scale(1);
        }
        100% {
            width: clamp(4rem, 2.891rem + 3.942vw, 6.439rem);
            height: auto;
            transform: translate(0, 0) scale(1);
            top: 37px;
            left: 8.5%;
        }
    }

    .under-frame-div {
        max-width: 1440px;
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
    }

    .sign-up-div {
        width: 100%;
        height: 60px;
        margin-top: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sign-up-under-div {
        margin-left: 0;
        margin-top: 0;
        display: flex;
        align-items: center;
        gap: 35px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }

    .log-in-div {
        width: 92%;
        max-width: 652px;
        height: 515px;
        margin-top: 205.5px;
    }

    .log-in-header {
        font-size: clamp(2.938rem, 2.54rem + 1.413vw, 3.813rem);
        margin-top: 35px;
    }

    .divider {
        width: 88px;
        height: 3px;
        background-color: rgba(41, 171, 226, 1);
    }
    
    .input-main-div {
        width: 91.9%;
        height: 152px;
        margin-top: 25px;
    }
    
    .log-input {
        width: 100%;
        height: 48px;
        padding-top: 6px;
    }

    ::placeholder {
        font-size: clamp(1rem, 0.389rem + 3.053vw, 1.25rem);
    }

    .r-box-input {
        margin-left: 16px;
    }
    
    .log-in-buttons-div {
        width: 100%;
        height: 123px;
        margin-top: 25px;
        margin-left: 0px;
        display: flex;
        align-items: center;
        flex-direction: column;
        gap: 21px;
    }
    
    .log-in-button {
        width: 180px;
        height: 51px;
        font-size: 16px;
    }

    .guest-a{
        text-decoration: none;
    }
    
    .guest-log-in-button {
        width: 180px;
        height: 51px;
        font-size: 16px;
        text-decoration: none;
    }

    footer {
        height: 20px;
        position: absolute;
        top: unset;
        bottom: 8px;
    }
    
}

@media(max-width:850px) {

    .j-logo-img {
        width: 205px;
        height: 270px;
        object-fit: contain;
        object-position: center;
        opacity: 0; 
        transition: opacity 0.2s ease; 
    }

    .start-position {
        position: absolute;
        top: 55%;
        left: 51%;
        transform: translate(-55%, -51%);
        opacity: 1; 
    }
    
    .animate-logo {
        position: absolute;
        object-fit: contain;
        top: 55%;
        left: 51%;
        animation: logoShrink 1s ease forwards;
        animation-delay: 0.1s;
    }
    

    @keyframes logoShrink {
        0% {
            width: 205px;
            height: 270px;
            transform: translate(-55%, -51%) scale(1);
        }
        100% {
            width: clamp(4rem, 2.891rem + 3.942vw, 6.439rem);
            height: auto;
            transform: translate(0, 0) scale(1);
            top: 37px;
            left: 8.5%;
        }
    }

}

@media(max-width:650px) {

    .j-logo-img {
        width: 157px;
        height: 206px;
        object-fit: contain;
        object-position: center;
        opacity: 0; 
        transition: opacity 0.2s ease; 
    }

    .start-position {
        position: absolute;
        top: 55%;
        left: 51%;
        transform: translate(-55%, -51%);
        opacity: 1; 
    }
    
    .animate-logo {
        position: absolute;
        object-fit: contain;
        top: 55%;
        left: 51%;
        animation: logoShrink 1s ease forwards;
        animation-delay: 0.1s;
    }
    

    @keyframes logoShrink {
        0% {
            width: 157px;
            height: 206px;
            transform: translate(-55%, -51%) scale(1);
        }
        100% {
            width: clamp(4rem, 2.891rem + 3.942vw, 6.439rem);
            height: auto;
            transform: translate(0, 0) scale(1);
            top: 37px;
            left: 8.5%;
        }
    }
}

@media(max-width:450px) {

    
    ::placeholder {
        font-size: clamp(1rem, 0.389rem + 3.053vw, 1.25rem);
    }

    .sign-up-under-div {
        gap: clamp(1.25rem, -1.058rem + 11.538vw, 2.188rem);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
    }
    h3 {
        font-size: clamp(1rem, 0.389rem + 3.053vw, 1.25rem);
    }

    .error-input-message {
        font-size: 10px;
    }
    
    .forgot-password-message {
        font-size: 10px;
    }

    .footer-element-left {
        font-size: clamp(0.875rem, 0.567rem + 1.538vw, 1rem);
    }
    
    .footer-element-right {
        font-size: clamp(0.875rem, 0.567rem + 1.538vw, 1rem);
    }

}

@media(max-width:400px) {
    .error-input-message {
        font-size: 9px;
    }
    
    .forgot-password-message {
        font-size: 9px;
    }
    
}

@media(max-height:890px) and (max-width:1010px) {

     .log-in-div {
        margin-top: 0px;
        margin-top: 20vh;
    }
    
    footer {
        height: 20px;
        position: absolute;
        top: unset;
        bottom: 2px;
    }
}

@media(max-height:810px) and (max-width:1010px) {

    .log-in-div {
       height: 480px;
       margin-top: 22vh;
   }

.log-in-header {
    font-size: 56px;
    margin-bottom: 6px;
    margin-top: 20px;
}

.log-input {
    width: 100%;
    height: 40px;
    padding-top: 6px;
}

.email-input-div {
    margin-bottom: 2px;  
}

.incorrect-email-format {
    margin-bottom: 6px;
}


.error-input-message {
    margin-bottom: 8px;
}

.forgot-password-message {
    margin-bottom: 8px;
}

.log-in-button {
    height: 42px;
}

.guest-log-in-button {
    height: 40px;
}

   .sign-up-div {
       margin-top: 0px;
       margin-top: 3vh;
   }

   .sign-up-button-a {
    height: 40px;
}

   .sign-up-button {
    height: 40px;
}
}


@media(max-height:750px) and (max-width:1010px) {

    .log-in-div {
        height: 440px;
        margin-top: 22vh;
    }
 
 
 .log-in-header {
     font-size: 54px;
     margin-bottom: 6px;
     margin-top: 16px;
 }

 .log-in-buttons-div {
    margin-top: 20px;
    gap: 16px;
}

 .log-in-button {
    height: 40px;
}

.guest-log-in-button {
    height: 38px;
    text-decoration: none;
}

}

@media(max-height:700px) and (max-width:1010px) {

    .log-in-div {
        height: 400px;
    }
 
 
 .log-in-header {
     font-size: 54px;
     margin-bottom: 6px;
     margin-top: 16px;
 }

.log-input {
    width: 100%;
    height: 38px;
    padding-top: 6px;
}

.email-input-div {
    height: 44px;  
}

.password-input-div {
    height: 44px;
    margin-bottom: 6px;
}

 .log-in-buttons-div {
    margin-top: 16px;
    gap: 10px;
}

.log-in-button {
    height: 38px;
}

.guest-log-in-button {
    height: 36px;
}

.sign-up-div {
    margin-top: 0px;
    margin-top: 2vh;
}

.sign-up-button {
    font-size: 16px;
    height: 38px;
}

}

@media(max-height:650px) and (max-width:1010px) {

    @keyframes logoShrink {
        0% {
            width: 205px;
            height: 270px;
            transform: translate(-55%, -51%) scale(1);
        }
        100% {
            width: clamp(4rem, 2.891rem + 3.942vw, 6.439rem);
            height: auto;
            transform: translate(0, 0) scale(1);
            top: 16px;
            left: 8.5%;
        }
    }

    .log-in-div {
        height: 380px;
        margin-top: 21vh;
    }
 
 
 .log-in-header {
     font-size: 50px;
     margin-bottom: 6px;
     margin-top: 10px;
 }

 .input-main-div {
    height: 180px;
    margin-top: 16px;
}

.log-input {
    width: 100%;
    height: 38px;
    padding-top: 6px;
}

.email-input-div {
    height: 44px;  
}

.password-input-div {
    height: 44px;
    margin-bottom: 6px;
}

.error-input-message {
    margin-bottom: 6px;
}

.forgot-password-message {
    margin-bottom: 6px;
}

 .log-in-buttons-div {
    margin-top: 16px;
    gap: 10px;
}

.log-in-button {
    height: 38px;
}

.guest-log-in-button {
    height: 36px;
}

.sign-up-div {
    margin-top: 0px;
    margin-top: 2vh;
}

.sign-up-button {
    font-size: 16px;
    height: 38px;
}

}

@media(max-height:610px) and (max-width:1010px) {

    @keyframes logoShrink {
        0% {
            transform: translate(-55%, -51%) scale(1);
        }
        100% {
            width: clamp(4rem, 2.891rem + 3.942vw, 6.439rem);
            height: auto;
            transform: translate(0, 0) scale(1);
            top: 16px;
            left: 8.5%;
        }
    }

    .log-in-div {
        height: 300px;
        margin-top: 24vh;
    }
 
 
 .log-in-header {
     font-size: 38px;
     margin-bottom: 6px;
     margin-top: 4px;
 }

 .input-main-div {
    height: 120px;
    margin-top: 10px;
}

.log-input {
    width: 100%;
    height: 34px;
    padding-top: 6px;
}

.email-input-div {
    height: 34px;  
    display: flex;
    align-items: center;
}

.mail-Img {
    top: 6px;
}

.password-input-div {
    height: 34px;
    margin-bottom: 4px;
}

.password-Img {
    top: 6px;
}

.password-Img-eye-of {
    top: 6px;
}

.password-Img-eye-on {
    top: 6px;
}

.error-input-message {
    margin-bottom: 4px;
}

.forgot-password-message {
    margin-bottom: 6px;
}

 .log-in-buttons-div {
    margin-top: 6px;
    gap: 6px;
}

.log-in-button {
    height: 34px;
}

.guest-log-in-button {
    height: 32px;
}

.sign-up-div {
    margin-top: 0px;
    margin-top: 2vh;
}

.sign-up-button {
    font-size: 16px;
    height: 34px;
}

}

@media(max-height:560px) and (max-width:1010px) {

    .log-in-div {
        height: 300px;
        margin-top: 120px;
    }
 
}

@media(max-height:500px) and (max-width:1010px) {

    body {
        height: 500px;
        overflow: scroll;
    }

    @keyframes logoShrink {
        0% {
            transform: translate(-55%, -51%) scale(1);
        }
        100% {
            width: clamp(4rem, 2.891rem + 3.942vw, 6.439rem);
            height: auto;
            transform: translate(0, 0) scale(1);
            top: 16px;
            left: 6%;
        }
    }
}

@media(min-width:1010px) and (max-height:850px)  {

    .log-in-div {
        margin-top: 0px;
        margin-top: 12vh;
    }

    .sign-up-div {
        margin-top: 0px;
        margin-top: 3vh;
    }

    
    footer {
        height: 20px;
        position: absolute;
        top: unset;
        bottom: 2px;
    }
}

@media(min-width:1010px) and (max-height:780px) {

    .log-in-div {
        margin-top: 0px;
        margin-top: 10vh;
    }

    .sign-up-div {
        height: unset;
        margin-top: 0px;
        margin-top: 0vh;
    }

    .sign-up-under-div {
        margin-left: 71%;
        margin-top: 5vh;
    }

    footer {
        height: 20px;
        position: absolute;
        top: unset;
        bottom: 2px;
    }
}

@media(min-width:1010px) and (max-height:680px) {

    .log-in-div {
        margin-top: 0px;
        margin-top: 5vh;
    }

    .sign-up-div {
        height: unset;
        margin-top: 0px;
        margin-top: 0vh;
    }

    .sign-up-under-div {
        margin-left: 71%;
        margin-top: 1vh;
    }

    footer {
        height: 20px;
        position: absolute;
        top: unset;
        bottom: 2px;
    }
}

@media(min-width:1010px) and (max-height:630px) {


    .input-main-div {
        margin-top: 16px;
    }

    .log-in-div {
        height: 420px;
        margin-top: 0px;
        margin-top: 10vh;
        margin-bottom: 40px;
    }

    .log-in-header {
        font-size: 56px;
        margin-bottom: 6px;
        margin-top: 10px;
    }

    .log-input {
        width: 100%;
        height: 38px;
        padding-top: 6px;
    }

    .email-input-div {
        margin-bottom: 2px;  
    }

    .incorrect-email-format {
        margin-bottom: 6px;
    }

    .sign-up-div {
        height: unset;
        width: 280px;
        margin-left: 70%;
        margin-top: 0px;
        margin-top: 0vh;
    }

    .sign-up-under-div {
        width: 280px;
        width: 280px;
        margin-left: 0;
        margin-top: 1vh;
    }

    .error-input-message {
        margin-bottom: 8px;
    }

    .forgot-password-message {
        margin-bottom: 8px;
    }

    .log-in-button {
        height: 40px;
    }

    .guest-log-in-button {
        height: 38px;
        text-decoration: none;
    }

    footer {
        height: 20px;
        position: absolute;
        top: unset;
        bottom: 2px;
    }
}

@media(min-width:1010px) and (max-height:570px) {

    .log-in-div {
        height: 380px;
        margin-top: 0px;
        margin-top: 0vh;
        margin-bottom: 40px;
    }

}

@media(min-width:1010px) and (max-height:500px) {
        
       body {
        overflow: scroll;
       }

       .main-frame-div {
        height: 500px;
       }
}

@media (max-height: 500px) and (max-width: 945px) and (orientation: landscape) {
    .main-frame-div {
        display: none;
    }
    .rotate-message {
        height: 100vh;
        color: rgba(41, 171, 226, 1);
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: clamp(1rem, 0.446rem + 2.768vw, 2.938rem);
        padding: 20px;
    }
}

@media (max-height: 500px) and (max-width: 945px) and (orientation: portrait) {
    .main-frame-div {
        display: block;
    }
    .rotate-message {
        display: none;
    }
}