/* Modified from source: https://piccalil.li/blog/a-more-modern-css-reset/ */

/* Box sizing rules */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Prevent font size inflation */
html {
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none;
}

/* Remove default margin in favour of better control in authored CSS */
body, h1, h2, h3, h4, p,
figure, blockquote, dl, dd {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role='list'],
ol[role='list'] {
	list-style: none;
}

/* Set core body defaults */
body {
	min-height: 100vh;
	line-height: 1.5;
}

/* Set shorter line heights on headings and interactive elements */
h1, h2, h3, h4,
button, input, label {
	line-height: 1.1;
}

/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
	text-wrap: balance;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
	text-decoration-skip-ink: auto;
	color: currentColor;
}

/* Make images easier to work with */
img,
picture {
	max-width: 100%;
	display: block;
}

/* Inherit fonts for inputs and buttons */
input, button,
textarea, select {
	font-family: inherit;
	font-size: inherit;
}

/* Make sure textareas without a rows attribute are not tiny */
textarea:not([rows]) {
	min-height: 10em;
}

/* Anything that has been anchored to should have extra scroll margin */
:target {
	scroll-margin-block: 5ex;
}

/* Fonts */

@font-face {
	font-family: SpaceMono;
	src: url("/fonts/SpaceMono-Regular.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: SpaceMono;
	font-weight: bold;
	src: url("/fonts/SpaceMono-Bold.woff2") format("woff2");
	font-display: swap;
}

:root {
	--ff-mono: SpaceMono, ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
	--accent: 136, 58, 234;
	--accent-light: 224, 204, 250;
	--accent-dark: 49, 10, 101;
	--accent-gradient: linear-gradient(
		45deg,
		rgb(var(--accent)),
		rgb(var(--accent-light)) 30%,
		white 60%
	);
}

body {
	font-family: var(--ff-mono);
	background: #13151a;
	color: white;
	font-size: 20px;
}

code {
	font-family: var(--ff-mono);
}

/* Page */

main {
	margin: auto;
	padding: 1rem;
	width: 800px;
	max-width: calc(100% - 2rem);
	line-height: 1.6;
}
.logo {
	display: block;
	margin-inline: auto;
	width: 220px;
}
h1 {
	font-size: 3rem;
	line-height: 1.05;
	text-align: center;
	margin-top: -.4em;
	margin-bottom: .75em;
}
.text-gradient {
	font-size: 6rem;
	background-image: var(--accent-gradient);
	background-clip: text;
	color: transparent;
	background-size: 400%;
}
.introduction {
	margin-bottom: 2rem;
	border: 1px solid rgba(var(--accent-light), 25%);
	background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
	padding: 1.5rem;
	border-radius: 8px;
	width: fit-content;
	margin-inline: auto;
}
.introduction code {
	font-size: 0.9em;
	background: rgba(var(--accent-light), 12%);
	color: rgb(var(--accent-light));
	border-radius: 4px;
	padding: 0.15em 0.35em;
}
h2 {
	margin-bottom: 1em;
}
dt {
	font-weight: bold;
}
dd {
	margin-left: 2em;
}
dd + dt {
	margin-top: 1em;
}

/* Callsign tapped out in Morse code on hover */

@keyframes morseD {
	0.00% { opacity:1; }
	14.29% { opacity:0; }
	21.43% { opacity:1; }
	28.57% { opacity:1; }
	42.86% { opacity:0; }
	53.57% { opacity:1; }
	64.29% { opacity:1; }
	78.57% { opacity:0; }
	89.29% { opacity:1; }
	100.00% { opacity:1; }
}
@keyframes morseF {
	0.00% { opacity:1; }
	10.53% { opacity:0; }
	18.42% { opacity:1; }
	26.32% { opacity:1; }
	36.84% { opacity:0; }
	44.74% { opacity:1; }
	52.63% { opacity:1; }
	63.16% { opacity:0; }
	68.42% { opacity:1; }
	73.68% { opacity:1; }
	84.21% { opacity:0; }
	92.11% { opacity:1; }
	100.00% { opacity:1; }
}
@keyframes morse3 {
	0.00% { opacity:1; }
	8.70% { opacity:0; }
	15.22% { opacity:1; }
	21.74% { opacity:1; }
	30.43% { opacity:0; }
	36.96% { opacity:1; }
	43.48% { opacity:1; }
	52.17% { opacity:0; }
	58.70% { opacity:1; }
	65.22% { opacity:1; }
	73.91% { opacity:0; }
	78.26% { opacity:1; }
	82.61% { opacity:1; }
	91.30% { opacity:0; }
	95.65% { opacity:1; }
	100.00% { opacity:1; }
}
@keyframes morseT {
	0.00% { opacity:1; }
	50.00% { opacity:0; }
	75.00% { opacity:1; }
	100.00% { opacity:1; }
}
@keyframes morseA {
	0.00% { opacity:1; }
	22.22% { opacity:0; }
	38.89% { opacity:1; }
	55.56% { opacity:1; }
	77.78% { opacity:0; }
	88.89% { opacity:1; }
	100.00% { opacity:1; }
}

#callsign :nth-child(1):hover {
	animation: morseD linear 2s;
}

#callsign :nth-child(2):hover {
	animation: morseF linear 2.4s;
}

#callsign :nth-child(3):hover {
	animation: morse3 linear 3.2s;
}

#callsign :nth-child(4):hover {
	animation: morseT linear 1.2s;
}

#callsign :nth-child(5):hover {
	animation: morseA linear 1.6s;
}