@import url('https://fonts.googleapis.com/css?family=Noto%20Sans%20Old%20Italic:700|Noto%20Sans%20Old%20Italic:400');

:root {
	--clr-text: hsl(256, 95%, 92%);
	--clr-background: hsl(255, 100%, 2%);
	--clr-primary: hsl(255, 95%, 41%);
	--clr-secondary: hsl(255, 94%, 26%);
	--clr-accent: hsl(323, 95%, 58%);

	--clr-secondary-light: hsla(255, 94%, 26%, 0.5);

	--grd-lin-primary: linear-gradient(to right bottom, var(--clr-primary), var(--clr-secondary));
	--grd-lin-triad: linear-gradient(
		to right bottom,
		var(--clr-secondary),
		var(--clr-primary),
		var(--clr-accent)
	);
	--grd-lin-secondary: linear-gradient(
		to right bottom,
		var(--clr-secondary),
		var(--clr-secondary-light)
	);
	--grd-rad-primary: radial-gradient(var(--clr-primary), var(--clr-secondary));
	--grd-rad-triad: radial-gradient(var(--clr-accent), var(--clr-primary), var(--clr-secondary));
	--grd-rad-secondary: radial-gradient(var(--clr-secondary), var(--clr-secondary-light));
	/* --grd-rad-fade: radial-gradient(var(--clr-secondary-light), var(--clr-background)); */
	--grd-rad-fade: radial-gradient(var(--clr-secondary-light), var(--clr-background));
}

* {
	box-sizing: border-box;
}

html {
	font-family: 'Noto Sans Old Italic';
	color: var(--clr-text);
	scroll-behavior: smooth;
	scroll-padding: 4rem;
}

body {
	background-color: var(--clr-background);
	min-height: 100vh;
	margin: 0;
}

h1,
h2,
h3,
h4,
h5,
p,
small {
	margin: 0;
}

h1 {
	font-size: 3.053rem; /* 48.8px */
}

h2 {
	font-size: 2.442rem; /* 39.04px */
}

h3 {
	font-size: 1.954rem; /* 31.2px */
}

h4 {
	font-size: 1.563rem; /* 24.96px */
}

h5 {
	font-size: 1.25rem; /* 20px */
}

small {
	font-size: 0.8rem; /* 12.8px */
}

img {
	max-width: 100%;
	user-select: none;
}

a {
	user-select: none;
}

/* Custom elements */

a.custom {
	color: var(--clr-accent);
	transition: text-shadow 200ms ease-out;
}

a.custom:is(:hover, :focus-visible) {
	text-shadow: 0 0 4px var(--clr-accent);
}

h2.custom {
	background: var(--grd-lin-primary);
	background-clip: text;
	color: transparent;
	text-align: center;
	margin-bottom: 1rem;
}

/* Mobile */

.mobile {
	display: block;
}
.desktop {
	display: none;
}

/* Desktop */
@media (width >= 500px) {
	.mobile {
		display: none;
	}
	.desktop {
		display: block;
	}

	html {
		font-size: 100%;
	} /* 16px */

	h1 {
		font-size: 2.489rem; /* 39.84px */
	}

	h2 {
		font-size: 2.074rem; /* 33.12px */
	}

	h3 {
		font-size: 1.728rem; /* 27.68px */
	}

	h4 {
		font-size: 1.44rem; /* 23.04px */
	}

	h5 {
		font-size: 1.2rem; /* 19.2px */
	}

	small {
		font-size: 0.833rem; /* 13.28px */
	}
}