@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-Light.woff2') format('opentype');
	font-weight: 300;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-Regular.woff2') format('opentype');
	font-weight: 400;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-Oblique.woff2') format('opentype');
	font-weight: 400;
	font-style: oblique;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-Medium.woff2') format('opentype');
	font-weight: 500;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-SemiBold.woff2') format('opentype');
	font-weight: 600;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-Bold.woff2') format('opentype');
	font-weight: 700;
}

@font-face {
	font-family: 'Berkeley Mono';
	src: url('/static/font/BerkeleyMono-ExtraBold.woff2') format('opentype');
	font-weight: 800;
}

:root {
	--family:
		'Berkeley Mono',
		"Cascadia Mono", "Segoe UI Mono",
		"Ubuntu Mono",
		"Roboto Mono",
		Menlo, Monaco, Consolas,
		ui-monospace,
		monospace;
	--color-fg: #313131;
	--color-bg: #f0f0f0;
	--color-faded: hsl(from var(--color-fg) h s 60%);
	--color-code: hsl(from var(--color-bg) h s 85%);
	--dash-border: 4px double var(--color-fg);
	--dash-image: repeating-linear-gradient(180deg, var(--color-fg), var(--color-fg) 4px, transparent 4px, transparent 8px);
	--dash-repeat: repeat-y;
	--dash-size: 1px 100%;
	--center-width: 70ch;
}

* {
	box-sizing: border-box;
}

* {
	font-family: var(--family);
}

html,
body {
	background-color: var(--color-bg);
	color: var(--color-fg);
}

html {
	height: 100%;
}

body {
	min-height: 100%;
}


p,
ul,
ol {
	font-weight: 500;
}

i,
em {
	font-style: oblique;
}

b {
	font-style: normal;
	font-weight: 800;
}

h1,
h2,
h3,
h4,
h5 {
	font-size: 1rem;
	font-weight: 800;
	text-transform: uppercase;
}

h1 {
	font-size: 1.2rem;
}

body {
	display: grid;

	grid-template-columns: 1rem minmax(auto, calc(100vw - 2rem)) 1rem;
	grid-template-rows: 6rem 6rem auto 6rem;
	grid-template-areas:
		'mobile-top-left nav mobile-top-right'
		'top-left header top-right'
		'middle-left main middle-right'
		'bottom-left footer bottom-right';

	nav {
		grid-area: nav;
	}

	header {
		grid-area: header;
	}

	main {
		grid-area: main;
	}

	footer {
		grid-area: footer;
	}


	.mobile-top-left {
		grid-area: mobile-top-left;
	}

	.mobile-top-right {
		grid-area: mobile-top-right;
	}

	.top-left {
		grid-area: top-left;
	}

	.top-right {
		grid-area: top-right;
	}

	.middle-left {
		grid-area: middle-left;
	}

	.middle-right {
		grid-area: middle-right;
	}

	.bottom-left {
		grid-area: bottom-left;
	}

	.bottom-right {
		grid-area: bottom-right;
	}

}

@media screen and (min-width: 900px) {
	body {

		grid-template-columns: 1fr minmax(auto, var(--center-width)) 1fr;
		grid-template-rows: 6rem auto 6rem;
		grid-template-areas:
			'top-left header top-right'
			'nav main middle-right'
			'bottom-left footer bottom-right';

		.middle-left,
		.mobile-top-left,
		.mobile-top-right {
			display: none;
			grid-area: unset;
		}
	}
}

