@import 'styles/palette.css';
@import 'styles/sheet-overrides.css';
@import 'styles/type-scale.css';
@import 'styles/variables.css';

* {
	box-sizing: border-box;
}

@media (prefers-reduced-motion) {
	* {
		animation: none !important;
	}
}

html {
	position: relative;
	overflow-x: hidden;
	scroll-behavior: smooth;
}

html,
body {
	width: 100%;
	height: 100%;

	margin: 0;
	padding: 0;

	color: var(--color-text);
}

:root {
	font-family: Inter, sans-serif;
	font-feature-settings:
		'cv01' 1 /* alternate 1 */,
		'cv06' 1 /* simplified u */,
		'cv09' 1 /* flat top 3 */,
		'cv11' 1 /* simple a */,
		'liga' 1,
		'ss01' 1 /* open digits */,
		'ss03' 1 /* round quotes */,
		'ss04' 1 /* disambiguition (no zero) */,
		'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
	:root {
		font-family: InterVariable, sans-serif;
	}
}

:root {
	accent-color: var(--accent);
}

.hidden {
	position: absolute;
	top: -1px;
	height: 0;
	width: 0;

	display: block;
	opacity: 0;
}

a {
	color: currentColor;
	text-decoration-color: var(--accent-green);
	text-decoration-style: wavy;
	text-decoration-thickness: 2px;
	animation: rainbow-decoration 5s linear infinite alternate;

	&:nth-child(2) {
		animation-delay: 1s;
	}

	&:nth-child(3) {
		animation-delay: 3s;
	}

	&:nth-child(4) {
		animation-delay: 2s;
	}
}

button {
	color: currentColor;
}

::selection {
	background-color: var(--accent-yellow);
}

:focus-visible:not(body) {
	outline: solid 3px var(--accent);
	outline-offset: 2px;
}

@keyframes rainbow-decoration {
	60% {
		text-decoration-color: var(--accent-green);
	}
	100% {
		text-decoration-color: var(--accent-lime);
	}
}