/* Styles for the body element */

html {
    height: 100%;
}

body {
    display: flex; /* Make body a flex container */
       flex-direction: column; /* Stack children vertically */
       align-items: center; /* Center children horizontally */
       justify-content: center; /* Center children vertically */
       margin: 0;
       height: 100vh; /* Full viewport height, using viewport height unit */
       overflow: hidden; /* Prevents scrolling */
   background-color: var(--splash-background-color, #fff); /* Fallback color */
}

.splash-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px; /* Adjust the gap between the logo and progress bar */
}


/* Styles for the logo container */
.logo {
    margin-bottom: 20px; /* Adjust the gap between the logo and the progress bar */
}


.logo img {
    width: 270px;
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image maintains its aspect ratio */
    max-height: 200px
}


@media (max-width: 550px) {
    .logo img {
        width: 50vw; /* Increase to 30% of the viewport width on small screens */
        max-height: 200px
        object-fit: contain; /* Maintains aspect ratio within the constraints */
    }
}


/* Styles for the progress bar container */
.progress-container {
    width: 300px; /* Default width */
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    transition: opacity 0.25s ease-out;
}

@media (max-width: 550px) {
    .progress-container {
        width: 70vw; /* Use 75% of the viewport width when viewport width is 300px or less */
    }
}

/* Styles for the progress bar */
.progress-bar {
    display: block;
    height: 100%;
    background-color: #224D90; /* Change the progress bar color as needed */
    width: 0;
    border-radius: 10px; /* Match the container's border-radius */
    transition: width 0.5s ease;
}

/* CSS for a fade-in animation */
.fade-in {
    opacity: 0;
    animation: fadeIn 1s ease-in-out forwards;
}

/* Keyframes for the fadeIn animation */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    60% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}