@font-face { font-family: 'Onest'; src: url(/Onest.woff); font-display: swap;}
@font-face { font-family: 'M PLUS 1 Code'; src: url(/MPLUS1Code.woff); font-display: swap;}
@font-face { font-family: 'Archivo Black'; src: url('/Archivo Black.woff'); font-display: swap;}
@font-face { font-family: 'Spectral'; src: url(/Spectral-Regular.woff); font-display: swap;}
@font-face { font-family: 'Krona One'; src: url(/KronaOne-Regular.woff); font-display: swap;}

body {
	background-color: black;
	color: #eeeeee;
	font-family: 'Onest', sans-serif;
	font-size: 1.100em;
	max-width: 110ch;
	margin: 0 auto;
}
header, footer {
	padding: 1em;
	align-items: center;
	justify-content: center;
}
main {
	padding: 3em;
	margin: 0 auto;
}
h1 { font-family: 'Krona One';}
h2 { font-family: 'Archivo Black';}
h3 { font-family: 'M PLUS 1 Code';
	font-weight: 400; font-size: 1.25em;}
h2, h3 {
	text-transform: uppercase;
	color: #AAAAAA;
}
tt, pre, code, time { font-family: 'M PLUS 1 Code', monospace;}
a, .accent { color: #08C7BB;}
a { text-decoration: none;}
small, .faded, footer { color: #999;}
p { line-height: 1.75; font-size: 1.15em;}
article p {
	margin-top: 1.5em;
	margin-bottom: 1.5em;
}
a:hover { border-bottom: 1px solid currentColor;}
img { max-width: 100%; object-fit: cover;}
header.hero {
	width: 100%;
	min-height: 220px;
	background-color: #111111;
	position: relative;
	padding: 0;
}
section, .section, figure, dialog, iframe {
	border: 1px solid #444444a0;
	padding: 1em;
}
section p, .section p, dialog {
	max-width: 80ch;
}
.title {
	text-transform: uppercase;
	letter-spacing: 1px;
}
header, section, footer, menu, .list, .grid, .coverflow, body.horizontal {
	display: -ms-flex;
	display: flex;
	row-gap: 0.5em;
	column-gap: 0.5em;
	flex-wrap: wrap;
}
body>article { font-family: 'Spectral', serif;}
.list { column-gap: 1em;}
section.center, .section.center { padding: 2em 1em;}
section>header, section>footer,
.section>header, .section>footer,
dialog>header, dialog>footer {
	padding-inline: 0;
	flex-direction: row;
}
.gridlock, .flexlock, .coverflow {	
	padding: 0;
	gap: 0;
	max-width: unset;
	list-style: none;
}
.gridlock {
	display: -ms-grid;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
@media (min-width: 920px) {
	.gridlock > .big { grid-column: span 2;}
}
.gridlock.wide { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));}
.gridlock.cards>section, .tight { padding: 0; gap: 0; flex-wrap: nowrap;}
header, section, .section, footer, .list, .vertical { flex-direction: column;}
.flex, .flexlock { display: -ms-flex; display: flex;}
.horizontal, .grid, .coverflow { flex-direction: row;}
.nowrap, .coverflow { flex-wrap: nowrap;}
section.center, .section.center, .horizontal.list { align-items: center;}
body.horizontal {
	align-items: flex-start;
	justify-content: center;
}
body.horizontal>main {
	margin: 0;
	flex-grow: 1;
}
.spaced { justify-content: space-evenly;}
.fully-spaced { justify-content: space-between;}
.left { text-align: left;}
.stretch > * { flex-grow: 1;}
.scroll, .coverflow { overflow: scroll;}
.scroll.snap { scroll-snap-type: both mandatory;}
.snap {
	scroll-snap-align: start;
	scroll-snap-stop: always;
}
.coverflow {
	background-color: black;
	overflow-y: clip;
}
menu li { list-style: none; margin: 0;}
menu li.accent, menu li:hover, button:hover, .button:hover { border-color: #08C7BB;}
menu li, button, .button {
	background-color: #101010bb;
	border: 1px solid #444444;
	/*border-radius: 100vw;*/
	min-width: 4ch;
	text-align: center;
}
button { display: inline-block; color: currentColor; font-size: inherit;}
menu li, button, .button, td, th { padding: 0.4em 0.8em;}
nav a { color: currentColor; border: 0 !important;}
ul, ol, menu { padding-left: 0;}
li { margin: 12px 0;}
h2, h3, h4, p { margin-block: 0.4em;}
figure, .grid li, ul.list, ol.list { margin: 0;}
table { width: 100%;}
table.narrow { width: unset;}
table, td, th {
	border: 1px solid #101010;
	border-collapse: collapse;
}
th { background-color: #101010bb;}
td, section, button { position: relative;}
.timestamp { color: yellowgreen; text-align: right;}
.icon, menu img {
	max-height: 1em;
	vertical-align: middle;
	max-width: unset;
}
.invert { filter: invert();}
.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;}

h1.hero {
	font-size: 4rem;
	color: #bdf6b2;
	margin: 0;
	position: absolute;
	text-align: right;
	bottom: 1em;
	right: 1em;
	backdrop-filter: blur(4px);
	padding: 0.50em;
}
@media (max-width: 762px) { h1.hero { font-size: 2rem;} }
@media (max-width: 476px) { h1.hero { top: 1em; bottom: unset;} }
.ani > :hover {
	transform: scale(1.100); background-color: black;
	z-index: 90;
}
menu.ani > li:hover { padding: 0.4em 1.2em;}
.ani:hover > :not(:hover) { filter: blur(2px);}
menu.ani:hover > :not(:hover) { filter: brightness(0.53) !important;}
td.ily .icon, button.ily .icon, img.ily { position: absolute; z-index: -10; opacity: .5; top: 0.2em; left: 0.2em;}
/* leaflet add */
.leaflet-popup-content-wrapper {
	border-radius: 0 !important;
	font-family: 'Onest';
	font-size: 1.20em;
}
.leaflet-popup-content {
	margin: 0.5em 1em !important;
}
.leaflet-popup-tip, .leaflet-popup-content-wrapper {
	background: #101010 !important;
	border: 1px solid #444444;
	color: white !important;
}
* {
	box-sizing: border-box;
	transition: all 0.2s ease;
}