.main_quiz{
    display: block;
    text-align: left;
}

.form_quiz{
    padding: 0px;
    text-align: left;
    display: block;
    width: auto;
}

.form_quiz h2{
    clear:both;
    text-align: center;
}

pre{
    padding: 10px;
    border: 2px solid #212121;
    background-color: #424242;
}

#blank_id,#comment_start_id,#comment_end_id{
    width: 100px;
    height: 15px;
    background: #424242;
    outline: none;
    color: #EAECEE;
    border: 2px solid #EF5350;
}

#blank_id{
    text-align: center;
}

#submit_btn{
    clear: both;
}

.container_quiz{
    max-width: 100%;
    margin: 0px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(100px,auto));
    grid-auto-rows: minmax(50px,auto);
    grid-template-areas:"h h h h h h h h"
                        "n n n n n n n n"
                        "m m m m m m m m" 
                        "m m m m m m m m"
                        "m m m m m m m m"
                        "m m m m m m m m"
                        "f f f f f f f f";
}

@media screen and (min-width:769px)
{
    .nav-top a{
        display: inline;
    }
}

@media screen and (min-width: 1024px)
{
    .nav-top a{
        display: inline;
    }
}