#loading-animation {
    background-color: transparent;
}

.binary-nature-animated-logo-container {
    /* Flexbox properties for centering */
    display: flex;
    align-items: center; /* Centers vertically */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -120%);
    min-width: 100px; /* Adjust size as needed */
    min-height: 100px;
    height: auto;
    aspect-ratio: 1;
}

.binary-nature-animated-logo {
    /* flex-grow: 1, flex-shrink: 1, flex-basis: 33.33% */
    flex: 1 1 33.33%;
    /* Optional: ensure the image fits within the container */
    width: auto;
    height: auto; /* Adjust height as needed */
    max-width: 100%;
    max-height: 100%;
    background-color: transparent;
}

@media (min-width: 600px) {

    .binary-nature-animated-logo-container {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -60%);
    }

    .binary-nature-animated-logo {
        /* flex-grow: 1, flex-shrink: 1, flex-basis: 33.33% */
        flex: 1 1 20%;
        /* Optional: ensure the image fits within the container */
        max-width: 70%;
        max-height: 70%;
    }
}


.element {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

/* Class added via JavaScript when the element should appear */
.element.is-visible {
    opacity: 1;
    visibility: visible;
    /* No delay on 'visibility' when fading in */
    transition-delay: 0s;
}

/* Class added via JavaScript when the element should disappear */
.element.is-hidden {
    opacity: 0;
    visibility: hidden;
    /* Delay setting 'visibility: hidden' until opacity transition is done */
    transition-delay: 0s, 0.5s;
}