/* CSS reset, based on various css-resets out there */
html,body,div,form,fieldset,legend,label{
	margin: 0;
	padding: 0;
}
table{
	border-collapse: collapse;
	border-spacing: 0;
}
th,td{
	text-align: left;
	vertical-align: top;
	padding: 0;
}
h1,h2,h3,h4,h5,h6,th,td,caption{
	font-weight: normal;
}
img{
	border: 0;
	max-width: 100%;
}
textarea{
	white-space: revert;
}
button,input,select{
	margin: 0;
}
ol,ul,menu{
	list-style: none;
	margin: 0;
	padding: 0;
}
meter{
	-webkit-appearance: revert;
	appearance: revert;
}
:where([hidden]){
	display: none;
}
:where([contenteditable]){
	-moz-user-modify: read-write;
	-webkit-user-modify: read-write;
	overflow-wrap: break-word;
	-webkit-line-break: after-white-space;
}
:where([draggable="true"]){
	-webkit-user-drag: element;
}

/* cherry picked from https://watercss.kognise.dev/ */
:root{
	--background: #efefef;
	--background-alt: #f7f7f7;
	--button-base: #d0cfcf;
	--button-hover: #9b9b9b;
	--form-placeholder: #949494;
	--form-text: #1d1d1d;
	--links: #0076d1;
	--border: #dbdbdb;
	--focus: #0096bfab;
	--animation-duration: 0.1s;
}
@media (prefers-color-scheme: dark){
:root{
	--background: #161f27;
	--background-alt: #1a242f;
	--button-base: #0c151c;
	--button-hover: #040a0f;
	--form-placeholder: #a9a9a9;
	--form-text: #fff;
	--links: #41adff;
	--border: #526980;
}}
body{
/*	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Segoe UI Emoji', 'Apple Color Emoji', 'Noto Color Emoji', sans-serif;*/
/*	font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;*/
	font-family:-apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
	font-size:12pt;
	line-height:1.4;
	word-wrap:break-word;
	text-rendering:optimizeLegibility;
}
body{
	color: #000;
}
@media (prefers-color-scheme:dark){
body{
	color: #fff;
}}
button,input,textarea{
transition:
	background-color 0.1s linear,
	border-color 0.1s linear,
	color 0.1s linear,
	box-shadow 0.1s linear,
	transform 0.1s ease;
transition:
	background-color var(--animation-duration) linear,
	border-color var(--animation-duration) linear,
	color var(--animation-duration) linear,
	box-shadow var(--animation-duration) linear,
	transform var(--animation-duration) ease;
}
h1{
	font-size: 2.2em;
	margin-top: 0;
}
h1,h2,h3,h4,h5,h6{
	margin-bottom: 12px;
	margin-top: 24px;
}
h1,h2,h3,h4,h5,h6,b,strong,th{
	font-weight: 600;
}
q::before{
	content: none;
}
q::after{
	content: none;
}
blockquote,q{
	border-left: 4px solid var(--focus);
	margin: 1.5em 0;
	padding: 0.5em 1em;
	font-style: italic;
}
blockquote > footer{
	font-style: normal;
	border: 0;
}
blockquote cite{
	font-style: normal;
}
address{
	font-style: normal;
}
a > code,a > strong{
	color: inherit;
}
i,em{
	font-style: italic;
}
b,strong{
	font-weight: bold;
}

button,
select,
input[type='submit'],
input[type='reset'],
input[type='button'],
input[type='checkbox'],
input[type='range'],
input[type='radio']{
	cursor: pointer;
	appearance: revert;
}
input,
select{
	display: block;
}
[type='checkbox'],
[type='radio']{
	display: initial;
}
input,button,textarea,select{
	color: var(--form-text);
	background-color: var(--background);
	font-family: inherit;
	font-size: inherit;
	margin-right: 6px;
	margin-bottom: 6px;
	padding: 10px;
	border: none;
	border-radius: 6px;
	outline: none;
}
button,
input[type='submit'],
input[type='reset'],
input[type='button']{
	background-color: var(--button-base);
	padding-right: 30px;
	padding-left: 30px;
}
button:hover,
input[type='submit']:hover,
input[type='reset']:hover,
input[type='button']:hover{
	background: var(--button-hover);
}
input[type='color']{
	min-height: 2rem;
	padding: 8px;
	cursor: pointer;
}
input[type='checkbox'],
input[type='radio']{
	height: 1em;
	width: 1em;
}
input[type='radio']{
	border-radius: 100%;
}
input{
	vertical-align: top;
}
label{
	vertical-align: middle;
	margin-bottom: 4px;
	display: inline-block;
}
input:not([type='checkbox']):not([type='radio']),
input[type='range'],
select,
button,
textarea{
	-webkit-appearance: none;
}
textarea{
	display: block;
	margin-right: 0;
	box-sizing: border-box;
	resize: vertical;
}
textarea:not([cols]){
	width: 100%;
}
textarea:not([rows]){
	min-height: 40px;
	height: 140px;
}

