div {
    position: relative;
}

nav {
    top: 4em;
    width: 30em;
    display: inline-flex;
    flex-direction: row;
		margin-left: 10px;
}

    nav span {
        width: 4em;
        text-align: center;
        cursor: pointer;
        font-size: 1em;
    }

div.board {
    margin-top: 1em;
    flex-wrap: wrap;
    width: 30em;
    height: 24em;
    overflow: hidden;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap;
    z-index: -5;
    row-gap: 0;
    pointer-events: none;
    border-left: 10px solid var(--board-bg);
}

span.container {
    width: 4em;
    height: 4em;
    margin: 0;
    padding: 4px;
    overflow: hidden;
    background-color: transparent;
    position: relative;
    z-index: -2;
    pointer-events: none;
}

.container span {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    box-shadow: 0 0 0 3em var(--board-bg);
    left: 0px;
    position: absolute;
    display: block;
    z-index: 5;
    pointer-events: none;
}

.player1, .player2 {
    width: 3.5em;
    height: 3.5em;
    border-radius: 50%;
    left: 0px;
    top: 0px;
    position: absolute;
    display: block;
    z-index: -8;
}

.player1 {
    background-color: var(--player1);
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    box-shadow: 0 0 0 4px var(--player1);
}

.player2 {
    background-color: var(--player2);
    animation-timing-function: cubic-bezier(.5, 0.05, 1, .5);
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
    box-shadow: 0 0 0 4px var(--player2);
}

.col1 {
    left: calc( 0em + 9px );
}

.col2 {
    left: calc( 4em + 9px );
}

.col3 {
    left: calc( 8em + 9px );
}

.col4 {
    left: calc( 12em + 9px );
}

.col5 {
    left: calc( 16em + 9px );
}

.col6 {
    left: calc( 20em + 9px );
}

.col7 {
    left: calc( 24em + 9px );
}

.drop1 {
    animation-duration: 1s;
    animation-name: drop1;
}

.drop2 {
    animation-duration: 1.5s;
    animation-name: drop2;
}

.drop3 {
    animation-duration: 1.6s;
    animation-name: drop3;
}

.drop4 {
    animation-duration: 1.7s;
    animation-name: drop4;
}

.drop5 {
    animation-duration: 1.8s;
    animation-name: drop5;
}

.drop6 {
    animation-duration: 1.9s;
    animation-name: drop6;
}

@keyframes drop1 {
    75%, 90%, 97%, 100% {
        transform: translateY(1.27em);
    }

    80% {
        transform: translateY(0.4em);
    }
    /*-15% */
    95% {
        transform: translateY(0.8em);
    }
    /* -7% */
    99% {
        transform: translateY(1.0em);
    }
    /* -3% */
}

@keyframes drop2 {
    75%, 90%, 97%, 100% {
        transform: translateY(5.27em);
    }

    80% {
        transform: translateY(3.8em);
    }
    /*-15% */
    95% {
        transform: translateY(4.6em);
    }
    /* -7% */
    99% {
        transform: translateY(4.9em);
    }
    /* -3% */
}

@keyframes drop3 {
    75%, 90%, 97%, 100% {
        transform: translateY(9.27em);
    }

    80% {
        transform: translateY(7.2em);
    }
    /*-15% */
    95% {
        transform: translateY(8.3em);
    }
    /* -7% */
    99% {
        transform: translateY(8.8em);
    }
    /* -3% */
}

@keyframes drop4 {
    75%, 90%, 97%, 100% {
        transform: translateY(13.27em);
    }

    80% {
        transform: translateY(10.6em);
    }
    /*-15% */
    95% {
        transform: translateY(12em);
    }
    /* -7% */
    99% {
        transform: translateY(12.7em);
    }
    /* -3% */
}

@keyframes drop5 {
    75%, 90%, 97%, 100% {
        transform: translateY(17.27em);
    }

    80% {
        transform: translateY(14em);
    }
    /*-15% */
    95% {
        transform: translateY(15.7em);
    }
    /* -7% */
    99% {
        transform: translateY(16.5em);
    }
    /* -3% */
}

@keyframes drop6 {
    75%, 90%, 97%, 100% {
        transform: translateY(21.27em);
    }

    80% {
        transform: translateY(17.4em);
    }

    95% {
        transform: translateY(19.4em);
    }

    99% {
        transform: translateY(20.4em);
    }
}