/* Background music notes */
.hero-bg-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 0;
    pointer-events: none;
}

.music-note {
    position: absolute;
    font-size: 2rem;
    color: rgba(106, 212, 124, 0.15);
    animation: float-random 20s infinite ease-in-out;
}

/* Position each note */
.note-1 {
    top: 10%;
    left: 5%;
    font-size: 3.5rem;
    animation-duration: 18s;
}

.note-2 {
    top: 15%;
    right: 10%;
    font-size: 2.8rem;
    animation-duration: 22s;
    animation-delay: 2s;
}

.note-3 {
    bottom: 20%;
    left: 15%;
    font-size: 3.2rem;
    animation-duration: 25s;
    animation-delay: 1s;
}

.note-4 {
    top: 40%;
    right: 25%;
    font-size: 2.5rem;
    animation-duration: 20s;
    animation-delay: 3s;
}

.note-5 {
    bottom: 35%;
    right: 5%;
    font-size: 3.8rem;
    animation-duration: 23s;
    animation-delay: 1.5s;
}

.note-6 {
    top: 60%;
    left: 8%;
    font-size: 3rem;
    animation-duration: 19s;
    animation-delay: 2.5s;
}

.note-7 {
    bottom: 10%;
    right: 20%;
    font-size: 3.4rem;
    animation-duration: 21s;
    animation-delay: 0.5s;
}

.note-8 {
    top: 25%;
    left: 30%;
    font-size: 2.6rem;
    animation-duration: 24s;
    animation-delay: 4s;
}

.note-9 {
    top: 70%;
    right: 15%;
    font-size: 3.1rem;
    animation-duration: 18s;
    animation-delay: 1.2s;
}

.note-10 {
    bottom: 45%;
    left: 25%;
    font-size: 2.9rem;
    animation-duration: 26s;
    animation-delay: 2.8s;
}

.note-11 {
    top: 5%;
    right: 35%;
    font-size: 3.3rem;
    animation-duration: 22s;
    animation-delay: 0.8s;
}

.note-12 {
    bottom: 25%;
    right: 40%;
    font-size: 2.7rem;
    animation-duration: 20s;
    animation-delay: 3.5s;
}

@keyframes float-random {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -40px) rotate(15deg);
    }

    50% {
        transform: translate(-20px, 20px) rotate(-10deg);
    }

    75% {
        transform: translate(40px, 30px) rotate(20deg);
    }
}