input:focus,
select:focus,
button:focus,
textarea:focus{
	box-shadow: 0 0 0 2px var(--focus);
}
input[type='checkbox']:active,
input[type='radio']:active,
input[type='submit']:active,
input[type='reset']:active,
input[type='button']:active,
input[type='range']:active,
button:active{
	transform: translateY(2px);
}
input:disabled,
select:disabled,
button:disabled,
textarea:disabled{
	cursor: not-allowed;
	opacity: 0.5;
}
::-moz-placeholder,
::-ms-input-placeholder,
::placeholder{
	color: var(--form-placeholder);
}
fieldset{
	border: 1px var(--focus) solid;
	border-radius: 6px;
	margin: 0;
	margin-bottom: 12px;
	padding: 10px;
}
legend{
	font-size: 0.9em;
	font-weight: 600;
}
input[type='range']{
	margin: 10px 0;
	padding: 10px 0;
	background: transparent;
}
input[type='range']:focus{
	outline: none;
}
input[type='range']::-webkit-slider-runnable-track{
	width: 100%;
	height: 9.5px;
	-webkit-transition: 0.2s;
	transition: 0.2s;
	background: var(--background);
	border-radius: 3px;
}
input[type='range']::-webkit-slider-thumb{
	box-shadow: 0 1px 1px #000, 0 0 1px #0d0d0d;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--border);
	-webkit-appearance: none;
	margin-top: -7px;
}
input[type='range']:focus::-webkit-slider-runnable-track{
	background: var(--background);
}
input[type='range']::-moz-range-track{
	width: 100%;
	height: 9.5px;
	-moz-transition: 0.2s;
	transition: 0.2s;
	background: var(--background);
	border-radius: 3px;
}
input[type='range']::-moz-range-thumb{
	box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--border);
}
input[type='range']::-ms-track{
	width: 100%;
	height: 9.5px;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper{
	background: var(--background);
	border: 0.2px solid #010101;
	border-radius: 3px;
	box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
}
input[type='range']::-ms-thumb{
	box-shadow: 1px 1px 1px #000, 0 0 1px #0d0d0d;
	border: 1px solid #000;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	background: var(--border);
}
input[type='range']:focus::-ms-fill-lower,
input[type='range']:focus::-ms-fill-upper{
	background: var(--background);
}
a{
	text-decoration: none;
	color: var(--links);
}
a:hover{
	text-decoration: underline;
}
/* TODO: code,samp,time,var,kbd */
p{
    margin-block: 1em;
}
img,
video{
	max-width: 100%;
	height: auto;
}
hr{
	margin-block: 0.5em 0.5em;
    margin-inline: auto auto;
	border: none;
	border-top: 1px solid var(--border);
}
table{
	border-collapse: collapse;
	margin-bottom: 10px;
	width: 100%;
	table-layout: fixed;
}
table caption{
	text-align: left;
}
td,th{
	padding: 6px;
	text-align: left;
	vertical-align: top;
	word-wrap: break-word;
}
thead{
	border-bottom: 1px solid var(--border);
}
tfoot{
	border-top: 1px solid var(--border);
}
details[open] > summary:first-of-type {
    list-style-type: disclosure-open;
}
details > summary:first-of-type {
    display: list-item;
    counter-increment: list-item 0;
    list-style: inside disclosure-closed;
}
/* TODO: ::selection,dialog,footer */
@media print{
	body,
	pre,
	code,
	summary,
	details,
	button,
	input,
	textarea{
	  background-color: #fff;
	}
	button,
	input,
	textarea{
	  border: 1px solid #000;
	}
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	pre,
	code,
	button,
	input,
	textarea,
	footer,
	summary,
	strong{
	  color: #000;
	}
	summary::marker{
	  color: #000;
	}
	summary::-webkit-details-marker{
	  color: #000;
	}
	tbody tr:nth-child(even){
	  background-color: #f2f2f2;
	}
	a{
	  color: #00f;
	  text-decoration: underline;
	}
}