style.css

@font-face { font-family: 'Oxygen'; src: url(/oxygen.woff2); font-display: swap;}
@font-face { font-family: 'Oxygen Mono'; src: url(/oxygen-mono.woff2); font-display: swap;}
@font-face { font-family: 'Space Grotesk'; src: url(/space-grotesk.woff2); font-display: swap;}
body {
	background-color: black;
	color: #eeeeee;
	font-family: 'Oxygen', sans-serif;
	margin: 0;
}
header, footer {
	padding: 1em;
	align-items: center;
	justify-content: center;
}
main {
	padding: 3em;
	max-width: 80ch;
	margin: 0 auto;
}
h1, h2, h3, h4, summary, time, .title, header, footer, th { font-family: 'Space Grotesk', sans-serif; }
tt, pre, code { font-family: 'Oxygen Mono', monospace;}
a, .accent { color: #08C7BB;}
a { text-decoration: none;}
small, .faded, footer { color: #999;}
p { line-height: 1.75;
	margin-top: 1.5em;
	margin-bottom: 1.5em;}
a:hover { border-bottom: 1px solid currentColor;}
img { max-width: 100%;}
menu li {
	display: inline-block;
	margin: 4px 8px;
}
menu a { color: inherit;}
menu a {
	padding: 4px 8px;
	background-color: rgba(10, 10, 10, 0.8);
	border-radius: 3px;
	backdrop-filter: blur(6px);
	transition: background-color 0.25s ease;
}
menu a:hover, menu a.accent {
	border-bottom: 0;
	background-color: rgba(19, 19, 19, 0.9);
}
section { padding: 1em 0;}
.title {
	text-transform: uppercase;
	letter-spacing: 1px;
}
header, footer, menu, .list, .grid {
	display: -ms-flex;
	display: flex;
	row-gap: 1em;
	column-gap: 1em;
	flex-wrap: wrap;
}
.list { column-gap: 1em;}
header, footer, .list, .card, figcaption { flex-direction: column;}
menu { justify-content: center;}
.flex, .card, figcaption { display: -ms-flex; display: flex;}
.horizontal, .grid { flex-direction: row;}
.nowrap { flex-wrap: nowrap;}
.horizontal.list { align-items: center;}
.spaced { justify-content: space-evenly;}
.fully-spaced { justify-content: space-between;}
.chip, button {
	display: inline-block;
	border: 1px solid #08C7BB;
	border-radius: 2px;
	font-size: 0.8em;
}
.chip, button, td, th { padding: 4px 10px;}
.card {
	background-size: cover;
	border-radius: 4px;
	border: 1px solid #101010;
	padding: 1em;
}
hr {
	border: 0;
	background-image: radial-gradient(transparent, black),
		url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%2308c7bb' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
	height: 4px;
	max-width: 40ch;
	margin: 2em auto;
}
ul, ol, menu { padding-left: 0;}
li { margin: 12px 0;}
figure, .grid li, ul.list, ol.list { margin: 0;}
table { width: 100%;}
table, td, th {
	border: 1px solid #101010;
	border-collapse: collapse;
}
th { background-color: #101010bb;}
.icon, menu img, button img {
	max-height: 1em;
	vertical-align: middle;
	max-width: unset;
}
.invert { filter: invert();}
.texture {
	background-position: 0% 0%;
	background-image: linear-gradient(transparent, black), url(/images/topography.svg);
	transition: background 200ms ease;
}
footer.texture {
	background-image: linear-gradient(black, transparent), url(/images/topography.svg);
}
.cover { height: 400px;}
.full-width { /* credit: gomakethings.com */
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: -50vw;
	margin-right: -50vw;
	left: 50%;
	right: 50%;
	object-fit: cover;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
}
[onclick] { cursor: pointer;}
menu a span {
	font-size: 0;
	transition: font-size 0.2s ease;
}
menu a:hover span { font-size: unset;}
@media only screen and (max-width: 600px) {
	nav menu { column-gap: 0;}
	.card { width: 100% !important;
		max-width: 100% !important;
	   flex-basis: 100% !important;}
	.nowrap { flex-wrap: wrap;}
}