footer {
    font-size: 16pt;
    align-items: flex-start;
    gap: calc(var(--gap) * 2);
    width: 100%;
    margin-bottom: calc(var(--gap) * 2);

    .input-row {
        width: 100%;
        font-size: 16pt;
        align-items: center;

        label {
            text-transform: uppercase;
            margin-top: 9px;
        }

        input[type="text"] {
            font-size: 20pt;
        }
    }

    #credits {
        text-transform: uppercase;
        font-size: 14pt;
        align-self: center;
    }
}

@media (min-width: 768px) {
    footer.column {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .input-row {
            max-width: 400px;
        }
    }
}

menu {
    width: 100%;
    appearance: none;
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    button {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
        font-size: 16pt;
        padding: 5px 10px;

        &.shrinkable {
            flex: 1 1 48%;
            min-width: 0;
        }
    }
}

@media (min-width: 768px) {
    menu {
        width: 400px;
        margin-left: auto;
        margin-right: auto;

        button {
            font-size: 14pt;
        }
    }
}