:root {
    --logo-diameter: 80px;
}

#container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    gap: 24px;
}

#logo {
    display: block;
    width: var(--logo-diameter);

    opacity: 0;

    transform: translateY(20px);
    transition-property: opacity transform;
    transition-duration: ease-in;
    transition-duration: 1s;

}

#word_marque {
    display: block;
    width: calc(var(--logo-diameter) * 4);
    opacity: 0;

    transform: translateY(20px);
    transition-property: opacity transform;
    transition-duration: ease-in;
    transition-duration: 1s;
    transition-delay: 0.75s;
}

.loaded #logo {
    opacity: 1;
    transform: translateY(0);
}

.loaded #word_marque {
    opacity: 1;
    transform: translateY(0);
}