@import url('https://fonts.googleapis.com/css2?family=Sofia+Sans+Semi+Condensed:wght@900&family=Zalando+Sans:ital,wght@0,200..900;1,200..900&display=swap');

:root {
	--black: #111;
	--white: #eee;
	--c1: color-mix(in oklab, var(--accent), var(--white) 3%);
	--c2: color-mix(in oklab, var(--accent), var(--black) 3%);
}

body {
	font-size: 18px;
	margin: 0;
	background: var(--black);
	color: var(--white);
	font-family: 'Zalando Sans', system-ui, sans-serif;
	font-feature-settings: 'cv02' 1,'cv03' 1,'cv04' 1, 'cv09' 1, 'cv05' 1, 'ss07' 1, 'ss08' 1, 'cv08' 1, 'cv10' 1;
	main {
		width: min(calc(100vw - 4rem), 40rem);
		margin: 0rem auto;
	}
	header {
		background: var(--pattern);
		background-attachment: fixed;
		padding-top: 16rem;
		padding-bottom: 2rem;
		margin-bottom: 4rem;
	}
	header, home-page-section {
		h1 {
			font-size: 5rem;
			text-shadow: 0.25rem 0.25rem var(--black);
			-webkit-text-stroke: 0.25rem var(--black);
			paint-order: stroke fill;
			margin: 0;
			font-family: 'Sofia Sans Semi Condensed', sans-serif;
			font-weight: 900;
		}
		h3 {
			margin: 0;
			color: var(--on-accent);
			font-size: 1em;
			font-weight: inherit;
		}
		hex-code {
			font-size: 1.5rem;
			color: var(--on-accent);
			font-weight: 600;
			margin: 0;
		}
	}
	::selection {
		background: white;
		color: black;
	}
	main {
		position: relative;
		h2 {
			font-size: 2rem;
			margin-top: 2rem;
			padding-top: 2rem;
			line-height: 1.25em;
			&:before {
				content: "-";
				user-select: none;
				color: #ffffff00;
				height: 1.25em;
				width: 1.25em;
				display: inline-block;
				position: absolute;
				vertical-align: middle;
				left: -2em;
				border-radius: 100%;
				background: var(--pattern);
				background-attachment: fixed;
			}
			font-weight: 500;
		}
	}
	p {
		line-height: 150%;
	}
	inline-hex-code {
		border: solid 1px var(--color);
		padding: 0.125rem 0.5rem;
		border-left-width: 1.625em;
		font-size: 1rem;
		vertical-align: middle;
	}
	p a {
		text-decoration: underline;
		color: inherit;
		cursor: pointer;
		&:hover {
			background: var(--pattern);
			color: var(--on-accent);
			text-decoration: none;
		}
	}
	table-of-contents {
		counter-reset: section;
		line-height: 150%;
		div::before {
			counter-increment: section;
			content: counter(section);
			display: inline-block;
			width: 2.5rem;
		}
		a {
			background: var(--pattern);
			background-attachment: fixed;
			color: var(--on-accent);
			text-decoration: none;
			cursor: pointer;
			padding: 0 0.25rem;
			line-height: 125%;
			&:hover {
				background: var(--white);
				color: var(--black);
			}
			display: inline-block;
		}
	}
	img {
		width: 100%;
		display: block;
		user-select: none;
	}
	a:has(home-page-section) {
		--c1: color-mix(in oklab, var(--accent), var(--white) 3%);
		--c2: color-mix(in oklab, var(--accent), var(--black) 3%);
		home-page-section {
			background: var(--pattern);
			background-attachment: fixed;
			height: 105vh;
			display: block;
			box-sizing: border-box;
			padding-top: 40vh;
		}
		color: inherit;
		cursor: pointer;
		text-decoration: none;
		display: block;
		text-align: center;
	}
	footer {
		margin-bottom: 16rem;
	}
}


h1 span {
	display: inline-block;
	animation: bounce 5s ease-in-out infinite;
	animation-delay: calc(var(--i) * 0.05s);
}

@keyframes bounce {
	15% {
		transform: translateY(-0.3rem);
	}
	0%, 35% {
		transform: translateY(0);
	}
	5%, 30% {
		transform: translateY(0.1rem);
	}
}

.notice {
	color: gray;
}