/* Font definitions. */
@font-face {
  font-family: Moon Sans;
  src: url(assets/MoonSansRegular.ttf);
}
@font-face {
  font-family: Moon Sans;
	font-style: oblique;
  src: url(assets/MoonSansOblique.ttf);
}
/* Global variables. */
* {
	--s: calc(1vw + 1vh);
	--transit: calc(1.5*var(--s));
	--easeout: cubic-bezier(0,0,0,1);
	--bg: #080808;
	--fg: #d1d1d1;
	margin: 0;
	padding: 0;
	user-select: none;
}
body {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--fg);
	background-color: var(--bg);
	transition: all 350ms ease;
}
svg, img {
	width: 100%;
	height: 100%;
}
svg {fill: var(--fg)}
img {
	object-fit: contain;
	pointer-events: none;
}
.align {background-color: #ffffff11}
/* Text styles. */
h1, h2, h3, h4, p {
	font-family: Moon Sans;
	font-weight: normal;
}
h1 {font-size: calc(6*var(--s))}
h2 {font-size: calc(3*var(--s))}
h3 {font-size: calc(2*var(--s))}
h4 {font-size: calc(1.7*var(--s))}
p {font-size: calc(1.3*var(--s))}
/* Preset animations. */
@keyframes up {
	0% {opacity: 1}
	100% {transform: translateY(calc(var(--transit) * -1)); opacity: 0}
}
@keyframes down {
	0% {opacity: 1}
	100% {transform: translateY(var(--transit)); opacity: 0}
}
@keyframes blink {
	0% {opacity: 0}
	50% {opacity: 1}
	100% {opacity: 0}
}
@keyframes moon {
	0% {top: 100vh}
	100% {top: 20vh}
}
/* Navigation and pages shared variables. */
nav, #pages {
	animation: 3500ms linear 1200ms 0.5 backwards blink;
	mix-blend-mode: difference;
}
/* Navigation section. */
nav {
	height: calc(13.5*var(--s));
	position: absolute;
	display: grid;
	inset: 5% 3% auto auto;
	h3 {
		width: fit-content;
		height: 55%;
		margin-left: auto;
		&:hover {
			opacity: 0.5;
			cursor: pointer;
		}
	}
	span {
		display: none;
		animation: 1000ms linear blink;
		&:first-child {animation-iteration-count: 0.5}
		&:nth-child(2) {animation-iteration-count: infinite}
	}
}
/* The dynamic background. */
#bg {
	--size: 130vw;
	width: var(--size);
	height: var(--size);
	position: absolute;
	top: 20vh;
	display: flex;
	align-items: center;
	animation: 900ms cubic-bezier(0.2,0,0,1) 110ms backwards moon;
	transform: rotate(90deg);
	svg {
		--size: 10%;
		width: var(--size);
		height: var(--size);
	}
}
/* Container for the pages. */
#pages {
	--size: calc(35*var(--s));
	width: var(--size);
	height: var(--size);
	display: flex;
	align-items: center;
	justify-content: center;
	transform: translateZ(0);
}
/* Universal page variables. */
.page {
	display: none;
	align-items: center;
	& > h1, & > h3 {text-align: center}
	& > h1 {line-height: 0.9}
	& > h3 {font-style: oblique}
	& > div {
		display: flex;
		justify-content: space-between;
		div {
			height: 100%;
			display: grid;
			align-items: center;
		}
	}
	/* Page 1: Home. */
	&:first-child {
		width: 90%;
		height: 55%;
		a {
			width: 14%;
			&:hover {opacity: 0.5}
		}
		h2 {
			margin-top: -6.5%;
			text-align: center;
		}
		div {
			width: 60%;
			margin-left: 20%;
		}
	}
	/* Page 2: Skills. */
	&:nth-child(2) {
		width: 55%;
		height: 65%;
		h3 {margin-top: -26.5%}
		p {height: 50%}
		svg:first-child {transform: scale(1.15)}
		svg:nth-child(2) {transform: scale(1.15) rotate(30deg)}
		svg:nth-child(4) {transform: scale(1.08)}
		& > div {
			width: 70%;
			height: 100%;
			margin-left: 15%;
			div:first-child {width: 11%}
		}
	}
	/* Page 3: Projects. */
	&:nth-child(3) {
		width: 75%;
		height: 77.5%;
		h3 {margin-top: -12%}
		h4 {line-height: 1.28}
		img, a {transition: all 500ms var(--easeout)}
		img {
			position: absolute;
			opacity: 0;
			border-radius: calc(0.5*var(--s));
			object-fit: cover;
		}
		& > div {
			width: 90%;
			height: 90%;
			display: grid;
			margin-left: 5%;
		}
		a {
			width: 100%;
			height: 75%;
			display: grid;
			padding: 2%;
			color: var(--fg);
			text-decoration: none;
			&:hover {
				transform: scale(1.05);
				img {opacity: 0.15}
			}
		}
	}
	/* Page 4: Bio. */
	&:nth-child(4) {
		width: 60%;
		height: 65%;
		transform: translateZ(0);
		h3 {margin-top: -14.5%}
		h4 {
			position: absolute;
			inset: auto 26% 13.2% auto;
			font-size: calc(2.15*var(--s));
		}
		span {font-size: calc(1.95*var(--s))}
		& > p {
			text-align: center;
			line-height: 1.5;
		}
		& > svg {
			--size: 29%;
			width: var(--size);
			height: var(--size);
			position: absolute;
			inset: auto 6.5% 0 auto;
		}
		& > div {
			width: 42%;
			height: 100%;
			margin: -5% 0 0 13%;
			div:first-child {width: 14.5%}
			p {
				height: 60%;
				font-size: calc(1.15*var(--s));
			}
		}
	}
}
/* The dynamic separator. */
#sep {
	--width1: 65%;
	--top1: 57.5%;
	--width2: 44%;
	--top2: 49.2%;
	--width3: 56%;
	--top3: 40.7%;
	--width4: 54%;
	--top4: 46.9%;
	height: 3px;
	position: absolute;
	background-color: var(--fg);
	border-radius: 50px;
	transition: all 800ms var(--easeout);
}