body{
    font-family:Arial, Helvetica, sans-serif;
}

#form, #output, #bases{
    width: 80%;
    margin: auto;
    margin-top: 32px;
    margin-bottom: 32px;
}

#form{
    width: 40%;
    text-align: center;
}

#form *{
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#form button, #form select, #form label, #form input{
    margin-top: 16px;
    width: 160px;
}

#output{
    font-size: 200%;
}

#bases{
    border-collapse: collapse;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
}

#bases th{
    text-align: left;
}

#bases td{
    border-width: 1px;
    border-color: #000000;
    border-style: solid;
}

sub{
    font-size: 50%;
}

@media screen and (max-width: 640px){

    #form, #output, #bases{
        width: 95%;
    }

    #form button, #form select, #form label, #form input{
        width: 100%;
        font-size: 150%;
    }

}