@media screen and (max-width: 720px) {
    body {
        margin-bottom: 13vw;
    }

    .links {
        grid-area: 2/1/2/6;
        background-color: #444;
        margin: 0;
        padding: 3vw 2vw;
    }

    em {
        background-color: #222;
        padding: 1vw 2vw 1vw 2vw;
        font-family: monospace;
        font-size: 4.5vw;
        color: ghostwhite;
    }

    .links a {
        display: block;
        font-size: 5vw;
        margin-bottom: 2vw;
    }

    .links h1 {
        font-size: 6vw;
        background-color: #444;
    }

    .links h2 {
        background-color: #444;
    }

    .info {
        grid-area: 1/1/1/6;
        margin-bottom: 3vw;
    }

    .args h2 {
        margin: 0 0 4vw 0;
        line-height: 7.5vw;
    }

    .examples {
        margin-top: 3vw;
        grid-area: 3/1/3/6;
    }

    .example {
        scroll-margin-top: calc(20px + 6.5vw);
    }

    .info, .example {
        background-color: #444;
        padding: 3vw 2vw;
    }

    .info hr, .example hr {
        margin: 3vw 0;
    }

    .back {
        background-color: #555;
        border: 1vw outset #777;
        padding: 1vw 4vw;
        font-size: 5vw;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        color: aliceblue;
        float: right;
    }

    .back:hover {
        background-color: #333;
        border: 1vw outset #555;
        font-weight: normal;
        cursor: pointer;
    }

    h1:not(.warning) {
        color: aliceblue;
        font-size: 6vw;
        margin: 0 0 3vw 0;
    }

    h2 {
        color: azure;
        font-size: 5vw;
        margin: 0;
    }

    a {
        color:antiquewhite;
    }
}

@media screen and (min-width: 721px) {
    body {
        margin-bottom: 3vw;
    }

    .links {
        grid-area: 1/8/1/10;
        margin: 0 0 0 1vw;
        background-color: #444;
    }

    em {
        background-color: #222;
        padding: 0 1vw 0.25vw 1vw;
        font-family: monospace;
        font-size: 1.25vw;
        color: ghostwhite;
    }

    .links a {
        display: block;
        padding: 0 2vw;
        font-size: 1.25vw;
        margin-bottom: 1vw;
    }

    .gap {
        padding: 0.25vw 0;
        background-color: #333;
    }

    .info {
        grid-area: 1/2/1/8;
    }

    .back {
        background-color: #555;
        border: 0.25vw outset #777;
        padding: 0 1vw;
        font-size: 1.25vw;
        font-weight: normal;
        cursor: pointer;
        text-decoration: none;
        color: aliceblue;
        float: right;
    }

    .back:hover {
        background-color: #333;
        border: 0.25vw outset #555;
        font-weight: normal;
        cursor: pointer;
    }

    .examples {
        margin-top: 1vw;
        grid-area: 2/3/2/9;
    }

    .example {
        scroll-margin-top: calc(20px + 2.25vw);
    }

    .info, .example {
        background-color: #444;
        padding: 1vw 2vw;
    }

    .info hr, .example hr {
        margin: 1vw 0;
    }

    h1:not(.warning) {
        color: aliceblue;
        font-size: 2vw;
        margin: 0 0 1vw 0;
    }

    h2 {
        color: azure;
        font-size: 1.5vw;
        margin: 0;
    }

    .links h1 {
        padding: 1vw 2vw;
        margin: 0;
        font-size: 1.66vw;
        background-color: #444;
    }

    .links h2 {
        padding: 0 2vw;
        margin: 0 0 1vw 0;
        font-size: 1.25vw;
        background-color: #444;
    }

    .args h2 {
        margin: 0 0 1vw 0;
    }

    a {
        color:antiquewhite;
    }

    .results {
        background-color: #222;
        padding-bottom: 0.25vw;
    }
}