html,body { height:100% }
html { font-size:14px }
body {
margin:.2rem;
max-width:48rem;
padding:0 .62rem;
font:1.2rem/1.62 sans-serif
}
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 auto 1.2rem }

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-position:inside
}
ul li{ margin: 0.35rem }
li>ul { margin-left:1em }

.tag {
font-size:.8rem;
padding:.2rem;border-radius:.33rem;
background-color:#191919;color:#FFF;
vertical-align:middle
}

pre{
background-color: #191919;color: #FFF;
white-space: pre-wrap;overflow-x: auto;
padding: 12px; border: 1px solid #FFF;
}

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

footer p { margin:0 }
body {
display:-webkit-flex;display:-ms-flexbox;display:flex;
flex-direction:column
}
main { flex:1 0 auto }

@media print {body {max-width:none}}

@media (min-width: 600px) {
body { margin:.2rem auto; }
nav>a { margin-left:2rem; padding: auto; display: inline; border: none }
nav>a:first-child { padding:1rem 0; padding-left:0; margin-left:0 }
ul li{ margin: 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-color:#FFF;color:#000}
}