* {
    color: #be0032;
    background-color: white;
    font-family: 'Varela Round', Arial, Helvetica, sans-serif;
    font-size: medium;
}

button, select {
    background-color: palegreen;
    border-radius: .3em;
}

button {
    padding: .3em;
}

option {
    background-color: palegreen;
}

.game-box {
    border: .15em ridge black;
    border-radius: .3em;
    padding: .25em;
}

.game-box div {
    padding: .25em;
}

#ballsWave {
    position: relative;
    top: 0em;
    left: 0em;
    width: 8em;
    height: 1em;
    /*margin: auto;*/
}

.ball {
    position: absolute;
    background-color: #be0032;
    width: 0.5em;
    height: 0.5em;
    animation-name: ballsWave;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-direction: normal;
    border-radius: 0.9em;
}

#ball_1 {
    left: 0em;
    animation-delay: 0s;
}

#ball_2 {
    left: 1.1em;
    animation-delay: 0.15s;
}

#ball_3 {
    left: 2.2em;
    animation-delay: 0.3s;
}

#ball_4 {
    left: 3.3em;
    animation-delay: 0.45s;
}

#ball_5 {
    left: 4.4em;
    animation-delay: 0.6s;
}

#ball_6 {
    left: 5.5em;
    animation-delay: 0.75s;
}

#ball_7 {
    left: 6.6em;
    animation-delay: 0.9s;
}

#ball_8 {
    left: 7.7em;
    animation-delay: 1.05s;
}



@keyframes ballsWave {
    0%{
        background-color: #be0032;
    }

    100%{
        background-color: white;
    }
}