html,body{height:100%}
html{font-size:14px}
header{position:relative}
header hr{display:none}
body{
max-width:54rem;
margin:.2rem;padding:0 .62rem;
font:1.2rem/1.62 sans-serif;
display:-webkit-flex;display:-ms-flexbox;display:flex;
flex-direction:column}
main{flex:1 0 auto}
nav>a{
padding:.2rem 0;
display:block;
border-top:1px dotted #000}
nav>a:first-child{border:none}

h1,h2,h3,h4,h5,h6{line-height:1}
header h1{margin:1.4rem 52px 1.2rem auto}

a{text-decoration:none}
a:link,a:visited{color:#087CA7}
a:hover,a:visited:hover{color:#09B2DC}

ul{padding-left:0;margin-left:0;list-style:inside}
ul li{margin:.35rem}
li>ul{margin-left:1em}

.tag{
font-size:.8rem;vertical-align:middle;
padding:.2rem;border-radius:.33rem;
background:#191919;color:#FFF}
pre{
background:#191919;color:#FFF;
white-space:pre-wrap;overflow-x:auto;
padding:12px;border:1px solid #FFF}
footer p{margin:0}

table{text-align:left;width:100%;border-collapse:collapse}
td,th{border:1px solid #222;padding:9px 6px}
th{padding:12px;color:#FFF}
thead th{background:#191919}
tbody th{background:#292929}
tr:nth-child(even){background:#FEFEFE}
tr:hover{background:#DEDEDE}

.burger-container{
position:absolute;height:24px;width:30px;
cursor:pointer;top:34px;right:10px}
#burger-toggle,#burger-toggle~nav{display:none}
.burger,.burger::after,.burger::before{
position:absolute;background:#000;
height:4px;width:30px;border-radius:2px;content:"";
transition:transform 300ms cubic-bezier(.4,1,.5,1)}
.burger::before{margin-top:-8px}
.burger::after{margin-top:8px}
#burger-toggle:checked~nav{display:block}
#burger-toggle:checked+.burger-container .burger::before{margin-top:0;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:0;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger{background:rgba(255,255,255,0)}

@media print{body{max-width:none}}
@media(min-width:720px){
 body{margin:.2rem auto}
 nav>a{margin-left:2rem;padding:auto;display:inline;border:none}
 nav>a:first-child{padding:1rem 0;margin-left:0}
 ul li{margin:auto}
 .burger-container{display:none}
 #burger-toggle~nav,header hr{display:block}
}
@media(max-width:320px){
 #burger-toggle~nav{display:block}
 .burger-container{display:none}
 header h1{margin-right:auto}
}
@media(prefers-color-scheme:dark){
 body{color:#FFF;background:#191919}
 a:link,a:visited{color:#9CF}
 a:hover,a:visited:hover{color:#DA4167}
 nav>a{border-color:#FFF}
 .tag{background:#FFF;color:#000}
 .burger,.burger::after,.burger::before{background:#FFF}
}