body {

	nav,
	header,
	main,
	footer {
		/* border: 1px solid red; */
		padding: 1rem;
	}

	header {
		display: flex;
		align-items: end;

		.inner {
			display: flex;
			width: 100%;
			align-items: baseline;
			gap: 1rem;
			justify-content: space-between;

			h1 {
				flex-basis: 30%;
			}
		}
	}

	nav {
		display: flex;
		justify-content: end;
		align-items: end;
		text-transform: uppercase;
		font-weight: 600;
		font-size: .95rem;

		a {
			padding: 4px;
		}

		ul {
			padding-inline-start: 0;

			li {
				list-style: none;
			}

			display: flex;
			gap: 1rem;
		}

		border-bottom: var(--dash-border);
	}

	footer {
		font-weight: 300;
		font-size: .90rem;
		color: var(--color-faded);
		border-top: var(--dash-border);
	}

	header {
		border-bottom: var(--dash-border);
	}

	.mobile-top-left {
		background-position: right top 2px;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
		border-bottom: var(--dash-border);
	}

	.mobile-top-right {
		background-position: left top 2px;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
		border-bottom: var(--dash-border);
	}

	.top-left {
		background-position: right top;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
	}

	.top-right {
		background-position: left top;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
	}

	.middle-left {
		background-position: right top;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
		border-top: var(--dash-border);
		margin-top: -.25rem;
		border-bottom: var(--dash-border);
		margin-bottom: -.25rem;
	}

	.middle-right {
		background-position: left top;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
		border-top: var(--dash-border);
		margin-top: -.25rem;
		border-bottom: var(--dash-border);
		margin-bottom: -.25rem;
	}

	.bottom-left {
		background-position: right top;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
	}

	.bottom-right {
		background-position: left top;
		background-image: var(--dash-image);
		background-repeat: var(--dash-repeat);
		background-size: var(--dash-size);
	}

}

@media (min-width: 900px) {
	body {

		nav {
			background-image: var(--dash-image);
			background-position: right top -4px;
			background-repeat: var(--dash-repeat);
			background-size: var(--dash-size);

			/* Undo mobile view */
			border-bottom: none;
			align-items: initial;

			ul {
				display: initial;
				gap: inital;
			}
		}

		.middle-right {
			grid-area: middle-right;
			background-position: left top -4px;
			/* Undo mobile view */
			border-top: unset;
			margin-top: unset;
			border-bottom: unset;
			margin-bottom: unset;
		}

		.top-left,
		.top-right {
			border-bottom: var(--dash-border);
		}

		.top-left {
			grid-area: top-left;
			background-position: right top;
		}

		.top-right {
			grid-area: top-right;
			background-position: left top;
		}

		.bottom-left,
		.bottom-right {
			border-top: var(--dash-border);
		}

		.bottom-left {
			grid-area: bottom-left;
			background-position: right top -4px;
		}

		.bottom-right {
			grid-area: bottom-right;
			background-position: left top -4px;
		}

	}
}

.suck-up {
	margin-top: -1rem;
}

main {
	margin-top: 2rem;
	height: 100%;
	width: 100%;

	a {
		text-transform: lowercase;

		code {
			text-transform: initial;
		}
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	p,
	ul,
	ol,
	details {
		margin-bottom: 1.5rem;
	}

	ul ul {
		margin-bottom: initial;
	}

	details[open]::details-content {
		padding-top: 1rem;
	}

	summary {
		cursor: pointer;
	}

	pre {
		font-weight: 400;
		font-size: 89%;
		background-color: var(--color-code);
	}

	pre:has(>code) {
		border-block: 1px solid var(--color-fg);
		padding: 1rem;
		margin-left: -1rem;
		margin-right: -1rem;
		overflow: auto;
		margin-bottom: 1.5rem;
		margin-top: 1.5rem;
	}

	code {
		line-height: initial;
	}
}

:not(pre)>code {
	background-color: var(--color-code);
	padding: 2px 4px;
	border: 2px solid var(--color-fg);
	font-weight: 400;
	font-size: 89%;
}

a {
	color: unset;
	text-decoration: none;
	padding: 4px;
}

p>a,
ul:not([tree]) a,
ol a {
	padding: initial;
	font-weight: 800;

	code {
		font-weight: 800;
	}
}

a[tag]::before {
	content: "[" attr(tag) "] ";
	color: var(--color-faded);
	font-weight: 300;
	width: 6ch;
	display: inline-block;
}

a:hover,
a:focus {
	background-color: var(--color-fg);
	color: var(--color-bg);
	transition: all 0.1s ease-out;

	code {
		background-color: var(--color-fg);
		color: var(--color-bg);
		transition: all 0.1s ease-out;
	}
}

ul[tree] {
	padding-inline-start: 0;

	li {
		list-style: none;
		margin-top: -5px;
	}

	li:first-of-type {
		margin-top: initial;
	}

	li::before {
		content: "├──";
		padding-right: .5rem;
	}

	li:last-of-type::before {
		content: "└──";
	}

	li:not(:last-of-type)::after {
		line-height: 0.5;
		display: block;
		content: "│";
	}
}