/**
 * Reset
 */
*, :after, :before {
	box-sizing: border-box
}

* {
	margin: 0
}

body, html {
	background-color: #0c0d0e;
	background-color: var(--c-black);
	height: 100%;
	overflow-x: hidden;
	scroll-behavior: smooth
}

body {
	font-size: .875rem;
	line-height: 1.25;
	text-rendering: geometricPrecision;
	-ms-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	-webkit-font-smoothing: subpixel-antialiased;
	-moz-osx-font-smoothing: grayscale
}

@media screen and (-webkit-min-device-pixel-ratio:2),
screen and (min-resolution:2dppx) {
	body {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased
	}
}

canvas, img, picture, svg, video {
	display: block;
	font-style: italic;
	height: auto;
	max-width: 100%
}

button, input, select, textarea {
	font: inherit
}

h1, h2, h3, h4, h5, h6, p {
	overflow-wrap: break-word
}

a {
	color: inherit;
	text-decoration: none
}

a, a:focus, a:hover {
	transition: color var(--motion-transition) .3s
}

a:focus, a:hover {
	outline: none
}

a:focus-visible {
	outline: none;
	transition: color var(--motion-transition) .3s
}

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto
}

@media (prefers-reduced-motion:reduce) {
	 html:focus-within {
		 scroll-behavior: auto
	 }

	 *, :after, :before {
		 animation-duration: .01ms !important;
		 animation-iteration-count: 1 !important;
		 scroll-behavior: auto !important;
		 transition-duration: .01ms !important;
		 transition: none
	 }
 }

/**
 * Typography
 */
@font-face {
	font-family: "Departure Mono";
	font-display: swap;
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	src: local('Departure Mono Regular'), local('DepartureMono-Regular'),
		url("/fonts/DepartureMono.woff2") format("woff2"),
		url("/fonts/DepartureMono.woff") format("woff"),
		url("/fonts/DepartureMono.ttf") format("ttf"),
		url("/fonts/DepartureMono.svg#DepartureMono-Regular") format("svg");
}

/**
 * Theme
 */
:root {
	--c-gray: #999999;
	--c-white: #FFF;
	--c-black: #0C0D0E;
}

body {
	display: grid;
	position: relative;
	height: 100dvh;
	width: 100dvw;
	padding: 16px;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr 0.5fr;
	gap: 0 0;
	grid-template-areas: "Header" "Navigation" "Footer";
    font-family: "Departure Mono", "Roboto Mono", monospace;
    text-transform: uppercase;
    color: #494b4e;
	color: var(--c-gray);
}

header {
	display: flex;
	flex-direction: column;
	grid-area: Header;
}

header img {
	width: 100%;
}

header .Bottom {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	flex: 1;
}

:is(header .Bottom) .Row {
	margin-bottom: 16px;
	margin-left: 8px
}

:is(:is(header .Bottom) .Row) dd, :is(:is(header .Bottom) .Row) dt {
	display: list-item;
	list-style-type: "░";
	padding-inline-start: 2ch
}

nav {
	display: inline-flex;
    flex-direction: column;
    justify-content: space-around;
	grid-area: Navigation;
}

nav .Top {
	align-self: flex-end;
}

:is(nav .Top) a {
	animation: blinker 3s infinite
}

:is(:is(nav .Top) a):focus,
:is(:is(nav .Top) a):hover {
	background-color: #fff !important;
	background-color: var(--c-white) !important;
	color: #0c0d0e !important;
	color: var(--c-black) !important
}

:is(:is(nav .Top) a):focus-visible {
	background-color: #fff !important;
	background-color: var(--c-white) !important;
	color: #0c0d0e !important;
	color: var(--c-black) !important
}

nav .Bottom {
	align-self: flex-start;
}

main {
	display: none;
}

footer {
	display: flex;
	grid-area: Footer;
	justify-content: flex-end;
}

footer p {
	align-self: flex-end;
}

/**
 * Responsive
 */
@media (min-width: 1024px) {
	body {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 1fr;
		grid-template-areas: "Header Navigation" "Content Footer";
	}
	
	header img {
		margin-bottom: 16px;
	}

	nav {
		display: flex;
		justify-content: space-between;
	}

	nav .Top {
		align-self: flex-start;
	}

	nav .Bottom {
		align-self: flex-end;
	}

	main {
		display: flex;
		grid-area: Content;
		justify-content: end;
		align-items: end;
	}
}

/**
 * Animations
 */
@keyframes blinker {
	0%,
	49% {
		background-color: #0c0d0e;
		background-color: var(--c-black);
		color: #494b4e;
		color: var(--c-gray)
	}

	50%,
	to {
		background-color: #fff;
		background-color: var(--c-white);
		color: #0c0d0e;
		color: var(--c-black)
	}
}