@media screen and (max-width: 640px)  {
    #main #title{width:100%;}
    #main img{max-width:98%;}
    #main table{max-width:100%;}
}
@media screen and (min-width: 640px)  {

}
@media screen and (min-width: 960px) {}
@media screen and (min-width:1200px){
    #main #title{width:80%}
    #main #content{width:60em;}
}
#banner{
    width:100%;
    height:150px;
    background-image:url(../images/banner.jpg);
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}
#main{
    min-height:calc(100% - 234px - 10em);
    margin:1em 0;
    display:flex;
    flex-direction: column;
    align-items: center;
    font-size:16px;
}
#main #title{
    font-size:24px;
    font-weight: 800;
    display:flex;
    flex-direction: row;
    justify-content: center;
    margin-top:1em;
    margin-bottom:0.5em;
}
#main #author,#date{
    display:inline;
    margin-left:0.5em;
    margin-right:0.5em;
}
#main #content{
    display:flex;
    flex-direction: column;
    margin-top:1em;
    margin-bottom:1em;
    min-height:440px;
}