@media screen and (max-width: 1337px) {
    body {
        grid-template-columns: 100px 650px 100px !important;
    }

    div.brainfuck-visualization > div.cell {
        width: 40px !important;
    }

    div.brainfuck-visualization > div.cell::before {
        width: 40px !important;
        margin-left: 15px !important;
    }
}

@media screen and (max-width: 1200px) {
    body {
        grid-template-columns: 100px 400px 100px !important;
    }

    div.brainfuck-visualization > div.cell {
        width: 27px !important;
        font-size: 12px;
    }

    div.brainfuck-visualization > div.cell::before {
        width: 40px !important;
        margin-left: 9px !important;
    }
}

@media screen and (max-width: 1000px) {
    h1 {
        font-size: 24px;
    }

    p.comment {
        display: none !important;
    }

    p.annotated {
        display: none !important;
    }

    div.syntax {
        overflow: scroll;
    }
}

@media screen and (max-width: 870px) {
    button#toggle {
        display: none !important;
    }

    a#share {
        display: none !important;
    }
}

@media screen and (max-width: 640px) {
    h1 {
        font-size: 20px;
    }

    body {
        grid-template-columns: 100px 200px 100px !important;
        grid-template-rows: auto 0 25px 500px 50px 100px 50px auto !important;
    }

    div.heading {
        margin-bottom: 30px !important;
    }

    div.heading > h2 {
        display: none !important;
    }

    div.brainfuck-visualization {
        display: none !important;
    }

    div#delay {
        display: none;
    }

    div.brainfuck-input {
        grid-template-columns: 120px 100px auto 150px !important;
    }
}

@media screen and (max-width: 470px) {
    body {
        grid-template-columns: 100px 100px 100px !important;
        grid-template-areas: 
        "heading heading heading"
        "tape tape tape"
        ". . ."
        "input input input"
        "output-text . ."
        "output output output"
        "hr hr hr"
        "docs docs docs" !important;
    }

    ul {
        margin: 18px !important;
    }

    h2.output {
        margin-right: 10px;
    }

    div.brainfuck-input {
        grid-template-columns: 120px 100px auto 50px !important;
    }

    div.brainfuck-input > button#stop-button {
        margin-left: 30px;
    }
}

@media screen and (max-width: 300px) {
    body {
        grid-template-columns: 100px 50px 100px !important;
    }

    div.brainfuck-input {
        grid-template-columns: 120px 100px auto 0 !important;
    }

    div.brainfuck-input > button#stop-button {
        display: none !important;
    }

    p, ul > li {
        font-size: 14px !important;
    }
}