/* Please do not judge me on this code. It was quite rushed and could have been made much better with a framework but I can't use that for a GitHub page. */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

@font-face {
	font-family: 'Font Awesome Solid';
	src: url('/assets/fonts/fa-solid-900.ttf');
}

:root {
	--contrast-color: color-mix(in srgb, #24b6cf, #be6fff);

	--background-color-1: #0a0c0d;
	--background-color-1-5: color-mix(in srgb, var(--background-color-1) 97%, var(--text-color-1));
	--background-color-2: color-mix(in srgb, var(--background-color-1) 94%, var(--text-color-1));
	--background-color-3: color-mix(in srgb, var(--background-color-1) 88%, var(--text-color-1));
	--background-color-4: color-mix(in srgb, var(--background-color-1) 82%, var(--text-color-1));
	--background-color-5: color-mix(in srgb, var(--background-color-1) 76%, var(--text-color-1));

	--text-color-1: #ffffff;
	--text-color-2: color-mix(in srgb, var(--text-color-1) 82.5%, #000000);
	--text-color-3: color-mix(in srgb, var(--text-color-1) 75%, #000000);
	--text-color-4: color-mix(in srgb, var(--text-color-1) 62.5%, #000000);

	--border-color: color-mix(in srgb, var(--text-color-1) 20%, var(--background-color-1));

	--nav-bar-height: 3.5rem;

	--full-width: calc(100vw - var(--scrollbar-width));
	--center-width: min(80rem, var(--full-width) - 5rem);
	--center-padding: calc((var(--full-width) - var(--center-width)) / 2);
}

* {
	box-sizing: border-box;
	margin: 0;
}

html {
	width: 100%;
	min-height: 100%;
	color: var(--text-color-1);

	font-family: "Inter", serif;
	font-optical-sizing: auto;
	font-weight: normal;
	font-style: normal;

	scroll-padding-top: var(--nav-bar-height);
	scroll-behavior: smooth;
}

body {
	width: 100%;
	min-height: 100%;
	background: var(--background-color-1);
	-webkit-text-size-adjust: 100%;
}

main {
	padding-top: var(--nav-bar-height);
}

main > *:nth-child(n+2) {
	margin-top: 4rem;
}

main > *:nth-child(2) {
	margin-top: 2rem;
}

.center-width {
	width: var(--center-width);
	margin: auto;
}

#nav-bar {
	border-bottom: 1px solid var(--border-color);
	background: var(--background-color-1);
	position: fixed;
	width: 100%;
	z-index: 100;
}

#nav-bar > * {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--nav-bar-height);
}

#nav-bar > * > *:first-child a {
	font-weight: 500;
}

#nav-bar a {
	color: var(--text-color-1);
	text-decoration: none;
}

#nav-bar ul {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

#nav-bar li {
	list-style: none;
}

#nav-bar li a {
	color: var(--text-color-3);
	font-size: 0.8em;
	padding: 0.3rem;
}

@media screen and (max-width: 800px) {
	#nav-bar li:nth-last-child(n+2) {
		display: none;
	}
}

#landing-div {
	/* width: calc(100% - var(--center-padding) * 2); */
	height: 35vh;
	border-bottom: 1px solid var(--border-color);
	box-sizing: content-box;
	position: relative;
	overflow: hidden;

	padding: 0 var(--center-padding);

	display: flex;
	gap: 2rem;
}

#landing-div::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background:
		linear-gradient(to right, var(--background-color-1) 0%, color-mix(in srgb, var(--background-color-1) 20%, transparent) var(--center-padding), transparent 40%, transparent 60%, color-mix(in srgb, var(--background-color-1) 20%, transparent) calc(100% - var(--center-padding)), var(--background-color-1) 100%)
		/*,
		linear-gradient(to bottom, var(--background-color-1) 0%, color-mix(in srgb, var(--background-color-1) 20%, transparent) 15%, transparent 40%, transparent 60%, color-mix(in srgb, var(--background-color-1) 20%, transparent) 85%, var(--background-color-1) 100%)*/
	;
	pointer-events: none;
}

