:root {
	--bg-1: #0b1216;
	/* page background */
	--bg-2: #071018;
	/* vignette darker */
	--accent: #ef1f4f;
	/* streak color */
	--streak-opacity: 0.08;
	/* base streak opacity */
	--streak-bright: 0.18;
	/* animated streak opacity */
	--streak-size: 140px;
	/* width of one repeated stripe */
	--speed-slow: 60s;
	--speed-fast: 20s;
}

html,
body {
	margin: 0;
	padding: 0;
	font: 46px / 50px D-DIN-Bold, Arial, Verdana, sans-serif;
}

.titlePanel {
	background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.03), var(--CINDER_BLACK) 60%);
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: center;
}

.titlePanel .text {
	font-size: smaller;
	position: absolute;
	bottom: 1em;
}

.athleticksPanel {
	justify-content: center;
	position: relative;
}

.athleticksPanel p {
	text-align: center;
	font-size: 0.5em;
}

.athleticksPanel #logo #track_svg {
	transform: translate(10%, 0%) rotate(-90deg) scale(0.8, 0.8);
	position: absolute;
}

.athleticksPanel #logo * {
	transition: all 300ms ease-out;
}

.athleticksPanel #logo:hover #track_svg {
	transform: translate(10%, 0%) rotate(-90deg) scale(0.7, 0.7);
}

.athleticksPanel #logo:hover h1 {
	font-size: 2.1em;
}

/* CTA */
.cta {
	font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
	/* font: unset; */
	font-size: 16px;
	line-height: 1em;
	margin-top: 2.2em;
	display: inline-block;
	background: transparent;
	color: #fff;
	border: 2px solid rgba(255, 255, 255, 0.12);
	padding: 0.8em 1em;
	border-radius: 999px;
	font-weight: 700;
	letter-spacing: 0.6px;
	text-decoration: none;
	transition: all 220ms ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

.cta:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 44px rgba(239, 31, 79, 0.18);
	border-color: rgba(239, 31, 79, 0.9);
	background: linear-gradient(90deg, rgba(239, 31, 79, 0.06), transparent);
}

/* ANIMATED larger streaks on top (thin lines + glow) */
.streaks--anim {
	position: absolute;
	inset: -40%;
	background-image:
		linear-gradient(-45deg,
			transparent 0%,
			transparent 20%,
			rgba(0, 0, 0, var(--streak-bright)) 20%,
			rgba(0, 0, 0, var(--streak-bright)) 21%,
			transparent 22%,
			transparent 100%),
		repeating-linear-gradient(-45deg,
			transparent 0,
			transparent 120px,
			rgba(239, 31, 79, 0.65) 120px,
			rgba(239, 31, 79, 0.65) 123px);
	background-size: 100% 100%, 280px 280px;
	/* mix-blend-mode: screen; */
	opacity: 0.6;
	/* filter: blur(0.6px) saturate(1.2); */
	z-index: 1;
	pointer-events: none;
	animation: moveStrips var(--speed-fast) linear infinite;
	transform: rotate(-12deg);
}

@keyframes moveStrips {
	from {
		background-position: 0 0;
	}

	to {
		background-position: -982px 982px;
	}
}

.kotnPanel {
	background:
		conic-gradient(var(--CINDER_BLACK) 0deg 90deg,
			#0a151e 90deg 180deg,
			var(--CINDER_BLACK) 180deg 270deg,
			#0a151e 270deg 360deg);
	background-size: 80px 80px;
	font-family: 'Cinzel', serif;
	color: var(--TURMERIC_YELLOW);
	justify-content: center !important;
}

.aboutPanel {
	justify-content: center !important;
	font-family: Ubuntu;
	gap: 2em;
	background: linear-gradient(45deg, #57003f 0%, #f57453 100%) !important;
	/* #57003f -> #f57453 */
	position: relative;
}

#bg {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	opacity: 1;
	background: linear-gradient(180deg, var(--level0) 0%, var(--level1) 100%) !important;
	transition: opacity 1s ease;
	transition-delay: 0.1s;
}

.aboutPanel.bg #bg {
	opacity: 0;
}

.aboutPanel layout,
.aboutPanel .image {
	box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5);
	border-radius: 10px;
	z-index: 5;
}

.aboutPanel layout {
	position: relative;
	background: var(--level1) !important;
	width: 60vw;
	height: 55vh;
	justify-content: flex-start !important;
	align-items: flex-start !important;
}

.aboutPanel layout a {
	color: var(--CURIOS_BLUE)
}

#termTitle {
	font-size: 0.3em;
	margin: 0;
	line-height: 1.5em;
	width: 100%;
	padding: 0.2em;
	background: linear-gradient(#504b45 0%, #3c3b37 100%);
	padding-left: 1em;
	align-items: center;
}

#termCont {
	background: rgba(56, 4, 40, 0.9);
	font-family: 'Ubuntu Mono';
	font-size: 0.3em;
	height: 100%;
	margin: 0;
	width: 100%;
	height: 100%;
	padding-left: 1em;
	display: flex;
}

#termCont #response {
	position: absolute;
	left: 1em;
	top: 5em;
	line-height: 1.2em;
}

#terminal__prompt {
	display: flex;
}

#terminal__prompt--user {
	color: var(--AQUA_GREEN);
}

#terminal__prompt--location {
	color: var(--CURIOS_BLUE);
}

#terminal__prompt--text {
	margin-left: 1em;
}

#terminal__prompt--bling {
	color: var(--DEBIAN_RED);
}

#terminal__prompt--cursor {
	display: block;
	height: 1.2em;
	width: 0.7em;
	animation: blink 1200ms linear infinite;
	transform: translate(0, 100%);
}

@keyframes blink {
	0% {
		background: #ffffff;
	}

	49% {
		background: #ffffff;
	}

	60% {
		background: transparent;
	}

	99% {
		background: transparent;
	}

	100% {
		background: #ffffff;
	}
}

.canvasBackground {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
}

.canvasBackground canvas {
	width: 100%;
	height: 100%;
}

.panel Layout {
	background: none;
}

.elegenPanel {
	position: relative;
	justify-content: center;
}

.elegenPanel .text {
	position: relative;
	z-index: 100;
	top: 1em;
}

.personCard, .tile {
	pointer-events: none;
}

.personCard span, .tile span {
	opacity: 0;
}

.ElegenLayout {
	position: absolute;
}

.ElegenLayout .menu {
    z-index: 2;
    position: absolute;
    left: 0em;
    top: 0em;
	opacity: 0;
}

.ElegenLayout, .ElegenLayout * {
	font-family: 'D-DIN-Bold', Arial, Verdana, sans-serif;
	font-size: small;
}

@media (max-width: 768px) {

	html,
	body {
		font: 23px / 25px D-DIN-Bold, Arial, Verdana, sans-serif;
	}


	.aboutPanel {
		flex-direction: column !important;
	}

	.aboutPanel layout {
		width: 80vw;
		height: 45vh;
	}
}

@media (min-width: 768px) {
	.aboutPanel {
		flex-direction: row !important;
	}


}