/* # Overrides */

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

	--primer-color-go: 0, 173, 216;
	--primer-color-php: 79, 93, 149;
	--primer-color-css: 86, 61, 124;
	--primer-color-html: 227, 76, 38;
	--primer-color-shell: 137, 224, 81;
	--primer-color-python: 53, 114, 165;
	--primer-color-typescript: 49, 120, 198;
	--primer-color-javascript: 241, 224, 90;

	--color-go: rgb(var(--primer-color-go));
	--color-php: rgb(var(--primer-color-php));
	--color-css: rgb(var(--primer-color-css));
	--color-html: rgb(var(--primer-color-html));
	--color-shell: rgb(var(--primer-color-shell));
	--color-python: rgb(var(--primer-color-python));
	--color-typescript: rgb(var(--primer-color-typescript));
	--color-javascript: rgb(var(--primer-color-javascript));
}

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

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

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

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

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

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

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

			@media (hover: hover) {
				&:hover chart-segment {
					opacity: .5;
				}
			}

			&:last-of-type {
				flex-direction: row-reverse;
			}

			chart-segment {
				--border-corner-radius: 100px;

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

				&[data-lang="Go"] { background-color: var(--color-go); }
				&[data-lang="PHP"] { background-color: var(--color-php); }
				&[data-lang="CSS"] { background-color: var(--color-css); }
				&[data-lang="HTML"] { background-color: var(--color-html); }
				&[data-lang="Python"] { background-color: var(--color-python); }
				&[data-lang="TypeScript"] { background-color: var(--color-typescript); }
				&[data-lang="Shell"] { background-color: var(--color-shell); color: black; }
				&[data-lang="JavaScript"] { background-color: var(--color-javascript); color: black; }

				&[data-hover] {
					display: none;
				}

				a:first-child & {
					border-top-left-radius: var(--border-corner-radius);
					border-top-right-radius: var(--padding);
					border-bottom-left-radius: var(--border-corner-radius);
					border-bottom-right-radius: var(--padding);
				}

				a:last-child & {
					border-top-left-radius: var(--padding);
					border-top-right-radius: var(--border-corner-radius);
					border-bottom-left-radius: var(--padding);
					border-bottom-right-radius: var(--border-corner-radius);
				}

				stacked-bar-chart:last-of-type a:first-child & {
					border-top-left-radius: var(--padding);
					border-top-right-radius: var(--border-corner-radius);
					border-bottom-left-radius: var(--padding);
					border-bottom-right-radius: var(--border-corner-radius);
				}

				stacked-bar-chart:last-of-type a:last-child & {
					border-top-left-radius: var(--border-corner-radius);
					border-top-right-radius: var(--padding);
					border-bottom-right-radius: var(--padding);
					border-bottom-left-radius: var(--border-corner-radius);
				}

				p {
					color: inherit;
					padding: 0 3px;
					overflow: hidden;
					text-align: center;
					white-space: nowrap;
					pointer-events: none;
					text-overflow: ellipsis;

					chart-segment[style="--size:0%;"] & {
						&::before {
							content: "<1%";
							opacity: .5;
						}

						span {
							display: none;
						}
					}
				}

				@media (hover: hover) {
					opacity: 1;

					&[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;
						z-index: 2000;
						-webkit-backdrop-filter: brightness(.2) blur(20px);
						backdrop-filter: brightness(.2) blur(20px);
					}
				}
			}
		}

		languages-list {
			gap: calc(var(--padding) / 2);
			margin: var(--padding) 0;
			display: grid;
			grid-template-columns: repeat(3, 1fr);

			language-item {
				gap: 10px;
				fill: var(--color-php);
				border: solid 1px rgba(255, 255, 255, .1);
				padding: calc(var(--padding) / 1.5);
				display: flex;
				background: linear-gradient(139deg, rgba(0, 0, 0, 0) 0%, rgba(79, 93, 144, .2) 100%);
				align-items: center;
				border-radius: 8px;

				svg {
					width: 2em;
					margin-left: auto;
					transform: rotate(-90deg);
				}
			}
		}

		button {
			p {
				&.lang {
					font-size: 1.3em;
					font-weight: 900;
				}
			}
		}
	}

	&.interests {
		--text-shadow-blur: 30px;

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

		&.active {
			opacity: 1;
		}

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

/* Feature queries */

@media (hover: hover) {
	section.languages stacked-bar-chart chart-segment:hover {
		opacity: 1;
	}

	section.languages stacked-bar-chart 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;
		z-index: 2000;
		-webkit-backdrop-filter: brightness(.2) blur(20px);
		backdrop-filter: brightness(.2) blur(20px);
	}

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

/* Size queries */

@media (max-width: 900px) {
	section.languages languages-list  {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 650px) {
	section.languages languages-list  {
		grid-template-columns: 1fr;
	}
}