#landing-div > *:first-child {
	width: 40%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.5rem;
	z-index: 1;
}

#landing-div > *:last-child {
	position: relative;
	flex: 1;
}

#welcome-text-container a {
	color: var(--text-color-1);
}

#knowledge-grid {
	width: 100%;
	height: 100%;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	font-size: 0.8rem;

	--cell-size: 5em;
}

#knowledge-grid > * {
	width: round(up, 500rem, calc(var(--cell-size) * 2));
	height: round(up, 500rem, calc(var(--cell-size) * 2));
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate3d(1, 0, 0, 50deg) rotate3d(0, 0, 1, 45deg) translate(calc(var(--cell-size) / -2), 0);
	background:
		linear-gradient(-90deg, rgba(255, 255, 255, .1) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .1) 1px, transparent 1px),
		linear-gradient(-90deg, rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
		linear-gradient(transparent 3px, var(--background-color-1) 3px, var(--background-color-1) calc(var(--cell-size) - 2px), transparent calc(var(--cell-size) - 2px)),
		linear-gradient(-90deg, rgba(255, 255, 255, 0.35) 1px, transparent 1px),
		linear-gradient(-90deg, transparent 3px, var(--background-color-1) 3px, var(--background-color-1) calc(var(--cell-size) - 2px), transparent calc(var(--cell-size) - 2px)),
		linear-gradient(rgba(255, 255, 255, 0.35) 1px, transparent 1px),
		var(--background-color-1);
	background-size:
		calc(var(--cell-size) / 8) calc(var(--cell-size) / 8),
		calc(var(--cell-size) / 8) calc(var(--cell-size) / 8),
		var(--cell-size) var(--cell-size),
		var(--cell-size) var(--cell-size),
		var(--cell-size) var(--cell-size),
		var(--cell-size) var(--cell-size),
		var(--cell-size) var(--cell-size),
		var(--cell-size) var(--cell-size);

	--cell-position-x: 0;
	--cell-position-y: 0;
}

#knowledge-grid > * > * {
	width: var(--cell-size);
	height: var(--cell-size);
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) translate(calc(var(--cell-size) * calc(var(--cell-position-x) + 0.5) - 10px), calc(var(--cell-size) * calc(var(--cell-position-y) + 0.5) - 10px));
	background-color: var(--text-color-1);
	border-radius: 10px;
	padding: calc(var(--cell-size) * 0.125);
	box-shadow:
		1px 1px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		2px 2px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		3px 3px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		4px 4px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		5px 5px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		6px 6px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		7px 7px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		8px 8px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		9px 9px color-mix(in srgb, var(--text-color-1) 75%, #000000),
		10px 10px color-mix(in srgb, var(--text-color-1) 75%, #000000);
}

#knowledge-grid > * > *::after {
	content: var(--cell-text);
	font-weight: 600;
	font-size: 1.1em;
	white-space: pre;
	text-align: center;
	width: max-content;
	position: absolute;
	top: calc(100% + 0.5em);
	left: 50%;
	transform: translate(-50%, 0) translate(10px, 10px);
	color: var(--text-color-1);
	pointer-events: none;
}

#knowledge-grid > * > * > * {
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1000px) {
	#landing-div {
		width: calc(100% - var(--center-padding) * 2);
		height: fit-content;

		flex-direction: column;
		padding: 2rem var(--center-padding);
	}

	#landing-div > *:first-child {
		width: 100%;
	}

	#landing-div > *:last-child {
		width: 100%;
		aspect-ratio: 16 / 9;
		flex: unset;
	}
}

@media screen and (max-width: 700px) {
	#knowledge-grid {
		font-size: 0.7rem;
	}
}

