/* # Overrides */

:root {
	--primer-color-accent: 148, 255, 21;
	--color-accent: rgb(var(--primer-color-accent));
}

main {
	display: flex;
	flex-direction: column;
	gap: var(--padding);
}

/* # Sections */

/* ## Into */

section.intro h2 {
	font-size: 25px;
}

section.intro h1 {
	font-size: 40px;
	color: var(--color-accent);
}

/* ## Divider */

main > hr {
	border-color: rgba(255, 255, 255, .1);
}

/* ## About */

section.about {
	display: flex;
	flex-direction: column;
	gap: calc(var(--padding) / 2);
}

section.about {
	font-size: 16px;
}

section.about p:first-of-type:first-letter {
	font-size: 1.5rem;
	font-weight: bold;
	margin-right: .1rem;
	color: var(--color-accent);
}

section.about span.interests {
	-webkit-user-select: none;
	user-select: none;
	color: var(--color-accent);
	animation: interests-hue 5s infinite linear;
}

/* ## Version */

section.version {
	color: rgba(255, 255, 255, .2);
}

/* # Interests */

div.interests {
	transition: 300ms opacity;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-weight: bold;
	pointer-events: none;
	font-size: 60px;
	color: var(--color-accent);
	overflow: hidden;
	opacity: 0;
	z-index: 200;
}

div.interests.active {
	opacity: 1;
}

div.interests p {
	--text-shadow-blur: 30px;

	transition: 300ms transform;
	position: absolute;
	text-shadow: 
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black,
		0 0 var(--text-shadow-blur) black;
}

@keyframes interests-hue {
	to {
		-webkit-filter: hue-rotate(360deg);
		filter: hue-rotate(360deg);
	}
}