.pokaz-sie {
    animation: pojawianie 0.5s ease-in-out;
}

body {
    cursor: url("images/kursor.png"), auto !important;
}

button, a, #przycisk-start, #przycisk-dalej, #przycisk-tak {
    cursor: url("images/kursor.png"), pointer;
}


@keyframes pojawianie {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dobra-odpowiedz {
    animation: zielonyPuls 0.5s;
}

#zdjecie-pytania {
    object-position: top;
}


@keyframes zielonyPuls {
    0%   { transform: scale(1);    background-color: #ecfdf5; }
    50%  { transform: scale(1.02); background-color: #d1fae5; }
    100% { transform: scale(1);    background-color: #ecfdf5; }
}

.zla-odpowiedz {
    animation: czerwoneDrzenie 0.5s;
}

@keyframes czerwoneDrzenie {
    0%   { transform: translateX(0);    background-color: #fef2f2; }
    25%  { transform: translateX(-5px); background-color: #fee2e2; }
    50%  { transform: translateX(5px);  background-color: #fee2e2; }
    75%  { transform: translateX(-5px); background-color: #fee2e2; }
    100% { transform: translateX(0);    background-color: #fef2f2; }
}

.ladny-scroll::-webkit-scrollbar {
    width: 6px;
}

.ladny-scroll::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ladny-scroll::-webkit-scrollbar-thumb {
    background: #fbcfe8;
    border-radius: 10px;
}

.ladny-scroll::-webkit-scrollbar-thumb:hover {
    background: #f472b6;
}