@media only screen and (max-width: 1280px) {

}

@media only screen and (max-width: 820px) {
    .boardContainer {
        width: 90vw;
        aspect-ratio: 1;
    }

    .panelContainer {
        flex-direction: column-reverse;
        align-items: center;
    }

    .field {
        width: 7.5vw; /* still need to test that */
    }

    .controls {
        display: none;
    }

    .mobileControls {
        display: block;
    }

    .break {
        margin-top: 1rem;
    }

    .spaceFiller {
        display: none;
    }

    body {
        overflow-x: hidden;
    }

    .secondary {
        transform: scale(0);
    }
}