@font-face
{
	font-family: "MixSerifCondense";
	font-stretch: condensed;
	src: local("MixSerifCondense"), url("/fonts/MixSerifCondense.ttf");
}

@keyframes hover1
{
	from { transform: translate(12px, 12px); }
	to { transform: translate(-12px, -12px); }
}

@keyframes hover2
{
	from { transform: translate(24px, 24px); }
	to { transform: translate(-24px, -24px); }
}

* {box-sizing: border-box;}

body, sup
{
	font-family: "Segoe UI", "DejaVu Sans", "Roboto", Arial, Helvetica, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
}

body
{
	background: #000;
	color: #fff;
	font-size: 12pt;
	line-height: 1.5;
	margin: 0;
	min-height: 100vh;
}

body, ul.cardlist li, nav
{
	display: -moz-box;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}

body, ul.cardlist li
{
	-moz-box-orient: vertical;
	-webkit-box-orient: vertical;
	-webkit-flex-direction: column;
	flex-direction: column;
}

::selection
{
	background-color: #138;
}

hr
{
	border: 0;
	border-top: 1pt solid #444;
	border-radius: 1pt;
	max-width: 5rem;
	margin: 2.5rem auto;
}

h1,h2,h3,h4,h5,h6
{
	font-weight: normal;
	margin: 0.8em 0 0.25em;
	text-align: center;
}

h1,h2,h3,nav a
{
	font-family: "MixSerifCondense", "Noto Serif", "Liberation Serif", "Times New Roman", serif;
	font-stretch: condensed;
	font-size-adjust: 0.438;
	/* workaround to make pixel fonts render better,
	 * however this is browser and OS-dependant */
	-webkit-filter: contrast(100.00001%);
	filter: contrast(100.00001%);
}
h4,h5,h6, #prophcontrol #txt
{
	font-family: "Consolas", "Roboto Mono", "Monaco", "SF Mono", "Menlo", monospace;
}
h1
{
	font-size: 36pt;
}
h2,h3,nav a
{
	font-size: 24pt;
}

code, pre
{
	background: #222;
	border-radius: 4px;
	font-family: "Consolas", "Roboto Mono", "Monaco", "SF Mono", "Menlo", monospace;
	padding: 1px 4px;
}

pre
{
	padding: 0.75em;
	-o-tab-size: 4;
	-moz-tab-size: 4;
	tab-size: 4;
}

.faint-text
{
	color: #888;
	-webkit-transition: color 500ms;
	transition: color 500ms;
}

ul.cardlist li:hover .faint-text
{
	color: #39c;
}

.huge
{
	font-size: 72pt;
}

.center
{
	text-align: center;
}
.blogimg
{
	display: block;
	margin: 1em auto;
	max-width: 100%;
}

#badges img, .pixel
{
	image-rendering: -o-crisp-edges;
	image-rendering: -moz-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: -webkit-crisp-edges;
	image-rendering: crisp-edges;
	image-rendering: pixelated;
}

main
{
	-webkit-flex-grow: 1;
	flex-grow: 1;
	overflow-x: hidden;
	padding: 1rem 0;
}

.content
{
	margin: 0 auto;
	padding: 0 1rem 1rem;
	width: 100%;
}

ul.cardlist
{
	list-style: none;
	padding:0;
}

ul.cardlist li::before, ul.cardlist li::after
{
	background: #06008d;
	border: 2px solid #7ff;
	border-radius: 0.5rem;
	content: "";
	opacity: 0;
	position: absolute;
	-webkit-transition: opacity 500ms;
	transition: opacity 500ms;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
}
ul.cardlist li::before
{
	animation: hover1 1.26s ease-in-out infinite alternate;
	z-index: -1;
}
ul.cardlist li::after
{
	animation: hover2 1.26s ease-in-out infinite alternate;
	z-index: -2;
}
ul.cardlist li:hover::before, ul.cardlist li:focus-within::before, ul.cardlist li:hover::after, ul.cardlist li:focus-within::after
{
	opacity: 0.2;
}

ul.cardlist li
{
	-moz-box-align: center;
	-webkit-box-align: center;
	-webkit-align-items: center;
	align-items: center;
	background: #171524;
	border: 2px solid #413e52;
	border-radius: 0.5rem;
	margin: 0 0 1rem;
	padding: 1rem 1.5rem;
	position: relative;
	-webkit-transition: border 500ms, background 500ms;
	transition: border 500ms, background 500ms;
}

ul.cardlist li:hover, ul.cardlist li:focus-within
{
	background: #06008d;
	border: 2px solid #7ff;
}

ul.cardlist h3
{
	margin: 0.5em 0 0.25em;
	text-align: center;
}
ul.cardlist img, ul.cardlist .img-placeholder
{
	max-width: 64px;
	max-height: 64px;
}
ul.cardlist img
{
	margin: 0;
}
.card-desc a
{
	position: relative;
	z-index: 2;
}
ul.cardlist a.mainlink
{
	content: "";
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
}
.card-desc
{
	margin: 0;
}

.nav-wrapper, .footer-wrapper
{
	background: #252334;
	width: 100%;
}

.footer-wrapper p
{
	text-align: center;
}

