button.controls {
    background-color: var(--input-bg-color);
    border-color: var(--input-border-color);
    color: var(--main-fg-color);
    line-height: 1;
    border-radius: 4px;
    margin: 0.5rem;
    padding: 1rem;
    touch-action: manipulation;
}

button.controls > span.arrow {
    border: solid var(--main-fg-color);
    border-width: 0 4px 4px 0;
    display: inline-block;
    padding: 4px;
}

button.controls > span.pause {
    border: solid var(--main-fg-color);
    border-width: 0 4px;
    display: inline-block;
    padding: 8px 4px;
}

button.controls > span.right {
    transform: rotate(-45deg);
}

button.controls > span.left {
    transform: rotate(135deg);
}

button.controls > span.up {
    transform: rotate(-135deg);
}

button.controls > span.down {
    transform: rotate(45deg);
}

#gc {
    width: 360px;
    height: 270px;
    display: flex;
    margin: 2rem auto;
}

@media only screen and (min-width: 540px) {
    #gc {
        width: 480px;
        height: 360px;
    }
}

@media only screen and (min-width: 768px) {
    #gc {
        width: 720px;
        height: 540px;
    }

    /*button.controls {
        opacity: 0;
    }*/
}

@media only screen and (min-width: 1280px) {
    #gc {
        width: 960px;
        height: 720px;
    }
}