* {
	/* outline: 1px solid red; */
	font-family: monospace;
}

:root[style*="--dark-theme: true"] {
	--bg-color: black;
	--text-color: white;
	--strings-color: lightgreen;
}

:root[style*="--dark-theme: false"] {
	--bg-color: white;
	--text-color: black;
	--strings-color: green;
}

html,
body {
	color: var(--text-color, white);
	background: var(--bg-color, white);
	margin: 0;
	height: 100%;
}

body {
	display: grid;
	grid-template-columns: 1fr min(100%, 800px) 1fr;
	min-height: 100vh;
}

/* .side {} */

.content {
	display: flex;
	flex-direction: column;
	height: 100vh;
}


header,
main,
footer {
	padding: 1rem;
}

header {
	border-bottom: 2px dashed var(--text-color);
}

footer {
	border-top: 2px dashed var(--text-color);
}

footer {
	margin-bottom: none;
	margin-top: auto;
}

footer table {
	table-layout: fixed;
	width: 100%;
}

footer td {
	text-align: center;
}

a:link {
	text-decoration: none;
	color: var(--text-color);
}

a:visited {
	color: gray;
}

a:hover {
	text-decoration: underline;
	background-color: var(--text-color);
	color: var(--bg-color);
}

.banner {
	text-align: center;
	user-select: none;
	cursor: pointer;
}

ul {
	list-style: square;
}

img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	border-radius: 2%;
}

@media (max-width: 768px) {
	body {
		grid-template-columns: 1fr;
	}

	.side {
		display: none;
	}

	.theme {
		display: none;
	}
}

@media print {
	body {
		display: flex;
		flex-direction: column;
	}

	header {
		order: 1;
		border-bottom: none;
	}

	footer {
		order: 2;
		margin-top: 0;
		border-top: none;
		border-bottom: 2px dashed var(--text-color);
	}

	main {
		order: 3;
	}

	.theme {
		display: none;
	}
}

.theme {
	position: fixed;
	right: 10%;
	top: 10%;
	border-style: dashed;
	border-color: var(--text-color);
	background-color: transparent;
	cursor: pointer;
	font-size: 25px;
}

pre.highlight {
	border-style: dashed;
	border-color: var(--text-color);
	border-width: 2px;
	padding: 5px;
}

.c {
	color: #998;
	font-style: italic
}


.err {
	color: red;
	background-color: var(--bg-color)
}


.k {
	font-weight: bold
}


.o {
	color: var(--text-color);
}


.cm {
	color: #998;
	font-style: italic
}


.cp {
	color: #999;
	font-weight: bold
}


.c1 {
	color: #998;
	font-style: italic
}


.cs {
	color: #999;
	font-weight: bold;
	font-style: italic
}


.gd {
	color: var(--text-color, black);
	background-color: #fdd
}


.gd .x {
	color: var(--text-color, black);
	background-color: #faa
}


.ge {
	font-style: italic
}


.gr {
	color: #a00
}


.gh {
	color: #999
}


.gi {
	color: var(--text-color, black);
	background-color: #dfd
}


.gi .x {
	color: var(--text-color, black);
	background-color: #afa
}


.go {
	color: #888
}


.gp {
	color: #555
}


.gs {
	font-weight: bold
}


.gu {
	color: #aaa
}


.gt {
	color: #a00
}


.kc {
	font-weight: bold
}


.kd {
	font-weight: bold
}


.kp {
	font-weight: bold
}


.kr {
	font-weight: bold
}


.kt {
	color: #458;
	font-weight: bold
}


.m {
	color: #099
}


.s,
.s2 {
	color: var(--strings-color);
}


.na {
	color: #008080
}


.nb {
	font-weight: bold;
	color: var(--text-color, black);
}


.nc {
	color: #458;
	font-weight: bold
}


.no {
	color: #008080
}


.ni {
	color: #800080
}


.ne {
	color: #900;
	font-weight: bold
}


.nf {
	color: #900;
	font-weight: bold
}


.nn {
	color: #555
}


.nt {
	color: var(--text-color);
	font-weight: bold;
}


.nv {
	color: var(--text-color);
}


.ow {
	font-weight: bold
}


.w {
	color: #bbb
}


.mf {
	color: #099
}


.mh {
	color: #099
}


.mi {
	color: #099
}


.mo {
	color: #099
}


.sb {
	color: #d14
}


.sc {
	color: #d14
}


.sd {
	color: #d14
}

.se {
	color: #d14
}


.sh {
	color: #d14
}


.si {
	color: #d14
}


.sx {
	color: #d14
}


.sr {
	color: #009926
}


.s1 {
	color: #d14
}


.ss {
	color: #990073
}


.bp {
	color: #999
}


.vc {
	color: #008080
}


.vg {
	color: #008080
}


.vi {
	color: #008080
}


.il {
	color: #099
}