@media screen and (max-width: 500px) {
	#landing-div > *:last-child {
		aspect-ratio: 12 / 9;
	}

	#knowledge-grid {
		font-size: 0.6rem;
	}

	#knowledge-grid > * > * {
		transform: translate(-50%, -50%) translate(calc(var(--cell-size) * calc(var(--cell-position-x) + 0.5) - 7px), calc(var(--cell-size) * calc(var(--cell-position-y) + 0.5) - 7px));
		box-shadow:
			1px 1px color-mix(in srgb, var(--text-color-1) 75%, #000000),
			2px 2px color-mix(in srgb, var(--text-color-1) 75%, #000000),
			3px 3px color-mix(in srgb, var(--text-color-1) 75%, #000000),
			4px 4px color-mix(in srgb, var(--text-color-1) 75%, #000000),
			5px 5px color-mix(in srgb, var(--text-color-1) 75%, #000000),
			6px 6px color-mix(in srgb, var(--text-color-1) 75%, #000000),
			7px 7px color-mix(in srgb, var(--text-color-1) 75%, #000000);
	}
}

.section-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.75rem;
	border-radius: 9999px;
	background-color: color-mix(in srgb, var(--badge-color) 40%, white);
	font-size: 0.875rem;
	line-height: 1.25rem;
	font-weight: 600;
	color: var(--badge-color);
}

.section-badge > *:first-child {
	fill: var(--badge-color);
	width: 1rem;
	height: 1rem;
}

.section-badge > *:last-child {
	margin-left: 0.25rem;
}

.lightened-background {
	background: linear-gradient(180deg, transparent, rgba(97, 106, 115, .06) 40%, rgba(97, 106, 115, .06) 60%, rgba(97, 106, 115, 0));
}

#about-me-section > * + * {
	margin-top: 2rem;
}

#introduction-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	width: min(var(--center-width), 70rem);
}

.large-paragraph-container {
	flex: 1;
}

.large-paragraph-container > * + * {
	margin-top: 0.6rem;
}

.large-paragraph-container > p {
	color: var(--text-color-2);
	line-height: 150%;
}

.large-paragraph-container > p a {
	color: var(--text-color-2);
}

#core-competencies > * > * {
	background-color: var(--background-color-1-5);
}

#core-competencies > * > * > *:nth-child(1) {
	width: 100%;
	aspect-ratio: 16 / 7;
	background-size: cover;
	background-position: 50%;
	position: relative;
}

#core-competencies > * > * > *:nth-child(1)::after {
	content: '';
	display: block;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(to top, var(--background-color-1-5) 10px, color-mix(in srgb, var(--background-color-1-5) 25%, transparent) 40%);
}

#core-competencies > * > * > *:nth-child(2) {
	padding: 0.75rem 1.5rem 1.5rem 1.5rem;
}

#core-competencies > * > * > * > * + * {
	margin-top: 0.5rem;
}

#core-competencies > * > * > * p {
	color: var(--text-color-2);
	line-height: 150%;
}

.scroll-carousel {
	overflow: scroll hidden;
	overscroll-behavior-x: contain;
	scroll-snap-stop: always;
	scroll-snap-type: x mandatory;
	scrollbar-width: none !important;
}

.scroll-carousel > * {
	display: grid;
	grid-auto-flow: column;
	gap: var(--carousel-gap);
	grid-gap: var(--carousel-gap);
}

.scroll-carousel > *::before,
.scroll-carousel > *::after {
	content: '';
	display: block;
	width: calc((var(--full-width) - var(--center-width) - var(--carousel-gap) * 2) / 2);
}

.scroll-carousel > * > * {
	width: max(18rem, calc((var(--center-width) - (var(--carousel-count) - 1) * var(--carousel-gap)) / var(--carousel-count)));
	border: 1px solid var(--border-color);
	border-radius: 1rem;
	scroll-snap-align: center;
	overflow: hidden;
}

.horizontal-image-and-text {
	margin-bottom: 2rem;
}

.horizontal-image-and-text > * {
	display: flex;
	gap: 3rem;
}

