/* # 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;
}

/* ## Languages */

section.languages {
	margin: calc(var(--padding) / 1.5) 0;
}

section.languages stacked-bar-chart {
	gap: 3px;
	width: 100%;
	display: flex;
	border-radius: 100px;
	height: calc(var(--padding) * 1.5);
	background-color: rgba(255, 255, 255, 0);
}

section.languages stacked-bar-chart:hover segment {
	opacity: .5;
}

section.languages stacked-bar-chart segment {
	--border-corner-radius: 100px;

	transition: 150ms opacity;
	min-width: 5%;
	height: 100%;
	color: white;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(255, 255, 255, .1);
	border-radius: 2px;
}

section.languages stacked-bar-chart segment:hover {
	opacity: 1;
}

section.languages stacked-bar-chart a:first-child segment {
	border-top-right-radius: var(--padding);
	border-bottom-right-radius: var(--padding);
	border-top-left-radius: var(--border-corner-radius);
	border-bottom-left-radius: var(--border-corner-radius);
}

section.languages stacked-bar-chart a:last-child segment {
	border-top-left-radius: var(--padding);
	border-bottom-left-radius: var(--padding);
	border-top-right-radius: var(--border-corner-radius);
	border-bottom-right-radius: var(--border-corner-radius);
}

section.languages stacked-bar-chart a:nth-child(odd) segment {
	background-color: rgba(255, 255, 255, .3);
}

section.languages stacked-bar-chart segment p {
	text-align: center;
	color: inherit;
	overflow: hidden;
	white-space: nowrap;
	pointer-events: none;
	text-overflow: ellipsis;
	padding: 0 3px;
}

section.languages stacked-bar-chart segment[style="width:0%;"] p span {
	display: none;
}

section.languages stacked-bar-chart segment[style="width:0%;"] p::before {
	content: "<1%";
	opacity: .5;
}

section.languages stacked-bar-chart a segment[data-lang="Go"] { background-color: #00add8; }
section.languages stacked-bar-chart a segment[data-lang="PHP"] { background-color: #4f5d95; }
section.languages stacked-bar-chart a segment[data-lang="CSS"] { background-color: #563d7c; }
section.languages stacked-bar-chart a segment[data-lang="HTML"] { background-color: #e34c26; }
section.languages stacked-bar-chart a segment[data-lang="Python"] { background-color: #3572a5; }
section.languages stacked-bar-chart a segment[data-lang="TypeScript"] { background-color: #3178c6; }
section.languages stacked-bar-chart a segment[data-lang="Shell"] { background-color: #89e051; color: black; }
section.languages stacked-bar-chart a segment[data-lang="JavaScript"] { background-color: #f1e05a; color: black; }

/* ### Hoverpop */

section.languages stacked-bar-chart segment [data-hover] {
	display: none;
	position: absolute;
	top: 0;
	left: 0;
	text-align: center;
	transform: translate(0, 0);
	background-color: inherit;
	padding: 5px 10px;
	white-space: nowrap;
	pointer-events: none;
	border-radius: 6px;
	-webkit-backdrop-filter: brightness(.2) blur(20px);
	backdrop-filter: brightness(.2) blur(20px);
}

section.languages stacked-bar-chart segment [data-hover].hovering {
	display: initial;
}

/* # 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);
	}
}