@font-face {
	font-family: Fira-Mono;
	src:
		local('Fira Mono Regular'),
		local('FiraMono-Regular'),
		url('../../fonts/fira-mono-latin-regular.woff')
		format('woff'),

		url('../../fonts/fira-mono-latin-regular.woff2')
		format('woff2');
	font-style: normal;
	font-weight: 400;
	font-display: swap;
}

@font-face {
	font-family: Fira-Mono;
	src:
		local('Fira Mono Medium'),
		local('FiraMono-Medium'),
		url('../../fonts/fira-mono-latin-500.woff')
		format('woff'),

		url('../../fonts/fira-mono-latin-500.woff2')
		format('woff2');
	font-style: normal;
	font-weight: 500;
	font-display: swap;
}

:root {
	color-scheme: light dark;
	--gutter: clamp(24px, 2vw, 48px);
	--max-content: 1920px;
	--foreground-color: #d6deeb;
	--accent-color: #c792ea;
	--action-color: #82aaff;
	--background-color: #011627;
	--selection-color: #80a4c2;
	--footer-height: calc(clamp(2rem, 3.33333333vw, 4rem) + 1.2rem);
}

.light-mode {
	--foreground-color: #403f53;
	--accent-color: #994cc3;
	--action-color: #4876d6;
	--background-color: #fbfbfb;
	--selection-color: #90a7b2;
}

body {
	font-family: 'Fira-Mono', ui-monospace, 'Cascadia Mono', 'Segoe UI Mono', 'Roboto Mono', 'Source Code Pro', 'Courier New', monospace;
	font-size: 100%;
	font-weight: 400;
	line-height: 1.2;
	color: var(--foreground-color);
	background-color: var(--background-color);
	-webkit-font-smoothing: antialiased;
	transition: color .2s ease-out, background-color .2s ease-out;
	overflow-x: hidden;
}

.c-header {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: flex;
	width: calc(100% - (var(--gutter) * 2));
	padding: var(--gutter) var(--gutter) 0;
}

.c-header__title {
	position: absolute;
	left: -9999px;
}

.c-header__theme-toggle {
	padding: 0;
	margin-left: auto;
	color: var(--accent-color);
	background: none;
	border: 0;
	cursor: pointer;
	transition: color .2s ease-out;
}

.c-header__theme-toggle:hover {
	color: var(--foreground-color);
}

.c-header__toggle-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	white-space: nowrap;
	border: 0;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	clip-path: inset(50%);
	overflow: hidden;
}

.c-header__toggle-icon {
	fill: currentColor;
}

.c-header__toggle-icon--moon {
	display: none;
}

.c-header__toggle-icon--sun {
	display: block;
}

.light-mode .c-header__toggle-icon--moon {
	display: block;
}

.light-mode .c-header__toggle-icon--sun {
	display: none;
}

.c-main {
	padding: var(--gutter) var(--gutter) 0;
}

.c-main__inner {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	max-width: var(--max-content);
	width: 100%;
	height: calc(100vh - var(--gutter) - var(--footer-height));
	min-height: 600px;
	margin: 0 auto;
}

.c-main__bg {
	grid-row: 1;
	grid-column: 1;
	order: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.c-main__bg-icon {
	display: block;
	width: clamp(12rem, 34.30555556%, 30.875rem);
	height: auto;
	opacity: .2;
	color: var(--selection-color);
	animation: c-float 5s linear infinite;
}

@keyframes c-float {
	0% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-1rem);
	}
	100% {
		transform: translateY(0);
	}
}

.c-main__logo-wrap {
	position: relative;
	z-index: 1;
	display: flex;
	grid-row: 1;
	grid-column: 1;
	order: 2;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

.c-main__logo {
	display: block;
	width: clamp(16rem, 48.35277778%, 43.5175rem);
	height: auto;
}

.c-main__logo-fg {
	color: var(--foreground-color);
}

.c-main__logo-accent {
	color: var(--accent-color);
}

.c-footer {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	justify-items: center;
	padding: 0 var(--gutter);
	margin-bottom: clamp(2rem, 3.33333333vw, 4rem);
}

.c-footer__link {
	display: inline-flex;
	align-items: center;
	column-gap: .5rem;
	text-decoration: none;
}

.c-footer__link:hover {
	color: var(--action-color);
	text-decoration: underline;
}

.c-footer__link-text {
	text-transform: lowercase;
}

.c-footer__link-icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
}

@media (prefers-color-scheme: light) {
	.c-header__toggle-icon--moon {
		display: block;
	}

	.c-header__toggle-icon--sun {
		display: none;
	}

	body:not(.light-mode) .c-header__toggle-icon--moon {
		display: none;
	}

	body:not(.light-mode) .c-header__toggle-icon--sun {
		display: block;
	}
}