body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    margin: 0;
    background-color: #000000; /* Light grey background for the page */
}

.logo-container {
    background-color: black; /* Black background for the logo container */
    padding: 20px; /* Add some padding around the logo */
    border-radius: 10px; /* Optional: rounded corners for the container */
    border-width: 5px;
    border-color: rgb(51, 3, 66);
    border-style: double;
}

.logo {
    width: 600px; /* Adjust logo size as needed */
    height: auto;
    opacity: 0; /* Initially set logo to be transparent */
    animation: fadeIn 20s forwards; /* Apply fadeIn animation */
}

@keyframes fadeIn {
    to {
        opacity: 1; /* Fade in to fully opaque */
    }
}