#easter-egg {

    position: fixed;

    width: 100%;
    height: 100%;

    background-image: url("../assets/content-256.png");
    background-image: image-set(
        url("../assets/content-256.webp") type("image/webp"),
        url("../assets/content-256.png") type("image/png")
    );
    
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    opacity: 0;
    z-index: -99;
}

#easter-egg.show {
    animation: easter-egg-pop 10s forwards ease-in-out;
}

@keyframes easter-egg-pop {
    0% {
        scale: 0%;
        opacity: 0;
        z-index: -99;
    }

    50% {
        scale: 100%;
        opacity: 1;
        z-index: 99;
    }

    100% {
        scale: 0%;
        opacity: 0;
        z-index: -99;
        display: none;
    }
}