@font-face {
	font-family: 'glitch';
	src: url('/assets/glitch.ttf');
}

html, body {
	font-family: sans;
	width: 100%;
	height: calc(100% - 0.5em);
	margin: 0;
	padding: 0;
	/*background: url("assets/starnight.gif");*/
	/*background-color: hsl(150deg 30% 25%);*/
	/*background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);*/
	background-color: hsl(211, 48%, 44%);
	line-height: 2rem;
	font-size: large;
	/*font-family: Calibri, sans-serif, "Times New Roman";*/
}

article {
	max-width: 50rem;
	margin: 0.4rem auto !important;
}

/*
.fwrap {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-evenly;
	align-items: stretch;
	align-content: flex-start;
}
*/

:target {
	border-color: hsl(240deg 100% 75%);
}

footer {
	/*height: 60%;*/
	/*animation: fadeIn 1s;*/
}


nav {
	display: grid;
	/*width: calc(66% - 1.5em);
	margin: 0.4rem 17%;*/
	margin: 0.4rem 1em;
	padding: 0;
	/*animation: fadeIn 1s;*/
	/*display: flow-root;*/
}

header {
	/*animation: fadeInHeader 5s;*/
}

footer p {
	display: inline;
}

header, article, .box {
	/*width: calc(66% - 1.5em);*/
	/*margin: 0.4rem 17%;*/
	margin: 0.4rem 4px;
	padding: 0.5rem;
	border: 4px solid hsl(148deg 30% 50%);
	border: 4px solid hsl(211, 48%, 54%);
	background-color: #fff;
	border-radius: 1rem;
}

.box h1, .box h2, article h1, article h2, header h1, header h2, nav h1, nav h2, article h3, article h4 {
	margin: 0 auto;
	padding: 0;
}

.box h2, article h2, header h2, nav h2 {
	font-style: italic;
}

.box p, article p, header p, nav p {
	margin: 0;
	margin-bottom: 0.5em;
}

.post {
	margin: 0.1em 0 0 0;
	padding: 0.25em 0.2em;
	background-color: #bbb;
}

.post h1 {
	margin: 0;
	padding: 0;
}

.post p {
	margin: 0;
	padding: 0;
}

a {
	color: #700;
}

a:visited {
	color: black;
}

a:hover {
	color: #070;
}

.box span {
	color: #004d00;
}

pre {
	line-height: initial;
	font-size: medium;
	overflow-x: auto;
	margin: 0;
	padding: 0;
}

asmc {
	color: #e00;
}

asmr {
	color: darkgreen;
}

asml {
	color: hsl(271deg 76% 37%);
}

asmi {
	color: #0000e4;
}

asmd {
	color: maroon;
}

table {
	/*font-family: arial, sans-serif;*/
	border-collapse: collapse;
	width: 100%;
}

td, th {
	border: 1px solid hsl(160deg 20% 20%);
	text-align: left;
	padding: 8px;
}

tr:nth-child(even) {
	background-color: #bbb;
}

footer a, footer a:visited {
	background-color: #fff;
	margin: 4px;
	padding: 0.25rem;
	color: black;
	border: 4px solid hsl(148deg 30% 50%);
	/*border-radius: 0.5rem;*/
}

footer a:hover {
	color: #070;
}

header, nav {
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: white;
}

header {
	padding: 0 0.2rem;
}

header h1 {
	font-size: 1.5em;
	margin-inline-start: 0;
	margin-inline-end: 0;
	margin-block-start: 0;
	margin-block-end: 0;
}

nav {
	line-height: 1.2em;
	border-bottom: 2px solid hsl(148deg 30% 50%);
	border-bottom: 2px solid hsl(211, 48%, 54%);
}

@media (prefers-color-scheme: dark) {
	html, body {
		background-color: #120c20;
	}

	nav {
		background-color: #261e37;
		border-color: #443663;
	}

	nav a, nav a:visited {
		background: linear-gradient(0, hsl(210deg 50% 10%), hsl(210deg 50% 34%));
	}

	nav a:hover {
		background: linear-gradient(0, hsl(210deg 50% 34%), hsl(210deg 50% 10%));
	}

	header, article, .box, footer a, footer a:visited, footer .ring a, footer .ring a:visited {
		background-color: #261e37;
		color: #f0f8ffd1;
		text-shadow: 0 0 0px white;
		font-family: sans;
		border-color: #443663;
	}

	a {
		color: #f0f8ffd1;
		text-shadow: 0 0 1px white;
	}

	a:visited {
		text-shadow: 0 0 0px white;
		color: #d98518;
	}

	footer a:hover, a:hover {
		color: lime;
	}
}

/*
nav :first-child {
	border-radius: 0.5em 0 0 0.5em;
}

nav :last-child {
	border-radius: 0 0.5em 0.5em 0;
}
*/

section.r {
	/*display: flex;*/
	flex-flow: row wrap;
	justify-content: space-evenly;
}

section {
	/*display: flex;*/
	flex-flow: row;
	justify-content: space-evenly;
	align-items: flex-start;
}

section article {
	/*max-width: 30%;*/
	flex-grow: 1;
}

@media (max-width: 55em) {
	section {
		flex-flow: row wrap;
	}
}