:root {
	--color-base: #faf4f4;
	--color-contrast: #000000;
	--color-accent: #FF583B;
	--color-accent-hover: oklch(from var(--color-accent) calc(l * 1.05) c h);

	--font-family: system-ui, sans-serif;
	--font-size-medium: 16px;
	--font-size-small: 14px;
	--line-height: 1.5;

	--border-size: 2px;
	--border-radius-small: 4px;
	--border-radius-medium: 8px;

	--spacing-tiny: 2px;
	--spacing-small: 5px;
	--spacing-medium: 15px;
	--spacing-large: 30px;

	--transition-duration: 0.1s;
	--transition-easing: ease-out;

	--icon-size: 64px;
	--dot-size: 1px;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-image: radial-gradient(
		circle,
		oklch(from var(--color-accent) 0.75 0.05 h) var(--dot-size),
		transparent var(--dot-size)
	);
	background-size: var(--icon-size) var(--icon-size);
	padding: calc(var(--icon-size) / 2);
	font-size: var(--font-size-medium);
	line-height: var(--line-height);
	font-family: var(--font-family);
}

header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: calc(var(--icon-size) / 2);
	border-bottom: var(--border-size) solid var(--color-accent);
}

h1::before {
	margin-right: var(--spacing-medium);
	content: "\2591";
	color: var(--color-accent);
}

a {
	color: var(--color-contrast);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-accent);
	text-decoration-thickness: var(--border-size);
	text-underline-offset: 0.2em;
}


.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--icon-size), 1fr));
	gap: var(--spacing-small);
}

.app {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-tiny);
	font-size: var(--font-size-small);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
}

.app img {
	width: var(--icon-size);
	height: var(--icon-size);
}

.button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--border-radius-small);
	background-color: var(--color-accent);
	padding: 0.5em 1.25em;
	color: var(--color-base);
	text-decoration: none;
}

.button:hover {
	background-color: var(--color-accent-hover);
	text-decoration: none;
}

/* Overlay
---------------------------------------- */

.overlay-container {
	display: flex;
	position: fixed;
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity var(--transition-duration) var(--transition-easing);
	inset: 0;
	pointer-events: none;
}

.overlay-container:target {
	opacity: 1;
	pointer-events: auto;
}

.overlay-backdrop {
	position: absolute;
	inset: 0;
	background-color: oklch(from var(--color-accent) 0.1 0.025 h / 0.75);
}

.overlay-card {
	position: relative;
	transform: translateY(var(--spacing-medium));
	z-index: 1;
	transition: transform var(--transition-duration) var(--transition-easing);
	margin: var(--spacing-medium);
	box-shadow: 0 10px 30px rgb(0 0 0 / 0.15);
	border-radius: var(--border-radius-medium);
	background-color: var(--color-base);
	padding: var(--spacing-large);
	width: min(600px, calc(100vw - (var(--spacing-medium) * 2)));
}

.overlay-container:target .overlay-card {
	transform: translateY(0);
}