:root {
	--bg: light-dark(#f8f8f8, #123);
	--text: light-dark(#012, white);
	--gutter: calc(1ch + 2vw);
}

html {
	background: var(--bg);
	color: var(--text);
	font-family: Besley, serif;
}

body {
	max-width: calc(40ch + 40vw);
	margin: var(--gutter) auto;
	padding-inline: var(--gutter);
}

header {
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: calc(var(--gutter) / 2);
}

h1 {
	margin: 0;
}

dt {
	font-weight: bold;
	margin-block: 2ch 0.5ch;
}

dd {
	margin-inline-start: var(--gutter);
}

hr {
	border: 2px solid gray;
	border-radius: 8px;
	opacity: 0.4;
	margin-block: var(--gutter);
}

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2ch;
}

.screen-reader-only:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

@keyframes bounce {
	20% {
		transform: translateY(10%) scale(1.1, 0.8);
	}

	80% {
		transform: translateY(-5%) scale(0.9, 1.1);
	}
}

@media (prefers-reduced-motion: no-preference) {
	.bouncy {
		animation: 0.3s bounce calc(sibling-index() * 0.2s);

		&:active {
			animation: 0.3s bounce;
		}
	}
}

.name-tag {
	--ink: light-dark(firebrick, var(--text));
	--outline: 4px;
	--paper: light-dark(white, var(--bg));
	--radius: 16px;
	background: linear-gradient(120deg, var(--ink), color-mix(in srgb, white 20%, var(--ink)) 25%, var(--ink) 30%);
	border-radius: var(--radius);
	box-shadow: 0 0 0 calc(var(--outline) / 2) var(--paper), 0 10px 40px -25px black;
	color: var(--ink);
	display: inline-block;
	font-size: 1.1em;
	padding: var(--outline);
	rotate: -3deg;

	@media print {
		border: 2px solid;
		background: transparent;
	}

	.label {
		color: var(--paper);
		font: bold 1rem sans-serif;
		padding: 8px;
		text-align: center;

		@media print {
			border-block-end: 1px solid;
			color: inherit;
		}
	}

	.name {
		background: var(--paper);
		border-radius: calc(var(--radius) - var(--outline));
		font-family: Rancho, cursive;
		padding: 8px var(--gutter);
		text-wrap: nowrap;
	}
}

.intro {
	font-size: 1.5em;
	text-wrap: balance;
}

.main-links {
	align-items: center;
	display: flex;
	gap: var(--gutter);
	flex-wrap: wrap;
	justify-content: space-evenly;

	a {
		background: light-dark(white, transparent);
		border-radius: 8px;
		border: 2px solid light-dark(#9996, currentColor);
		box-shadow: -1px -1px inset black;
		color: inherit;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		font-family: sans-serif;
		font-weight: bold;
		gap: 0.5ch;
		padding: 8px var(--gutter);
		text-align: center;
		text-decoration: none;

		.icon {
			font-family: "Noto Emoji";
			font-size: 2em;
			vertical-align: middle;
		}

		.label {
			white-space: nowrap;
		}
	}
}

.tech-used {
	font-family: Courier, monospace;
	margin-block-start: 0.5ch;

	&::before {
		content: "{";
	}

	&::after {
		content: "}";
	}
}

footer {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1ch;
	justify-content: space-between;
}

.external-links {
	display: flex;
	gap: var(--gutter);

	svg {
		display: inline-block;
		fill: var(--text);
		height: 2em;
	}
}