/* # Overrides */

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

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

/* # Sections */

/* ## Divider */

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

/* ## About */

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

section.about p:first-of-type:first-letter {
	font-size: 1.8rem;
	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;
}

section.about p i:not(:hover) {
	opacity: .3;
}

/* # Interests */

div.interests {
	--text-shadow-blur: 30px;
	
	transition: 300ms opacity;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	font-weight: bold;
	pointer-events: none;
	font-size: clamp(16px, 15vw, 50px);
	color: var(--color-accent);
	overflow: hidden;
	opacity: 0;
	z-index: 200;
}

div.interests.active {
	opacity: 1;
}

div.interests p {
	transition: 500ms transform cubic-bezier(.34,0,0,.99);
	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);
	}
}