@media all and (max-width: 800px) {
    .info {
        z-index: 2;
        width: 100%;
        position: relative;
        background: #ffffff;
    }

    #about_page {
        display: none;
        height: 100%;
        background: #000000;
        color: #ffff00;
        text-align: center;
        font-size: 3em;
    }

    #settings_page {
        display: none;
        height: 100%;
        text-align: center;
    }

    #help_page {
        display: none;
    }

    #help_page_text_container {
        padding: 10px;
        }

    .start_page_button {
        height: 25%;
        width: 100%;
        font-size: 4em;
        margin: 0px;
    }

    #start_button {
        background-color: #0000dd;
        border-top: 50px solid #5555ff;
        border-left: 50px solid #3333ff;
        border-right: 50px solid #0000bb;
        border-bottom: 50px solid #0000aa;
    }

    #help_button {
        background-color: #00dd00;
        border-top: 50px solid #55ff55;
        border-left: 50px solid #33ff33;
        border-right: 50px solid #00bb00;
        border-bottom: 50px solid #00aa00;
    }

    #settings_button {
        background-color: #00dddd;
        border-top: 50px solid #55ffff;
        border-left: 50px solid #33ffff;
        border-right: 50px solid #00bbbb;
        border-bottom: 50px solid #00aaaa;
    }

    #about_button {
        background-color: #dddd00;
        border-top: 50px solid #ffff55;
        border-left: 50px solid #ffff33;
        border-right: 50px solid #bbbb00;
        border-bottom: 50px solid #aaaa00;
    }

    .back_button {
        height: 25%;
        width: 100%;
        font-size: 1.2em;
        margin: 0px;
        background-color: #ff0000;
        border-top: 50px solid #ff5555;
        border-left: 50px solid #ff3333;
        border-right: 50px solid #dd0000;
        border-bottom: 50px solid #cc0000;
        position: fixed;
        bottom: 5px;
        left: 0px;
    }

    .settings_options_check {
        display: none;
        padding: 4px 12px;
        margin: 25px;
    }

    .settings_options_check + label {
        padding: 4px 12px;
        margin: 20px;
        font-size: 2em;
        display: block;
        background: #000000;
        color: #ffff00;
    }

    .settings_options_check:checked + label {
        color: #00ffff;
    }

    .settings_options_radio {
        display: none;
    }

    .settings_options_radio + label {
        font-size: 2em;
        padding: 4px 12px;
        margin: 25px;
        color: #00ff00;
        background-color: #000000;
    }

    .settings_options_radio:checked + label {
        font-size: 2em;
        padding: 4px 12px;
        margin: 25px;
        background: #ffffff;
        color: #000000;
    }

    .small_help_button {
        font-size: 1.2em;
        background-color: #00ff00;
    }

    .back_button_small {
        font-size: 1.2em;
    }


    #slowdown + label{
        font-size: 1.2em;
        padding: 10px;
        margin: 20px;
    }

    #score {
        z-index: 4;
        width: 100%;
        position: absolute;
        color: #ffffff;
        display: none;
        font-size: 1.1em;
        font-weight: bold;
        background: #333333;
    }

    #return_to_main {
        background: #aaaaaa;
    }

}

@media all and (min-width: 801px) {
    .info {
            z-index: 2;
            width: 100%;
            position: relative;
            float: right;
            background: #ffffff;
        }

    #about_page {
            display: none;
            height: 100%;
            background: #000000;
            color: #ffff00;
            text-align: center;
            font-size: 3em;
    }

    #settings_page {
        display: none;
        height: 100%;
        text-align: center;
    }

    #help_page {
        display: none;
    }

    #help_page_text_container {
        padding: 10px;
        }

    .start_page_button {
        height: 25%;
        width: 100%;
        font-size: 4em;
        margin: 0px;
    }

    #start_button {
        background-color: #0000dd;
        border-top: 50px solid #5555ff;
        border-left: 50px solid #3333ff;
        border-right: 50px solid #0000bb;
        border-bottom: 50px solid #0000aa;
    }

    #help_button {
        background-color: #00dd00;
        border-top: 50px solid #55ff55;
        border-left: 50px solid #33ff33;
        border-right: 50px solid #00bb00;
        border-bottom: 50px solid #00aa00;
    }

    #settings_button {
        background-color: #00dddd;
        border-top: 50px solid #55ffff;
        border-left: 50px solid #33ffff;
        border-right: 50px solid #00bbbb;
        border-bottom: 50px solid #00aaaa;
    }

    #about_button {
        background-color: #dddd00;
        border-top: 50px solid #ffff55;
        border-left: 50px solid #ffff33;
        border-right: 50px solid #bbbb00;
        border-bottom: 50px solid #aaaa00;
    }

    .back_button {
        font-size: 1.2em;
        margin: 0px;
        background-color: #ff0000;
        border-top: 5px solid #ff5555;
        border-left: 5px solid #ff3333;
        border-right: 5px solid #dd0000;
        border-bottom: 5px solid #cc0000;
    }

    .settings_options_check {
        padding: 4px 12px;
        margin: 25px;
    }

    .settings_options_check + label {
        padding: 4px 12px;
        margin: 20px;
        color: #dd0000;
    }

    .settings_options_check:checked + label {
        color: #007700;
    }

    #settings_radio {
        border: 1px solid black;
    }

    .settings_options_radio + label {
        padding: 4px 12px;
        margin: 25px;
        color: #ff0000;
    }

    .settings_options_radio:checked + label {
        padding: 4px 12px;
        margin: 25px;
        color: #007700;
    }

    .small_help_button {
        font-size: 1.2em;
        background-color: #00ff00;
    }

    .back_button_small {
        font-size: 1.2em;
    }


    #slowdown + label{
        padding: 10px;
        margin: 20px;
    }

    #score {
        width: 100%;
        float: right;
        position: relative;
        color: #ffffff;
        display: none;
        font-size: 1.1em;
        font-weight: bold;
        background: #333333;
    }

    #return_to_main {
        background: #aaaaaa;
    }

}


.centered_div {
    text-align: center;
}

td {
    width: 800px;
    text-align: center;
}

#left_score {
    float: left;
    display: inline;
    padding: 5px;
}

#center_score {
    display: inline;
    padding: 5px;
}

#right_score {
    float: right;
    display: inline;
    padding: 5px;
}

.alert {
    display: none;
    background-color: #ffffff;
    border: solid 2px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    padding: 10px;
    z-index: 1;
}

#help_canvas {
    height: 300px;
}

#help_canvas_2 {
    height: 300px;
}