.horizontal-image-and-text.left-image > * > *:first-child {
	width: 40%;
}

.horizontal-image-and-text.left-image > * > *:first-child img {
	width: 100%;
}

.horizontal-image-and-text.right-image > * > *:last-child {
	width: 40%;
}

.horizontal-image-and-text.right-image > * > *:last-child img {
	width: 100%;
}

@media screen and (max-width: 1000px) {
	.horizontal-image-and-text > * {
		flex-direction: column;
		align-items: center;
	}

	.horizontal-image-and-text.left-image > * > *:first-child {
		width: 100% !important;
	}

	.horizontal-image-and-text.right-image > * > *:last-child {
		width: 100% !important;
	}
}

#exoborne-image {
	aspect-ratio: 962 / 794;
	position: relative;
}

#exoborne-image > *:first-child {
	width: 100%;
	height: 100%;
	background-image: url("/assets/default/exoborne.jpg");
	background-size: cover;
	border: 0.15rem solid var(--border-color);
}

#exoborne-image > *:last-child {
	position: absolute;
	top: calc(-7 / 794 * 100%);
	left: calc(-24 / 962 * 100%);
	width: calc(1005 / 962 * 100%);
	height: calc(824 / 794 * 100%);
}

@media screen and (max-width: 1000px) {
	#sharkmob-description-container > * {
		flex-direction: column-reverse;
	}
}

.highlight-container {
	width: min(var(--center-width), 70rem);
	margin: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 1px;
	background-color: var(--border-color);
	position: relative;
	justify-content: stretch;
}

.highlight-container::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background:
		linear-gradient(to right, var(--background-color-1) 1rem, transparent 3rem, transparent calc(100% - 3rem), var(--background-color-1) calc(100% - 1rem)),
		linear-gradient(to bottom, var(--background-color-1) 1rem, transparent 3rem, transparent calc(100% - 3rem), var(--background-color-1) calc(100% - 1rem));
	pointer-events: none;
}

.highlight-container > * {
	width: min(17rem, var(--center-width));
	flex-grow: 1;
	padding: 1.5rem;
	background-color: var(--background-color-1);
}

.highlight-container > * > * {
	position: relative;
	z-index: 2;
}

.highlight-container > * > * > *:nth-child(1) {
	height: 1.5rem;
	margin-bottom: 0.75rem;
	fill: white;
}

.highlight-container > * > * > *:nth-child(2) {
	margin-bottom: 0.4rem;
}

.highlight-container > * > * > *:nth-child(3) {
	color: var(--text-color-2);
}

#tga-carousel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
}

#tga-carousel > *:nth-child(1) {
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 2px solid var(--border-color);
	position: relative;
}

#tga-carousel > *:nth-child(1) > * {
	width: 100%;
	height: 100%;
	position: absolute;
	display: grid;
	top: 0;
	left: 0;
	grid-template-columns: repeat(7, 100%);
	transition: left 0.4s ease-in-out;
}

#tga-carousel > *:nth-child(1) > * > * {
	width: 100%;
	height: 100%;
	background-size: cover;
	float: left;
}

#tga-carousel > *:nth-child(2) {
	display: flex;
	gap: 0.4rem;
}

#tga-carousel > *:nth-child(2) > * {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 0.25rem;
	background: color-mix(in srgb, var(--border-color) 80%, var(--text-color-1));
	overflow: hidden;
	transition: width 0.4s ease-in-out;
}

#tga-carousel > *:nth-child(2) > *::after {
	content: '';
	display: block;
	width: 0px;
	height: 100%;
	background: var(--text-color-4);
}

#tga-carousel > *:nth-child(2) > *.active {
	width: 4.5rem;
}

#tga-carousel > *:nth-child(2) > *.active::after {
	width: 100%;
	transition: width 5s linear;
}

#tga-courses-container {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: center;
	margin-bottom: 2rem;
}

