@keyframes rotate {
    100%{
        transform:rotate(360deg)
    }    
}
@keyframes show {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

#sun{
    transform-box:fill-box;
    transform-origin: center;
    animation: var(--animation-sun);/*definido en root[light]*/
    background-color: brown;
}
[id^="star"]{
    animation: var(--animation-moon);
}
#star2{
    animation-delay: 1.4s;
}
#star3{
    animation-delay: 2.8s;
}
.header__logo-image{
    animation: pulse 8s infinite;
}