@media screen and (max-width: 768px) {
    body,
    body[data-theme="midnight"] {
        /* don't change colours when hovering, as it looks weird on mobile. */
        --white-key-hover-color: var(--white-key-color);
        --black-key-hover-color: var(--black-key-color);
        --black-key-hover-label-color: var(--black-key-label-color);

        /* widen black keys */
        --black-key-width: calc(var(--white-key-width) / 1.5);
        --black-key-left-offset: calc(var(--white-key-width) / 3.75);
        --black-key-center-offset: calc(var(--white-key-width) / 3);
        --black-key-right-offset: calc(var(--white-key-width) / 2.25);

    }

    /* hover colour is too light, so white text would have bad contrast on white keys */
    body[data-theme="midnight"] button.key.white:not(.root):not(.secondary):hover > .note-label {
        color: var(--text-color);
    }

    #content {
        row-gap: 8px;
    }

    #fortuna-name {
        font-size: 16pt;
    }


    #keyboard {
        z-index: 2;
        position: sticky;
        top: 0;
        width: 100%;
        height: 35vh;
    }

    .key.white,
    .key.white:first-of-type,
    .key.white:last-of-type,
    .key.black {
        border-width: 2px;
    }

    .key > .note-label {
        font-size: 16pt;
        margin-bottom: 16px;
    }

    .key.black > .note-label {
        font-size: 10pt;
    }

    .key {
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
    }


    #bottom-panel {
        padding: 16px;
        width: calc(100% - 32px - 4px); /* -32 = padding; -4 = keyboard margin */
    }

    #bottom-panel-header {
        margin-bottom: 16px;
    }

    #bottom-panel-title {
        font-size: 14pt;
    }


    #bottom-panel-hide {
        /* no point in hiding the panel on narrow screens like phones */
        display: none;
    }

    #bottom-panel-content {
        max-height: initial;
        flex-direction: column;
        row-gap: 24px;
        overflow-y: scroll;
    }

    #options {
        grid-template-columns: auto auto;
    }

    #options select {
        font-size: 12pt;
    }

    #extras {
        flex-direction: row;
        column-gap: 8px;
        font-size: 10pt;
    }

    #extras > button {
        flex: 1;
        padding: 4px 8px;
    }

    #extra-spacer {
        display: none;
    }

    #language-wrapper svg {
        fill: var(--text-color);
        position: absolute;
        left: 8px;
    }

    #language-picker {
        padding: 4px 8px 4px calc(8px + 24px + 4px);  /* left: padding+icon+spacing */
    }


    /* -- modals -- */

    .modal__container {
        padding: 24px;
        font-size: 11pt;
    }

    /* -- howto modal -- */

    #keybinds {
        font-size: 9pt;
    }

    #keybinds li {
        padding: 8px;
        column-gap: 8px;
    }

    #keybinds li > span {
        flex: 0.75;
    }

    .pc-key {
        padding: 6px 6px 8px 6px;
    }

    .pc-key svg {
        width: 9pt;  /* match the font-size */
        height: 9pt;
    }


    /* -- about modal -- */

    #about-logo {
        height: 128px;
        width: 128px;
    }

    #about-separator {
        width: 24px;
        height: 24px;
    }

    #github-links {
        row-gap: 16px;
        flex-direction: column;
    }

    .link > img,
    .link > svg {
        width: 48px;
        height: 48px;
    }

    .link-info h2 {
        font-size: 13pt;
    }

    .link-info p {
        font-size: 10pt;
    }
}