#tga-courses-container > *:nth-child(2) {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

#tga-courses-container > *:nth-child(2) > * {
	padding: 0.4rem 0.7rem;
	background: var(--background-color-1-5);
	border: 1px solid var(--background-color-4);
	border-radius: 0.4rem;
	font-size: 0.8em;
	color: var(--text-color-2);
	display: flex;
	align-items: center;
	gap: 0.5em;
}

#tga-courses-container > *:nth-child(2) > * > *:nth-last-child(2) {
	fill: var(--text-color-2);
	height: 1.2em;
}

#tga-highlight-container > * {
	width: min(calc(17rem * 2), var(--center-width));
}

#miscellaneous-section > * > * + * {
	margin-top: 2rem;
}

.simple-highlight-container {
	display: flex;
	gap: 1rem;
	text-align: center;
}

.simple-highlight-container > *:nth-child(2n+1) {
	flex: 1;
	line-height: 150%;
}

.simple-highlight-container > *:nth-child(2n+1) > * + * {
	margin-top: 0.5rem;
}

.simple-highlight-container > *:nth-child(2n+1) > *:nth-child(n+2) {
	color: var(--text-color-2);
}

.simple-highlight-container > *:nth-child(2n) {
	width: 1px;
	background-color: var(--border-color);
}

@media screen and (max-width: 1000px) {
	.simple-highlight-container {
		flex-direction: column;
		padding: 0 1.5rem;
	}

	.simple-highlight-container > *:nth-child(2n) {
		width: 100%;
		height: 1px;
	}
}

#contact-section {
	padding: 2rem 0 6rem 0;
}

#contact-section > * {
	width: min(var(--center-width), 70rem);
	display: flex;
	flex-direction: column;
	align-items: center;
}

#contact-section > * > *:nth-child(n+2) {
	font-size: 1.15em;
	margin-top: 1rem;
}

#contact-section > * > *:nth-child(2) {
	margin-top: 0.25rem;
}

#contact-section-horizontal-container {
	display: flex;
	gap: 2rem;
}

#contact-section-horizontal-container > * {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}

#contact-section-horizontal-container > * > *:nth-child(1) {
	height: 1.35rem;
	fill: var(--text-color-1);
}

#contact-section-horizontal-container > * > *:nth-child(2) {
	color: var(--text-color-1);
}

#contact-section-horizontal-container > * > *:nth-child(2) a {
	color: var(--text-color-1);
	text-decoration: none;
}

@media screen and (max-width: 700px) {
	#contact-section-horizontal-container {
		flex-direction: column;
		align-items: center;
		gap: 1rem;
	}
}

#contact-section-status-container {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.pulsating-dot-container {
	position: relative;
}

.pulsating-dot {
	position: relative;
	width: 0.7em;
	height: 0.7em;
	background-color: var(--dot-color);
	border-radius: 50%;
}

.pulsating-dot > * {
	border: 3px solid var(--dot-color);
	border-radius: 50%;
	height: calc(100% - 10px);
	width: calc(100% - 10px);
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	animation: pulsating-dot 1s ease-out;
	animation-iteration-count: infinite;
	opacity: 0;
}

@keyframes pulsating-dot {
	0% {
		width: calc(100% - 10px);
		height: calc(100% - 10px);
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		width: 250%;
		height: 250%;
		opacity: 0;
	}
}

footer {
	padding: 1rem 0;
	border-top: 1px solid var(--border-color);
	background-color: var(--background-color-1-5);
}

footer > * {
	display: flex;
	gap: 2rem;
	justify-content: space-between;
	align-items: center;
}

footer > * > * {
	color: var(--text-color-4);
}

footer > * a {
	color: var(--text-color-4);
}

footer > * > *:first-child a {
	text-decoration: none;
}

footer > * > *:last-child {
	text-align: right;
}

footer > * > *:last-child > *:nth-child(2) {
	font-size: 0.9em;
	margin-top: 0.1rem;
}