@font-face {
    font-family: 'RationalDisplayDEMO';
    font-style: normal;
    font-weight: 400;
    src: local('RationalDisplayDEMO-Light'), url('/wp-content/uploads/2025/mulab-coming-soon/fonts/Rational/RationalDisplayDEMO-Light.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'RationalDisplayDEMO';
    font-style: normal;
    font-weight: 600;
    src: local('RationalDisplayDEMO-SemiBold'), url('/wp-content/uploads/2025/mulab-coming-soon/fonts/Rational/RationalDisplayDEMO-SemiBold.otf') format('opentype');
    font-display: swap;
}

@font-face {
    font-family: 'Fontspring-DEMO-evoque';
    font-style: italic;
    font-weight: 600;
    src: local('Fontspring-DEMO-evoque-mediumitalic'), url('/wp-content/uploads/2025/mulab-coming-soon/fonts/evoque/Fontspring-DEMO-evoque-mediumitalic.otf') format('opentype');
    font-display: swap;
}

body {
    margin: 0;
    color: #FFFFFF;
    font-family: "RationalDisplayDEMO", sans-serif;
}

.mu-body {
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Space between head, middle, and bottom */
    align-items: center;
    
    /* Set multiple background images */
    background: 
        url('/wp-content/uploads/2025/mulab-coming-soon/imgs/graphic.png') no-repeat top left, /* Top left background image */
        url('/wp-content/uploads/2025/mulab-coming-soon/imgs/bg.png') no-repeat bottom center/60% auto; /* Bottom center background image */
    
    /* Ensure the background covers the entire element */
    background-size: 
        auto auto, /* Size for top left background image */
        60% auto; /* Size for bottom center background image */
    
    /* Optional: Add a background color if needed */
    background-color: #000000;
}


.mu-body .mu-head {
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.mu-body .mu-middle {
    text-align: center;
    padding: 20px; /* Optional: Add some padding for better spacing */
}

.mu-body .mu-bottom {
    display: flex;
    justify-content: center;
    padding-bottom: 50px; /* Optional: Add some padding for spacing */
}

.mu-body .star-container {
    display: flex;
    justify-content: center;
    margin-bottom: 20px; /* Optional: Add some margin for spacing */
}

.mu-body .star-section {
    background-color: #0D1015;
    border: 1px solid #212121;
    border-radius: 24px; /* Simplified border-radius */
    padding: 10px 24px; /* Adjusted padding for consistency */
}

.mu-body .star-section img {
    width: 24px;
    height: 24px;
    margin: 0 8px -4px 8px;
}

.mu-body .star-section span {
    font-weight: 600;
    font-size: 24px;
}

.mu-body h1 {
    font-size: 64px;
    font-weight: 400;
    margin: 20px 0; /* Optional: Add some margin for spacing */
}

.mu-body h1 span.font-italic {
    font-family: "Fontspring-DEMO-evoque" !important;
}

.mu-body h1 span.bolder {
    font-weight: 600;
}

.mu-body h1 span.color {
    font-weight: 600;
    color: #4245FF;
    font-style: italic;
}

.mu-body p {
    font-size: 20px;
    margin: 30px 0; /* Optional: Add some margin for spacing */
}

.mu-bottom a {
    text-decoration: none;
}

.mu-bottom a:not(:last-child) {
    margin-right: 15px;
}

.mu-body .signup {
    display: flex;
    justify-content: center;
}

.mu-body .signup .signupbg {
    display: flex;
    justify-content: space-between;
    height: 36px;
    background-color: #0D1015;
    border: 1px solid #212121;
    border-radius: 24px;
    width: 500px;
    padding: 10px;
    color: #FFF;
}

.mu-body .signup .signupbg.error {
    border-color: red;
}

.mu-body .signup input {
    height: 36px;
    background-color: transparent;
    border: 0px !important;
    outline: 0 !important;
    border-color: transparent;
    color: #FFF;
    width: 300px;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active
{
    transition: background-color 5000s ease-in-out 0s;
}

/* For Chrome, Safari, and Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px transparent inset !important; /* Change the background color */
    -webkit-text-fill-color: #FFF !important; /* Change the text color */
}

/* For Firefox */
input:-moz-autofill,
input:-moz-autofill:hover, 
input:-moz-autofill:focus {
    box-shadow: 0 0 0 30px transparent inset !important; /* Change the background color */
    -moz-box-shadow: 0 0 0 30px transparent inset !important;
    -moz-text-fill-color: #FFF !important; /* Change the text color */
}

/* For other browsers (not all browsers support these) */
input:autofill,
input:autofill:hover, 
input:autofill:focus {
    box-shadow: 0 0 0 30px transparent inset !important; /* Change the background color */
    -webkit-box-shadow: 0 0 0 30px transparent inset !important;
    -moz-box-shadow: 0 0 0 30px transparent inset !important;
    text-fill-color: #FFF !important; /* Change the text color */
}

.mu-body .signup button {
    height: 35px;
    background-color: #4245FF;
    border: 1px solid #4245FF;
    color: #FFF;
    font-weight: 600;
    padding: 0px 20px;
    border-radius: 24px;
    cursor: pointer;
}

.mu-body .signup button:hover {
    background-color: transparent;
    color: #4245FF;
}

@media only screen and (max-width: 1080px) {
    .mu-body h1 {
        font-size: 44px;
    }

    .mu-body .star-section span {
        font-size: 20px;
    }

    .mu-body p {
        font-size: 16px;
    }

    .mu-body .signup .signupbg {
        width: 430px;
    }

}

@media only screen and (max-width: 930px) {
    .mu-body h1 {
        font-size: 38px;
    }

    .mu-body .star-section span {
        font-size: 18px;
    }

    .mu-body .mu-head {
        padding-top: 25px;
    }

    .mu-body .mu-head img {
        max-width: 130px;
    }

}

@media only screen and (max-width: 760px) {
    .mu-body h1 {
        font-size: 32px;
    }

    .mu-body .star-section span {
        font-size: 14px;
    }

    .mu-body .star-section img {
        width: 12px;
        height: 12px;
        margin: 0 8px -1px 8px;
    }

    .mu-body .mu-head img {
        max-width: 90px;
    }

    .mu-body p {
        font-size: 14px;
        margin: 10px 0;
    }

    .mu-body .star-section {
        padding: 4px 10px;
    }

    .mu-body .signup .signupbg {
        width: 330px;
        height: 29px;
        padding: 5px 10px;
    }

    .mu-body .signup input {
        width: 200px;
        height: 29px;
    }

    .mu-body .signup button {
        padding: 0px 8px;
        font-size: 12px;
        height: 28px;
    }

}

@media only screen and (max-width: 640px) {

    br {
        display: none;
    }

    .mu-body {
        background: 
            url('/wp-content/uploads/2025/mulab-coming-soon/imgs/graphic.png') no-repeat top left, /* Top left background image */
            url('/wp-content/uploads/2025/mulab-coming-soon/imgs/bg.png') no-repeat bottom center/100% auto; /* Bottom center background image */
        
        background-size: 
            auto auto,
            100% auto;
        background-color: #000000;
    }

    .mu-body h1 {
        font-size: 22px;
        margin: 5px 0;
    }

    .mu-body p {
        font-size: 10px;
        margin: 6px 0 15px 0;
    }

    .mu-body .mu-head {
        padding-top: 15px;
    }

    .mu-body .mu-head img {
        max-width: 80px;
    }

    .mu-body .star-section {
        padding: 0px;
    }

    .mu-body .star-section span {
        font-size: 10px;
    }

    .mu-body .star-section img {
        width: 10px;
        height: 10px;
        margin: 0 3px -2px 3px;
    }

    .mu-bottom img {
        width: 20px;
        height: 20px;
    }
}

@media only screen and (max-width: 430px) {

    .mu-body h1 {
        font-size: 20px;
    }

    .mu-body .signup .signupbg {
        width: 270px;
    }

    .mu-body .signup input {
        width: 160px;
    }

    .mu-body .signup button {
        padding: 0px 10px;
        font-size: 10px;
    }

}