.nav-wrapper
{
	position: -webkit-sticky;
	position: sticky;
	top: 0;
	z-index: 100;
}

footer
{
	margin: 0 auto;
	max-width: 800px;
	padding: 2rem 1rem;
}

nav
{
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-moz-box-pack: center;
	-webkit-box-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	max-width: 800px;
	margin: 0 auto;
}

nav a
{
	padding: 0.2rem 1rem;
	text-transform: uppercase;
}
nav a:hover
{
	background-color: #413e52;
}

sup
{
	color: #ff0;
	font-size: 8pt;
	text-transform: uppercase;
}

.nav-here
{
	background-color: #171524;
	color: #0ff;
}

a[href], ul.cardlist li h3
{
	color: #0af;
	text-decoration: none;
	-webkit-transition: color 500ms, background-color 500ms;
	transition: color 500ms, background-color 500ms;
}
a[href]:hover, ul.cardlist li:hover h3
{
	color: #7ff;
}

.vid
{
	padding-bottom: 56.25%;
	position: relative;
}

.vid p::before
{
	content: "If this video doesn't load, click this "
}

.vid p::after
{
	content: " to watch it."
}

.vid iframe
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#prophcontrol
{
	background: #171524;
	border: 2px solid #413e52;
	border-radius: 0.5rem;
	display: none;
	font-size: 11pt;
	margin: 0 auto;
	max-width: 30rem;
	padding: 0.5rem 1.5rem;
}

#prophcontrol #txt
{
	font-size: 11pt;
	resize: none;
	text-align: center;
	width: 100%;
}

#prophcontrol #preset-container
{
	display: flex;
}

#prophcontrol #preset-container #preset
{
	flex-grow: 1;
	width: 100px;
}

#prophcontrol #preset, #prophcontrol input[type="file"]
{
	margin: 0 0.5em;
}

@media (prefers-reduced-motion)
{
	ul.cardlist li, .faint-text, a[href], ul.cardlist li h3
	{
		-webkit-animation: unset;
		animation: unset;
		-webkit-transition: unset;
		transition: unset;
	}

	ul.cardlist li::before, ul.cardlist li::after
	{
		display: none;
	}
}

@media only screen and (min-width: 600px)
{
	.content
	{
		max-width: 800px;
	}
	ul.cardlist li
	{
		-moz-box-orient: horizontal;
		-webkit-box-orient: horizontal;
		-webkit-flex-direction: row;
		flex-direction: row;
	}

	ul.cardlist h3
	{
		text-align: left;
	}

	ul.cardlist img, ul.cardlist .img-placeholder
	{
		min-width: 128px;
		min-height: 128px;
		margin: 1rem 1rem 1rem 0;
	}
}

@media only screen and (min-width: 400px)
{
	body
	{
		text-align: justify;
	}
	h1,h2,h3,h4,h5,h6
	{
		text-align: left;
	}
}

@media print
{
	body
	{
		background: #fff;
		color: #222;
	}
	* {box-sizing: initial;}

	main, .content
	{
		break-inside: auto;
		display: inline;
		margin: 0;
		padding: 0;
	}

	main
	{
		padding: 0 0 1rem;
	}

	a[href]
	{
		color: unset;
		text-decoration: underline;
	}

	h1,h2,h3,h4,h5,h6
	{
		break-after: avoid;
		text-align: left !important;
	}

	h1
	{
		font-size: 26pt;
	}
	h2
	{
		font-size: 22pt;
	}
	h3
	{
		font-size: 18pt;
	}

	/* https://css-tricks.com/snippets/css/print-url-after-links/ */
	a[href]::after
	{
		content: " (" attr(href) ") ";
		font-size: 10pt;
		text-decoration: none;
	}

	sup
	{
		color: red;
	}

	.nav-wrapper, #badges, a[href="#"]
	{
		display: none;
	}

	.card-desc, a.mainlink
	{
		width: 100%;
	}

	ul.cardlist a.mainlink
	{
		position: unset;
	}
	ul.cardlist a.mainlink::after
	{
		content: "Read more online: " attr(href);
	}

	ul.cardlist li
	{
		background: unset !important;
		border: 1pt solid #888 !important;
		/* seems to work on Chromium, but not on Firefox???
		   i give up.... */
		page-break-inside: avoid;
		break-inside: avoid;
	}

	ul.cardlist li::before, ul.cardlist li::after
	{
		display: none;
	}

	ul.cardlist img
	{
		display: none;
	}

	ul.cardlist h3
	{
		color: inherit !important;
	}

	.vid
	{
		padding: unset;
	}

	.vid iframe
	{
		display: none;
	}

	.vid p::before
	{
		content: "Visit this "
	}

	.vid p::after
	{
		content: " in a web browser to watch this video."
	}

	.footer-wrapper
	{
		background: inherit;
		margin: 0 auto;
	}

	footer
	{
		border-top: 1pt solid #888;
		padding: 1rem;
	}

	footer small::after
	{
		content: "This is a printed version of a page available at: https://sparronator9999.codeberg.page";
		display: block;
		text-align: center;
	}

	#prophcontrol
	{
		display: none !important;
	}
}