html {font-family:sans-serif;font-size:62.5%;}
body {font-size:1.8rem;margin:0;text-align:center;}

header {background-color:#222;color:#fff;font-weight:bold;padding:4rem 0;}
main {padding:3rem 0;}
footer {font-size:0.8em;margin:4rem auto 10rem;text-align:right;}

header > div, nav > div, main > div, footer > div {margin:0 auto;max-width:calc(100vw - 6rem);width:720px;}

header img {display:block;margin:0 auto 3rem;max-width:100%;width:711px;}

a {color:#2e58a6;text-decoration:none;}

main p {color:#777;line-height:1.5em;}

nav a {color:#bbb;display:inline-block;font-size:0.9em;font-weight:bold;line-height:2rem;padding:0 1.5rem;text-transform:uppercase;}
nav a.active {color:#2e58a6;}

a.button {background-color:#2e58a6;color:#fff;display:inline-block;font-style:italic;font-weight:bold;line-height:5rem;margin:2rem auto;padding:0 3rem;position:relative;text-transform:uppercase;}
a.button:before, a.button:after {border-color:#fff;border-style:solid;border-width:2.5rem 0.4rem;content:'';position:absolute;top:0;}
a.button:before {border-bottom-color:transparent;border-right-color:transparent;left:0;}
a.button:after {border-top-color:transparent;border-left-color:transparent;right:0;}
a.button:hover {background-color:#000;}

h2 {font-style:italic;margin-top:7rem;text-transform:uppercase;}

h3 {color:#ddd;margin-top:5rem;text-transform:uppercase;}

hr {background-color:#ddd;border:none;margin:5rem auto;height:1px;}

strong {color:#000;}

ul:not(.runners) {margin:0 auto;text-align:left;width:150px;}

ul.runners li {display:inline-block;list-style-type:none;margin:0.8rem 1rem;}
ul.runners li a {color:#2e58a6;font-weight:bold;text-transform:uppercase;}

table {border-collapse:collapse;text-align:left;width:100%;}
th, td {border-bottom:1px solid #eee;padding:0.5rem 1rem;}
td[colspan]:first-child {background-color:#222;border:none;color:#fff;}
table td:not([colspan]):last-child {text-align:center;white-space:nowrap;}

@media screen and (min-width:1290px) {
  table {margin:0 -15rem;width:calc(100% + 30rem);}
}

a.youtube:first-child, a.twitch:first-child {margin-left:0 !important;}
a.youtube:last-child, a.twitch:last-child {margin-right:0 !important;}
a.youtube:not([href=""]), a.twitch:not([href=""]) {background:transparent none center center no-repeat;background-size:100%;display:inline-block;margin:0 0.5rem;width:2rem;height:2rem;}
a.youtube {background-image:url('../images/youtube.webp') !important;}
a.twitch {background-image:url('../images/twitch.webp') !important;}

footer a {color:#ccc;text-decoration:none;}
footer a:hover {color:#2e58a6;}