html,body{height:100%}
html{font-size:15px}
header{position:relative}
header hr{display:none}
body{
max-width:768px;
margin:auto;padding:0 1.24rem;
font:1.25rem/1.5 Cascadia Mono;color:#556;
display:-webkit-flex;display:-ms-flexbox;display:flex;
flex-direction:column}
main{flex:1 0 auto}
nav{
box-sizing:border-box;
z-index:9}
nav>a{
padding:.2rem 0;
display:block}

h1,h2,h3,h4,h5,h6{line-height:1}
header h1{margin:1.4rem 52px 1.2rem auto}
h1{color:#000}h2{color:#111}h3{color:#222}
h4,h5,h6{color:#333}

a{text-decoration:none; border-bottom: 1px dotted #999}
a:link,a:visited{color:#07C}
a:hover,a:visited:hover{color:#1AE}
a.ref,a.ref:visited{color:#554}

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 .5rem;border-radius:.33rem;
border:1px solid #CCC}
pre{
background:#EEE;padding:1rem;
white-space:pre-wrap;overflow-x:auto;
border:1px solid #DDD;border-radius:6px;
-moz-tab-size:4;-o-tab-size:4;tab-size:4}
.pre--small{font-size:.9rem;line-height:1.3rem}
code{
background:#EEE;padding:.05rem .4rem;
border:1px solid #DDD;border-radius:6px}
pre code{border:none;padding: 0;}
blockquote{
margin:0 .2rem;
border-left:2px solid;
padding:.4rem;padding-left:.8rem}
.page-nav{
float:right;
padding:14px;border:1px solid;
margin:1.4rem;margin-right:auto}
.sr{
position:absolute;overflow:hidden;
left:-9999px;top:auto;
width:1px;height:1px;
}
.vh{
position:absolute;
clip:rect(1px,1px,1px,1px);
height:1px;width:1px;
padding:2px 8px;overflow:hidden;
white-space:nowrap;
background:#FFF;z-index:10}
.vh:focus{
clip:auto;overflow:auto;
height:auto;width:auto}
.tblcon{overflow-x:auto}
footer {padding-bottom:.7rem}
footer p{margin:0}

table{text-align:left;width:100%;
border-collapse:collapse;
overflow-wrap:normal;
margin:24px 0}
td,th{border:1px solid #CCC;padding:9px 6px}
th{padding:12px}
thead tr{background:#FFF}
tbody tr:nth-child(odd){background:#EEE}
tbody tr:hover{background:#DDD}

.burger-container{
position:absolute;height:34px;width:36px;
cursor:pointer;top:25px;right:1.24rem;
position:fixed;background:#FFF;
border:2px solid #EEE;border-radius:6px;
z-index:9}
#burger-toggle,#burger-toggle~nav{display:none}
.burger{left:3px;top:7px}
.burger,.burger::after,.burger::before{
position:absolute;background:#000;
height:4px;width:30px;border-radius:2px;content:"";
transition:transform}
.burger::before{margin-top:8px}
.burger::after{margin-top:16px}
#burger-toggle:checked~nav{display:block}
#burger-toggle:checked+.burger-container .burger::before{margin-top:8px;transform:rotate(45deg)}
#burger-toggle:checked+.burger-container .burger::after{margin-top:8px;transform:rotate(-45deg)}
#burger-toggle:checked+.burger-container .burger{background:rgba(0,0,0,0)}

@media print{body{max-width:none}}
@media(min-width:720px){
 body{margin:.2rem auto}
 nav>a{margin-left:2rem;display:inline;border:none}
 nav>a:first-child{margin-left:0}
 ul li{margin:auto}
 .burger-container{display:none}
 #burger-toggle~nav,header hr{display:block}
}
@media(min-width:320px) and (max-width:719px){
 nav{height:100%;
 width:50%;min-width:250px;
 position:fixed;
 top:0;right:1.24rem;
 padding:85px 1.24rem 1.24rem;
 background:#FFF;border-left:1px solid #EEE;
 z-index:8}
 code{white-space:pre}
}
@media(max-width:320px){
 #burger-toggle~nav{display:block}
 .burger-container{display:none}
 header h1{margin-right:auto}
 body{overflow-wrap:anywhere}
 img{width:100%;height:auto}
}
@media{
 body{color:#CCC;background:#000000}
 a:link,a:visited{color:#9CF}
 a:hover,a:visited:hover{color:#C34}
 nav{background:#000000;border-color:#555}
 nav>a{border-color:#555}
 a.ref,a.ref:visited{color:#DDD}
 .burger-container{border:2px solid #000000;background:#000000;}
 .burger,.burger::after,.burger::before{background:#EEE}
 h1{color:#FFF}h2{color:#EEE}
 h3,h4,h5,h6{color:#DDD}
 td,th{border-color:#556}
 thead tr{background:#211F1C}
 tbody tr:nth-child(odd){background:#222}
 tbody tr:hover{background:#333}
 pre{background:#333;color:#EEE;border-color:#555}
 code{background:#333}
 .tag{border-color:#555;cursor:default}
}