@font-face {
	font-family: "Montserrat";
	src: url("/assets/montserrat-variable.woff2") format("woff2");
	font-weight: 100 900;
}

:root {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	--pico-font-family-sans-serif: "Montserrat";
	--pico-font-size: clamp(1rem, 1.45vw, 1.8rem);
	--page-background: rgb(0, 28, 54);
	scroll-behavior: smooth;
}

html {
	scroll-padding-top: 6em;
}

body {
	background: var(--page-background);
	color: white;
	min-height: 100vh;
}

details summary::after {
	display: inline-block;
	float: none;
	margin-left: 0.25em;
	margin-bottom: -0.15em;
}

details p {
	margin: 0 auto;
	max-width: 48em;
}

details p:last-child {
	margin-bottom: 2em;
}

footer {
	color: var(--pico-muted-color);
	font-size: 90%;
}

h1 {
	font-size: 2.5rem;
	font-weight: 200;
}

h1 b {
	font-weight: 800;
}

h3 {
	--pico-font-size: 0.8rem;
	text-transform: uppercase;
}

header {
	position: sticky;
	top: 0;
	background-color: rgba(29,29,40,0.5);
	backdrop-filter: blur(10px);
	isolation: isolate;
	z-index: 10;
}

img {
	border-radius: 1em;
}

a img {
	border-radius: 0;
}

nav .navlinks svg {
	fill: var(--pico-primary);
	max-width: 0;
	overflow: hidden;
	transition: all 0.5s ease;
}

nav .active {
	font-weight: bold;
}

nav .navlinks svg:has(+.active) {
	max-width: 2em;
}

nav .hidden {
	display: none;
}

hr {
	border: none;
	border-top: rgba(33, 65, 166, 0.5) 1px solid;
}

section + section {
	margin-top: 3em;
	padding-top: 2em;
}

hr + section {
	padding-top: 1.5em;
}

section.stretch {
	padding: 2em 0;
}

section.stretch + section {
	border-top: none;
	margin-top: 0;
	padding-top: 1.5em;
}

body footer {
	padding-top: 0;
}

mark {
	background-color: #43256E;
	border-radius: 1em;
	padding: 0.125rem 0.75em;
}

dialog p {
	text-align: left;
}

dialog hr {
	border-top-color: var(--pico-primary);
}

#features {
	background-color: rgba(255,255,255,0.07);
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.icon {
	--size: 1.1em;
	display: inline-block;
	height: var(--size);
	width: var(--size);
	margin-bottom: -0.15em;
	transform: translateY(0.1em);
	vertical-align: baseline;
}

.large {
	--size: 2.5em;
}

.hero {
	display: flex;
	border-radius: 1em;
	flex-direction: column;
	margin: 0 auto;
	max-width: 1000px;
}
.hero img {
	border-radius: 0;
	width: 100%;
}

#features .grid { max-width: 72vw; margin-left: auto; margin-right: auto; }
#features .grid + .grid { margin-top: 1.5em; }
#features .grid p { margin-bottom: 0.25em; }

/* ----- */

.keyboard {
	--size: 2.4rem;
	max-width: 100%;
	margin: 0 auto;
	margin-bottom: 2.5em;
	width: calc(var(--size) * 18);
}
.keyboard kbd {
	display: flex;
	position: relative;
	align-items: center;
	font-family: "Montserrat";
	font-size: 90%;
	font-weight: 400;
	height: var(--size);
	justify-content: center;
	padding: 0.4rem;
	width: var(--size);
}
.keyboard kbd.key1 { width: calc(var(--size) * 1.2); }
.keyboard kbd.key2 { width: calc(var(--size) * 1.4); }
.keyboard kbd.key3 { width: calc(var(--size) * 1.7); }
.keyboard kbd.key4 { width: calc(var(--size) * 2.2); }
.keyboard kbd.spacebar { width: calc(var(--size) * 7); }

.keyboard .row {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.keyboard .arrows {
	display: flex;
	flex-direction: column;
	height: var(--size);
	justify-content: space-between;
}
.keyboard .arrows kbd { height: calc(var(--size) / 2.2); }

.keyboard kbd:has(details) {
	background-color: var(--pico-primary-background);
	color: var(--pico-primary-inverse);
	cursor: pointer;
	font-weight: 700;
}

.keyboard kbd details {
	display: block;
	position: absolute;
	height: 100%;
	inset: 0;
}

.keyboard kbd summary {
	display: flex;
	position: absolute;
	align-items: center;
	height: 100%;
	inset: 0;
	justify-content: center;
}

.keyboard kbd summary { color: inherit !important; margin: 0 !important; }
.keyboard kbd summary::after { display: none; }
.keyboard kbd details[open] summary { backdrop-filter: contrast(2); }
.keyboard kbd label {
	position: absolute;
	left: 50%; top: calc(100% + 0.5em);
	background: var(--page-background);
	border: rgba(255,255,255,0.25) 2px solid;
	border-radius: 0.5em;
	box-shadow: black 0 0 0.5em;
	color: var(--pico-h2-color);
	font-size: 90%;
	font-weight: 400;
	line-height: 1.4;
	padding: 0.75em 1em;
	text-align: left;
	transform: translateX(-50%);
	width: 15em;
	z-index: 2;
}

.keyboard kbd label > span { display: block; }
.keyboard kbd label > span + span { margin-top: 0.5em; }
.keyboard kbd label.wide { width: 20em; }
.keyboard kbd label tt { font-weight: bold; }

.keyboard .sub:not(:has(summary)) { font-size: 60%; }
.keyboard .sub summary { font-size: 60%; }
.keyboard .sub, .keyboard .sub summary { align-items: flex-end; justify-content: flex-start; }
.keyboard .sub.right, .keyboard .sub summary { justify-content: flex-end; }
.keyboard .sub summary { padding-left: 0.4rem; }
.keyboard .sub.right summary { padding-right: 0.4rem; }

/* ----- */

@media (min-width: 576px) { .container { max-width: 90vw; } }