:root {
    --licorice: #0e0014;
    --purple: #530078;
    --mango: #ff7c36;
    --bg-color: light-dark(var(--licorice), var(--purple));
    --text-color: light-dark(var(--mango), var(--mango));
    --border-width: 2px;
    --border-color: var(--text-color);
    --pre-bg: light-dark(white, black);
    --font-md: 1.6rem;
    --font-lg: 2.4rem;
    --font-xl: 3rem;
    --font-xxl: 3.5rem;
    --font-xxxl: 4.5rem;
    --font-xxxxl: 5.5rem;
    --color-mode: 'light';
}

body {
    font-family: system-ui, 'Segoe UI', Roboto, sans-serif;
    font-size: var(--font-base);
    color: var(--text-color);
    background-color: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}

.container {
    border: var(--border-width) solid var(--border-color); /* Black line border */
    border-radius: .7rem; /* Rounded corners */
    padding: 20px;
    text-align: center;
    background-color: transparent; /* No background color */
    width: calc(100% - 65px); /* Full width minus a small margin */
    height: calc(100% - 65px); /* Full height minus a small margin */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.logo-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.logo {
    max-width: 70%; /* Adjust this percentage as needed */
    height: auto;
    margin-bottom: 10px;
}

.tagline {
    font-size: calc(1vw + 0.5rem); /* Responsive font size */
    color: #f1f1f1;
    max-width: 80%; /* Ensure tagline doesn't exceed logo width */
    text-align: center;
    margin: 0;
}

.progress-bar {
    position: relative; /* Position relative for absolute child */
    width: 70%; /* Full width */
    height: 40px; /* Height of the navbar */
    background-color: #f1f1f1; /* Background color of the navbar */
    border-radius: 5px; /* Rounded corners */
    margin-top: 20px; /* Space above the progress bar */
    margin-left: auto; /* Center the progress bar */
    margin-right: auto; /* Center the progress bar */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center items vertically */
    justify-content: center; /* Center items horizontally */
    overflow: hidden; /* Hide overflow */
}

.loading-bar {
    position: absolute; /* Position the loading bar absolutely */
    top: 0; /* Align to the top */
    left: 0; /* Align to the left */
    height: 100%; /* Full height */
    width: 0; /* Start with 0 width */
    background-color: #ff7c36; /* Color of the loading bar */
    transition: width 0.5s; /* Smooth transition for width change */
    z-index: 0; /* Behind the text */
}

.loading-text {
    position: relative; /* Position relative to stack above loading bar */
    z-index: 1; /* Above the loading bar */
    color: #f1f1f1; /* Text color */
    font-weight: bold; /* Bold text */
}