body {
    background-color: #CAE7A3;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

    --anim-duration: 1.5s;
    --anim-function: cubic-bezier(0.6, -0.25, 0.2, 1.1);
}

svg {
    margin-top: 64px;
}


/* Fondo */
#fondo {
    fill: #23283C;
    transition: fill 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg:hover #fondo {
    fill: #303957;
}

.dia #fondo {
    fill: #0B8DF6;
}

svg.dia:hover #fondo {
    fill: #0B8DF6;
}


/* Grupo búho y fondo búho */
#g-buho {
    transform: translate(530px, 10px);
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

.dia #g-buho {
    transform: translate(10px, 10px);
}

#buho {
    fill: #2EC100;
    transition: fill 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg:hover #buho {
    fill: #0C0;
}

svg:active #buho {
    fill: #0F0;
}


/* Cara */
#cara {
    transform: translate(38px, 45px);
    transition: transform 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg:hover #cara {
    transform: translate(43px, 40px) rotate(3deg);
}

.dia #cara {
    transform: translate(38px, 65px);
}

svg.dia:hover #cara {
    transform: translate(38px, 65px);
}


/* Ojo izquierdo */
#ojo-izq-pup, #ojo-izq-ref {
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg.dia #ojo-izq-pup, svg.dia #ojo-izq-ref {
    transform: translate(-6px, 3px);
}

#ojo-izq-bolsa {
    transform: translate(24px, 179px) rotate(104deg);
    transition: all 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg:hover #ojo-izq-bolsa {
    transform: translate(24px, 148px) rotate(100deg);
}

.dia #ojo-izq-bolsa {
    transform: translate(28px, 127px) rotate(90deg);
}

svg.dia:hover #ojo-izq-bolsa {
    transform: translate(28px, 127px) rotate(90deg);
}


#ojo-izq-parpado {
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

.dia #ojo-izq-parpado {
    transform: translate(38px, 58px) rotate(90deg);
}


/* Ojo derecho */
#ojo-der-pup, #ojo-der-ref {
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg.dia #ojo-der-pup, svg.dia #ojo-der-ref {
    transform: translate(-6px, 3px);
}

#ojo-der-bolsa {
    transform: translate(188px, 179px) rotate(-104deg);
    transition: all 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg:hover #ojo-der-bolsa {
    transform: translate(188px, 150px) rotate(-104deg);
}

.dia #ojo-der-bolsa {
    transform: translate(178px, 127px) rotate(-90deg);
}

svg.dia:hover #ojo-der-bolsa {
    transform: translate(178px, 127px) rotate(-90deg);
}


#ojo-der-parpado {
    transition: all 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

.dia #ojo-der-parpado {
    transform: translate(158px, 58px) rotate(90deg);
}

svg.dia:hover #ojo-der-parpado {
    transform: translate(158px, 48px) rotate(90deg);
}


/* Pico */
#base-pico {
    transform: translate(0px, 0px);
    transition: all 0.2s ease-in-out;
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

svg:hover #base-pico {
    transform: translate(0px, -2px);
    rx: 20px;
    ry: 18px;
}

svg.dia:hover #base-pico {
    transform: translate(0px, 0px);

    /* Sincronizado con atributos */
    rx: 22px;
    ry: 20px;
}


/* Sol-luna y nubes */
#g-astro, #astro, #astro-sup, #astro-inf, #astro-crateres, #astro-sombra, #nubes {
    animation-duration: var(--anim-duration);
    animation-timing-function: var(--anim-function);
}

.dia #g-astro {
    transform: translate(558px, 38px);
}

.dia #astro {
    fill: #F1A952;
}

.dia #astro-crateres {
    opacity: 0;
}

.dia #astro-sup {
    stroke: #FAFF92;
}
.dia #astro-inf {
    stroke: #CD802B;
}
.dia #astro-sombra {
    stroke: #F7BE79;
}

.dia #nubes {
    transform: translate(190px, 0px);
}