html {
	font-size: 62.5%;
}

body {
	background-color: var(--back-color);
	margin: unset;
	scroll-behavior: smooth;

	font-family: var(--default-font);
	font-size: 2rem;
	text-rendering: optimizeSpeed;
}

:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--accent-font);
	font-weight: 400;
}

h3 {
	font-size: var(--text-xl);
	line-height: 120%;
	text-transform: uppercase;
	margin: unset;
}

s {
	text-decoration-line: line-through;
    text-decoration-thickness: 2px;
    text-decoration-style: solid;
    text-decoration-color: var(--red);
}

strong {
	color: var(--red);
}

a {
	text-decoration: none;

	transition-duration: 160ms;
	transition-property: color;
	transition-timing-function: ease-in-out;

	&:link {
		color: color-mix(in srgb, var(--blue-248) 100%, var(--red) 0%);
	}
	&:visited {
		color: color-mix(in srgb, var(--blue-248) 100%, var(--text-color) 60%);
	}
	&:hover {
		color: color-mix(in srgb, var(--blue-248) 10%, var(--orange-2) 90%);
	}
	&:focus {
		color: color-mix(in srgb, var(--blue-248) 60%, var(--red) 40%);
	}
	&:active {
		color: color-mix(in srgb, var(--blue-248) 100%, var(--red) 0%);
		text-decoration: underline;
	}
}