body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333333; /* Dark gray background */
}

.container {
    text-align: center;
    position: relative; /* Establish positioning context for canvas */
}

#logo {
    max-width: 200px; /* Adjust as needed */
    max-height: 200px; /* Adjust as needed */
    animation: fadeIn 2s ease-out, heartbeat 3s infinite 2s; /* fadeIn once, then heartbeat starts after 2s and repeats */
    opacity: 0; /* Start fully transparent for fadeIn */
    animation-fill-mode: forwards; /* Retain styles from the last keyframe of fadeIn */
    z-index: 10;
    position: relative; /* Ensure logo is above the canvas */
}

#treeCanvas {
    /* border: 1px solid white; */ /* For visibility during dev - REMOVED */
    width: 100%; /* Initial width, JS will override */
    height: 100%; /* Initial height, JS will override */
    position: fixed; /* Position relative to the viewport */
    right: 0;
    bottom: 0;
    z-index: 1; /* Behind the logo */
}

/* Keyframes for fade-in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Keyframes for heartbeat animation */
@keyframes heartbeat {
    0% { transform: scale(1); } /* Rest */
    10% { transform: scale(1.4); } /* Lub - Start */
    15% { transform: scale(1.0); } /* Lub - End, quick return */
    25% { transform: scale(1.6); } /* Dub - Start, slightly larger */
    30% { transform: scale(1.0); } /* Dub - End, quick return */
    100% { transform: scale(1.0); } /* Rest until next cycle */
}

/* Footer styles */
footer {
    display: flex;
    align-items: center;
    justify-content: center;  /* Centre horizontalement (optionnel) */
    gap: 0.5em;
    color: #EFEFEF; /* Light text for dark background */
    text-align: center;
    vertical-align: middle;
    font-family: 'Orbitron', sans-serif;
    position: fixed;
    bottom: 10px;
    width: 100%;
    padding-top: 5px;
    padding-bottom: 5px;
    font-size: 16px;
    letter-spacing: max( 0.05em, 0.05vw);
    z-index: 2;
    text-shadow: 1px 1px 2px #000, 0 0 10px #fff, 2px 2px 4px rgba(0,0,0,0.5);
}

footer svg {
    margin-top: 3px;
}
footer a {
    color: #EFEFEF;
    text-decoration: none;
}