@font-face {
	font-family: "Doto";
	src: url("/asset/font/doto/doto-variable.woff2");
	font-weight: 100 900;
	font-variation-settings: "ROND" 0;
}

@font-face {
	font-family: "Recursive";
	src: url("/asset/font/recursive/recursive-variable.woff2");
	font-weight: 300 1000;
	font-variation-settings: "MONO" 0, "CASL" 0;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("/asset/font/atkinson/atkinson-hyperlegible-next-variable.woff2");
	font-weight: 200 800;
	font-style: normal;
}

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("/asset/font/atkinson/atkinson-hyperlegible-next-italic-variable.woff2");
	font-weight: 200 800;
	font-style: italic;
}

:root {
	--default-font: "Recursive", "Open Sans", "Noto Sans", sans-serif;
	--article-font: "Atkinson Hyperlegible Next", "Open Sans", "Noto Sans", sans-serif;
	--content-background: #18172a;
	--content-text: #eeeeee;
	--negative-text: #000000;
	--accent-dim: #615cb8;
	--accent-dim-alpha: #615cb880;
	--accent-dim-fg: var(--content-text);
	--accent-bright: #1ed65b;
	--accent-bright-fg: var(--negative-text);
	--button-background: #00000080;
	--light-text-shadow: 1px 1px 1px #000000a0;
	--light-image-shadow: 1px 1px 0.5px #00000080;
}

html {
	font-family: var(--default-font);
	font-size: 16px;
	font-weight: 400;
	color: var(--content-text);
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	padding: 0 2rem;
	background: url("/asset/graphics/background.png") 0% 0% / 256px 2048px repeat-x, #304b3d;
}

header, main, footer {
	box-sizing: border-box;
	max-width: 64rem;
	margin: 0 auto;
}

header {
	margin-bottom: 1rem;
}

header .dotmatrixbox-inner {
	padding: 1rem;
}

.dotmatrixbox-outer {
	border: solid 0.5rem #1e1d26;
}

.dotmatrixbox-inner {
	border: solid 1rem black;
	background: hsl(35, 20%, 10%);
	font-family: "Doto", var(--default-font);
	font-weight: 800;
	font-size: 1.25rem;
	color: hsl(35, 90%, 60%);
}

header hgroup {
/* 	margin: 0 0 0.5rem 0; */
}

header hgroup * {
	margin: 0;
}

header h1 {
	font-family: inherit;
	font-weight: 800;
	font-size: 3rem;
}

header nav * {
	margin: 0;
}

header nav ul {
	display: flex;
	padding: 0;
	flex-flow: row wrap;
	justify-content: start;
	list-style: none;
}

header nav ul li {
/* 	margin: 0 2rem 0 0; */
	font-size: 1.75rem;
}

header a {
	margin: 0 1.5rem 0 -0.25rem;
	padding: 0 0.25rem;
	font-weight: 800;
	text-decoration: none;
	color: hsl(35, 90%, 60%);
}

header a:hover {
	background: hsl(35, 90%, 60%);
	color: black;
}

main {
	padding: 2rem;
	background: var(--content-background);

}

.linkgrid-split {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-gap: 1rem;
}

.linkgrid {
	display: grid;
	grid-auto-rows: 4rem;
	grid-gap: 1rem;
}

.linkgrid-primary {
	grid-template-columns: subgrid;
	grid-column: 1 / span 2;
}

.linkgrid-social {
	grid-template-columns: subgrid;
	grid-column: 3 / span 1;
}

article h1 {
	margin-top: 0;
}

article {
	text-align: justify;
	font-family: var(--article-font);
	font-size: 1.125rem;
	font-weight: 350;
	line-height: 1.4;
}

article blockquote {
	margin: 1.0rem 0 1.0rem 0;
	padding: 0.5rem 2.5rem 0.5rem 2.5rem;
	background: hsla(250, 75%, 60%, 10%);
	border: solid 0 0 0 0.5rem white;

}

footer {
	text-shadow: var(--light-text-shadow);
}

footer p {
	margin: 0.5rem 0;
	font-size: 0.875rem;
}

h1, h2 {
	font-family: var(--default-font);
	font-weight: 500;
	font-size: 2.0rem;
	line-height: normal;
}

a {
	padding: 0 0.1rem;
	text-decoration: none;
	color: var(--accent-bright);
}

a:hover {
	background: var(--accent-bright);
	color: var(--accent-bright-fg);
}

.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-height: 3rem;
	padding: 0 1rem;
	background: var(--button-background);
	border: solid 1px var(--accent-dim);
	box-shadow: 1px 1px 0 1px var(--button-background);
	color: var(--accent-dim-fg);
	font-family: var(--default-font);
	font-weight: 500;
	font-size: 1.25rem;
	text-decoration: none;
	text-shadow: var(--light-text-shadow);
	text-align: center;
}

.button:hover {
	background: var(--accent-dim);
	color: var(--accent-dim-fg);
}

.button-icon {
	height: 1.75rem;
	margin: 0 0.5rem 0 0;
	filter: drop-shadow(var(--light-image-shadow));
}

.button.wide {
	grid-column: span 2;
}

.button.banner {
	grid-column: span 2;
	grid-row: span 2;
	padding: 0;
}

.banner-image {
	width: 100%;
	height: 100%;
	background: var(--banner-image) center/cover no-repeat;
}

.banner-hoverbox {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	padding-bottom: 0.75rem;
	align-items: flex-end;
	background: transparent;
}

.banner-hoverbox:hover {
	background: var(--accent-dim-alpha);
}