#controller {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

.base-panel {
    background: #0f0f13;
    background: linear-gradient(180deg, rgba(158,54,65,1) 0%, rgba(158,54,65,1) 50%, rgba(15,15,19,1) 51%, rgba(15,15,19,1) 100%);
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.lcd-panel {
    text-align: center;
    box-shadow: inset 0 0 8px #000;
    border-radius: 4px;
    border: 5vw solid #9e3641;
    border-top-width: 2vw;
    border-bottom-width: 2vw;
    box-sizing: content-box;
    background: #989E9C;
    color: rgba(0,0,0,0.7);
    font-family: monospace;
    font-size: 3em;
    margin-right: auto;
    margin-left: auto;
    position: relative;
    width: 90vw;
    height: 61vw;
    grid-column: 1 / span 2;
    margin: auto;
}

.button {
    margin: 0;
    background: #F6D13A;
    width: 25vw;
    height:  25vw;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: inset 0 -2px 2px #355;
}

.left-button, .right-button {
    margin: auto;
}

.active .button {
    box-shadow: inset 0 1px 2px #355, inset 1px 0 2px #355, inset -1px 0 2px #355;
}

@media (min-aspect-ratio: 850/785) {
    .base-panel {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
    }

    .lcd-panel {
        border: 5vw solid #9e3641;
        border-top-width: 3vw;
        border-bottom-width: 3vw;
        height: 50.16vw;
        width: 74vw;
        order: 1;
    }

    .button {
        height:  calc(50vh - 2vw);
        width: 8vw;
        margin: 1vw;
    }

    .left-button {
        order: 0;
    }

    .right-button {
        order: 2;
    }

    .left-button, .right-button {
        margin: auto 0 0;
    }
}

@media (min-aspect-ratio: 1380/785) {
    .lcd-panel {
        border: 5vh solid #9e3641;
        border-top-width: 4vh;
        border-bottom-width: 4vh;
        height: 92vh;
        width: 135.74vh;
    }

    .button {
        width: calc(((100vw - 135.74vh - 10vh) / 2) - 2vw);
        max-width: 8vw;
        margin: 1vw;
    }
}