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

body, html {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0; /* Optional: set a background color */
}

.logo-container {
    /* Ensures the container takes the full viewport height/width */
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
}

.logo {
    max-width: 80%; /* Adjust size as needed */
    max-height: 80vh; /* Adjust size as needed */
    opacity: 0; /* Initially hidden */
    /* Other styles for the logo */
}

/* Keyframes for the fade-in effect */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px); /* Optional: slight movement upwards */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Class added by JavaScript on page load to start the animation */
.fade-in {
    animation: fadeIn 1.5s ease-out forwards; /* Adjust duration and timing as needed */
}