@font-face {
    font-family: 'CustomFont';
    src: url('../fonts/fortnite.otf') format('woff2'),
         url('../fonts/fortnite.woff') format('woff'),
         url('../fonts/fortnite.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'CustomFont', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: url('../images/background.jpg') no-repeat center center fixed;
    background-size: cover;
    color: rgb(255, 255, 255);
}


.loading-bar {
    width: 500px; /* Set the width of the loading bar */
    height: 40px;
    background-color: rgba(255, 255, 255, 0.3);
    border-top-left-radius: 7px; /* Curves the top-left corner */
    border-top-right-radius: 7px; /* Curves the top-right corner */
    border-bottom-left-radius: 7px; /* Curves the bottom-left corner */
    border-bottom-right-radius: 7px; /* Curves the bottom-right corner */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: fixed;
    top: 52%; /* Place it 50% down from the top */
    left: 50%; /* Place it 50% across from the left */
    transform: translate(-50%, -50%); /* Center it precisely */
    margin-top: 20px; /* Adjust margin for spacing if needed */
}

.loading-bar-progress {
    height: 100%;
    width: 0;
    background-color: #61dafb;
    border-top-left-radius: 7px; /* Curves the top-left corner */
    border-top-right-radius: 7px; /* Curves the top-right corner */
    border-bottom-left-radius: 7px; /* Curves the bottom-left corner */
    border-bottom-right-radius: 7px; /* Curves the bottom-right corner */
    transition: width 1s linear; /* Make the transition smooth */
}

h1 {
    color: rgba(0, 0, 0, 0.641);
    position: fixed;
    top: 1%; /* Place it 50% down from the top */
    left: 5%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    margin-bottom: 100px;
}


h2 {
    position: fixed;
    top: 38%; /* Place it 50% down from the top */
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 5rem;
    margin-bottom: 100px;
}

#countdown {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: fixed; /* Adjust positioning as per your layout */
    top: 62%; /* Position it 50% down from the top */
    left: 48%; /* Position it 50% across from the left */
    transform: translate(-50%, -50%); /* Center it precisely */
    
}

#milliseconds-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    position: fixed; /* Adjust positioning as per your layout */
    top: 62%; /* Position it 50% down from the top */
    left: 59.8%; /* Position it 50% across from the left */
    transform: translate(-50%, -50%);
}


#milliseconds {
    font-size: 2em; /* Increase the font size as needed */
}

#countdown div {
    font-size: 2rem; /* Increased font size for the countdown numbers */
}

p {
    font-size: 1.6em; /* Adjust the font size as needed */
    color: rgba(255, 255, 255, 0.9); /* Example color */
    margin-bottom: 20px; /* Example margin */
    font-weight: 1; /* Set a lighter font weight */
    
    letter-spacing: 1px; /* Increase letter spacing */
    position: fixed;
    white-space: nowrap; /* Prevent line breaks */
    top: 90%; /* Place it 50% down from the top */
    left: 50%;
    transform: translate(-50%, -50%); 
}