.touch-controls {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100px;
    text-align: center;
}

.touch-controls button {
    display: inline-block;
    width: 100px;
    height: 100px;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: #000;
    background-position: center center;
    border: none;
    margin: 0 10px;
    border-radius: 50%;
    transition: background-color 0.3s;
}

.touch-controls button:active {
    background-color: #5a5a00;
}

.touch-controls button:focus {
    outline: none;
}

.touch-controls button.left {
    background-image: url('../img/caret-left-solid.svg');
    background-position: 33.33% center;
}

.touch-controls button.right {
    background-image: url('../img/caret-right-solid.svg');
    background-position: 66.66% center;
}

.touch-controls button.action {
    background-image: url('../img/circle-solid.svg');
    background-size: 65px;
}