/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Full-page styling */
html, body {
    height: 100%;
    display: grid;
    place-items: center; /* This centers content both horizontally and vertically */
    font-family: Arial, sans-serif;
    background-color: #ffffff; /* Light background */
}

/* Container to center the content */
.centered-text {
    text-align: center; /* Center text horizontally */
    padding: 20px;
    background-color: #333; /* Dark background for contrast */
    color: white; /* White text */
    border-radius: 8px; /* Optional rounded corners */
}

/* Basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Change to black */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999; /* Ensure preloader is on top of other content */
    animation: hidePreloader 3s forwards; /* Fake preloading animation */
}

/* Loader image */
.loader {
    width: 400px;
    height: 400px;
}

/* Keyframes for fake preloader (after 3 seconds, hide the preloader) */
@keyframes hidePreloader {
    0% {
        opacity: 1; /* Show preloader */
    }
    90% {
        opacity: 1; /* Keep preloader visible until near the end */
    }
    100% {
        opacity: 0; /* Fade out the preloader */
        visibility: hidden;
    }
}

/* Main content styles */
#content {
    display: none;
    animation: showContent 3s forwards 3s; /* Wait 3s before showing the content */
}

/* Keyframes for content reveal */
@keyframes showContent {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/* Make the content visible after animation */
#content {
    display: block;
}