/* Plik face.css do Zadania 5 [cite: 261] */

body { 
    background-image: url(face.svg); 
    background-repeat: no-repeat; 
    /* Dodatkowe style dla lepszej wizualizacji */
    padding: 100px 20px; 
    font-family: Arial, sans-serif;
}

/* Animacja głowy (poprawiona składnia)  */
.whole_head
{
    animation-timing-function: ease-in-out;
    animation-duration: 2s;
    animation-iteration-count: infinite; 
    animation-name: head_down; 
    /* Ustawienie transform-origin jest często konieczne dla poprawnej animacji */
    transform-origin: 21px 26px; 
}

/* Definicja klatek kluczowych dla ruchu głowy [cite: 270] */
@keyframes head_down { 
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(12px); } 
}

/* Animacja migania oczu [cite: 271] */
.eye_left,.eye_right
{ 
    animation-timing-function: ease-in-out; 
    animation-duration: 2s; 
    animation-iteration-count: infinite; 
    animation-name: blinking; 
}

/* Definicja klatek kluczowych dla migania oczu [cite: 272] */
@keyframes blinking {
    5% { opacity: 1; }
    10% { opacity: 0; } /* Zamknięte oko */
    12% { opacity: 1; } /* Otwarte oko */
    100% { opacity: 1; }
}