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.2rem/1.62 sans-serif;color:#444;
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;
border-top:1px dotted #211F1C}
nav>a:first-child{border:none}

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}
a:link,a:visited{color:#07C}
a:hover,a:visited:hover{color:#1AE}

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}
code{
background:#EEE;padding:.2rem;
border:1px solid #DDD;border-radius:6px}
pre code{border:none}
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 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 300ms cubic-bezier(.4,1,.5,1)}
.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;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(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}
}
@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(prefers-color-scheme:dark){
 body{color:#CCC;background:#211F1C}
 a:link,a:visited{color:#9CF}
 a:hover,a:visited:hover{color:#C34}
 nav{background:#211F1C;border-color:#555}
 nav>a{border-color:#555}
 .burger-container{border:2px solid #555;background:#555;}
 .burger,.burger::after,.burger::before{background:#EEE}
 h1{color:#FFF}h2{color:#EEE}
 h3,h4,h5,h6{color:#DDD}
 td,th{border-color:#444}
 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}
}

/* Form stuff */
/* If I do a CSS framework, it'll need to have a reset too... */
/* e.g. https://github.com/necolas/normalize.css/blob/master/normalize.css 
https://byby.dev/normalize-css#:~:text=css%23css%2Dresets-,Normalize.,experience%20for%20each%20web%20browser.
https://www.joshwcomeau.com/css/custom-css-reset/
*/
form{
border:1px solid;
padding: 1rem;
}
input,select,textarea{
font:1.2rem/1.62 sans-serif;color:#444;
border:1px solid #CCC;
}
textarea{
resize: vertical;
}

input,select,textarea{
background: #EEE;
border: 2px solid #444;
box-sizing: border-box;
color: #444;
display: block;
line-height: 1;
vertical-align: top;
transition-duration:.2s;
}
input,textarea{
width:100%;
}
input[type="checkbox"]{
display:inline-block;
}
input:focus,select:focus,textarea:focus {
	border-color: #9CF;
}
@media(min-width:720px){
 input,select,textarea{
 display:inline-block;
 max-width:50%; /* so half it can be, with margins factored in... */
 max-width:346.8px;
 }
 input,textarea{
 width:auto;
 }
}
@media(prefers-color-scheme:dark){
 input,select,textarea{
 background:#CCC;border-color:#CCC;
 }
}