body{
    padding: 0;
    margin: 0;
}

.logo{
    max-height: 100%;
}

#grid-container {
    min-height: 100vh;
    width: 100%;
    display: grid;
    grid-template-columns: auto 250px ;
    grid-template-rows: 70px 25px auto 0.7em;
    grid-template-areas: 
    "head head"
    "settings settings"
    "race info"
    "footer footer";
}
/*#ff9921*/
/* #005791 */

#info
{
    background-color: #ddd;
    grid-area: info;
    padding: 15px;
}

#race
{
    background-color: #fff;
    grid-area: race;
    padding: 15px;
}

#settings
{
    background-color: #005791; 
    color: #fff;
    grid-area: settings;
    padding: 2px;
    padding-left: 10px;
}

#head
{
 background-color: #212121;   
 grid-area: head;
 padding: 15px;
}

#footer{
    background-color: #ff9921;
    grid-area: footer;
    font-size: 0.5em;
    color: #fff;
    text-align: center;
}
    
@media only screen and (max-width: 600px) {
    #grid-container {
        grid-template-columns: auto;
        grid-template-rows: 70px 25px auto auto 0.7em;
        grid-template-areas: 
        "head"
        "settings"
        "race"
        "info"
        "footer";
    }

}