html,body{margin:0;padding:0;font-size:12pt;font-family:Tahoma, Geneva, sans-serif;}
header,main,nav,footer{display:block;}
h1,h2,h3{font-family: 'Raleway', sans-serif;letter-spacing:-2px;margin:0;padding:0.4em 0 0 0;line-height:1.4em;border-bottom:3px solid #ef1b24;}
h1{font-size:2.35em;}
h2{font-size:2.2em;}
h3{font-size:1.6em;}
p{margin:0.5em 0;padding:0.1em 0;line-height:1.7em;}
li{padding:0.1em 0;line-height:1.6em;}
a{color:#062e4c;text-decoration:underline;}
a:hover,a:focus{color:#58c3c8;text-decoration:underline;}
img{width:100%;height:auto;}

header{background:#062e4c url('background-top.png') top center no-repeat;background-size:cover;color:#fff;padding:0.6em 0.4em;border-top:8px solid #ef1b24;}
header p{line-height:1.4em;}
header a{color:#58c3c8;}
header a:hover,header a:focus{color:#d1edf3;}
header #header-title{font-family: 'Raleway', sans-serif;font-size:6vw;font-weight:bold;text-align:center;padding-bottom:1em;}
header #header-title .title-name{font-size:2em;}
header #main-logo{margin:auto;}
header #main-info{font-size:1em;text-align:center;}

#main-content main{padding:0.6em 0.8em;font-size:1.1em;}
#main-content main h2{margin-top:1em;}
#main-content main .announce{padding:30px;background:#ffe;margin:10px 8vw;}
#main-content main .announce p{font-size:1.4em;}
#main-content main .author{font-family: 'Raleway', sans-serif;font-size:1.5em;font-weight:bold;}
#main-content main .list-box{background:#f4f4f4;padding:1.5em 2em;margin:1em 0;font-size:1.2em;font-family: 'Raleway', sans-serif;}

footer{text-align:center;background:#ef1b24;color:#fff;font-size:0.8em;padding:2em 0.5em;line-height:1.6em;border-bottom:8px solid #062e4c;}
footer a{color:#f8f9fb;}
footer a:hover, footer a:focus{color:#fff;}

@media (min-width:400px) {
    
    header #main-logo{width:300px;}
    header #main-info{margin: auto 5vw;}
}

@media (min-width:800px) {
    header{width:325px;padding:0;margin:0;position:fixed;height:100%;}
    header #header-title{font-size:1.7em;}
    header #header-title .title-name{font-size:1.6em;}
    
    header #main-logo{}
    header #main-info{margin: auto 2vw;}

    h1{font-size:2.6em;}
    
    #main-content{width:calc(100% - 325px);padding:0;margin:0;float:right;border-top: 8px solid #ef1b24;}
    #main-content main{padding:0.4em 1.5em;max-width:800px;margin:auto;font-size:0.9em;}
    #main-content main > h1{padding-top:0;}
    #main-content main .list-box{margin:1em;padding:1.5em 2.5em;}
    
    footer{font-size:0.9em;}

}