#floating-arrow {
    position: fixed;
    bottom: 20px; /* Move the arrow to the bottom of the screen */
    left: 50%;
    transform: translateX(-50%);
    animation: float 2s infinite;
    z-index: 1000;
}

#floating-arrow img {
    width: 60px; /* Suurentaa nuolen kokoa */
    height: 60px; /* Suurentaa nuolen kokoa */
    opacity: 0.7;
    transition: opacity 0.3s;
    filter: brightness(0) invert(1); /* Muuttaa kuvan värin valkoiseksi */
}

#floating-arrow img:hover {
    opacity: 1;
}
@keyframes float {
    0%, 100% {
        transform: translate(-50%, 0);
    }
    50% {
        transform: translate(-50%, -10px);
    }
}