.staff {
    display: flex;
    justify-content: center;
    margin-top: 54px;
    background-image: linear-gradient(180deg, #999 0, #999 1px, transparent 1px, transparent 8px, #999 8px, #999 9px, transparent 9px, transparent 16px, #999 16px, #999 17px, transparent 17px, transparent 24px, #999 24px, #999 25px, transparent 25px, transparent 32px, #999 32px, #999 33px, transparent 33px);
}
.note {
    position: relative;
    margin: 0 12px;
    margin-bottom: 48px;
}
.note::before {
    height: 8px;
    width: 12px;
    position: absolute;
    content: "";
    transform: rotatez(-15deg);
    border-radius: 50%;
    background-color: black;
}
@keyframes play-note {
    0% {
        opacity: 1;
    }
    35% {
        opacity: 1;
    }  
    50% {
        opacity: 0;
    }
    66% {
        opacity: 1;
    }  
    100% {
        opacity: 1;
    }  
}
.note.g4, .note.g4-2 {
    top: 20px;
}
.note.a4, .note.a4-2 {
    top: 16px;
}
.note.e5, .note.e5-2 {
    top: 0px;
}
.note.c5 {
    top: 8px;
}
.note.f5 {
    top: -4px;
}

.note.g4::before {
    animation: play-note 5s infinite 0s;
}
.note.a4 {
    animation: play-note 5s infinite 0.4s;
}
.note.e5 {
    animation: play-note 5s infinite 0.8s;
}
.note.c5 {
    animation: play-note 5s infinite 1.2s;
}
.note.f5 {
    animation: play-note 5s infinite 1.6s;
}
.note.g4-2 {
    animation: play-note 5s infinite 2.0s;
}
.note.a4-2 {
    animation: play-note 5s infinite 2.4s;
}
.note.e5-2 {
    animation: play-note 5s infinite 2.8s;
}