.controls > * {
    margin-top: 0.75em;
}

.buttons-container {
    display: flex;
    flex-direction: row;
}

.control-button {
    background: var(--grey-200);
    border: black solid 2px;
    border-radius: 1.5em;
    text-align: center;
    cursor: pointer;
    padding: 0.35em 0.75em;
}

.control-button:focus {
    outline: none;
    border-width: 5px;
    margin: -3px;
    background: var(--grey-500);
    color: white;
    transform: scale(var(--hover-scale-transform));
}

@media (hover) {
    .control-button:hover {
        background: var(--grey-500);
        color: white;
        transform: scale(var(--hover-scale-transform));
    }
}

@media (prefers-reduced-motion: no-preference) {
    .control-button {
        transition: transform 200ms ease-in, background-color 200ms ease-in, color 200ms ease-in;
    }
}