@media (max-width: 45rem) {
	.section {
		display: none;
	}
}

main header {
	margin-bottom: 3rem;
	width: calc(100vw - 13rem);
	min-width: 100%;
	max-width: 75rem;
	border-bottom: 2px solid light-dark(var(--black), var(--bright_white));

	h1 svg {
		fill: light-dark(var(--black), var(--bright_white));
		filter: drop-shadow(0.5rem 0.5rem var(--red));
	}

	p {
		display: inline;
		position: relative;
		margin-block-start: 1rem;
		margin-inline-start: 1rem;
		padding-inline: 0.5rem;
		inset-block-end: -0.75rem;
		background-color: light-dark(var(--bright_white), var(--black));
		font-feature-settings: "swsh";
		font-weight: bold;
	}
}

.stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 8rem;
	margin: 0;
	margin-block: 6rem;
	text-align: center;

	li {
		list-style: none;
	}
}

.number {
	display: block;
	font-size: 2em;
	font-family: monospace;
	overflow: hidden;
	height: 1.2em;

	.digit {
		position: relative;
		display: inline-block;
		width: 0.6em;
		height: 1.2em;
		overflow: hidden;

		span {
			display: block;
			transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);

			div {
				height: 1.2em;
			}
		}
	}
}

.static-char {
	display: inline;
	top: -0.5rem;
	position: relative;
}

.github-contrib {
	display: grid;
	grid-template-rows: repeat(7, 1fr);
	grid-auto-flow: column;
	gap: 0.2rem;

	div {
		aspect-ratio: 1;
		--activity_base: light-dark(var(--bright_grey), var(--bright_white));
		background-color: var(--activity_base);

		&:hover {
			scale: 1.75;
			box-shadow: 0 0 0.25rem black;
			outline: 2px solid light-dark(var(--bright_white), var(--black));
		}
	}

	.level-1 {
		background-color: color-mix(in srgb, var(--activity_base), var(--green));
	}

	.level-2 {
		background-color: color-mix(in srgb, var(--activity_base) 25%, var(--green));
	}

	.level-3 {
		background-color: color-mix(in srgb, var(--activity_base) 75%, var(--green));
	}

	.level-4 {
		background-color: var(--green);
	}
}

#challenger {
	margin-block-start: 70vh;
	margin-block-end: 20vh;
	clip-path: polygon(100% 0, 100% 87%, 0 100%, 0 13%);
	animation: challenger-reveal ease-in both;
	animation-timeline: view();
	animation-range: entry 20% cover 40%;
	will-change: clip-path;
}

@keyframes challenger-reveal {
	from {
		clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
	}
	to {
		clip-path: polygon(100% 0, 100% 87%, 0 100%, 0 13%);
	}
}