@font-face {
    font-family: 'BluuNext';
    src: url('../fonts/BluuNext-Bold.woff2') format('opentype');
    font-display: swap; /* Allows text to render using fallback fonts until BluuNext is loaded */
}

body {
    margin: 0;
    padding: 0;
    background-color: rgb(27, 27, 27); /* Background for the page */
    color: black;
    font-family: 'BluuNext', Arial, sans-serif;
	text-align: center;
	
}

#loading-overlay {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* Full-screen overlay */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(27, 27, 27);
    z-index: 1000; /* Ensure it sits above other content */
}

#loading-overlay h1 {
    font-family: 'BluuNext',Arial, sans-serif;
    font-size: 5rem;
    color: black; /* Text starts black */
    position: absolute; 
    text-align: center;
    white-space: nowrap; /* Prevent text wrapping */
}

#loading-overlay h1::before {
    content: 'LOADING . . .'; /* Create the red overlay effect */
    position: absolute;
    color: red;
    top: 0;
    left: 0;
    width: 0%; /* Start with no overlay */
    height: 100%; /* Match the height of the text */
    border-bottom: 13px solid red; /* Red overlay */
    overflow: hidden;
    white-space: nowrap; /* Prevent text wrapping */
    animation: text 6s linear infinite; /* Sliding effect */
}


/* Keyframes for the red slide across the text */
@keyframes text {
    0% {
        width: 0%; /* Start with no overlay */
    }
    100% {
        width: 100%; /* Fully cover the text */
    }
}

/* Main content styles */
#main-content {
    padding: 20px;
    background-image: url('../graphics/background/Background.jpg'); /* Add this */
    background-size: cover; /* Makes the image cover the entire viewport */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    min-height: 100vh; /* Ensure the background fills the viewport height */
}

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}
.logo {
    width: 100px;
    margin: 0 20px;
}
.title {
    font-size: 36px;
    font-weight: bold;
}
.construction {
    margin-top: 50px;
}
.construction img {
    width: 150px;
    margin: 10px;
}
.message {
    font-size: 20px;
    color: #333;
}

@media (max-width: 768px) {
    #loading-overlay h1 {
        font-size: 3rem; /* Reduce font size on smaller screens */
    }
}