html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	padding: 0;
	background: #000;
	overflow-y: scroll;
	display: flex;
	flex-direction: column;

	font-family: "JetBrains Mono", monospace;
}

.firstpage {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 50px;
	min-height: 100svh;
	width: 100%;
}

@keyframes animated-text-animation {
	0% {
		background: linear-gradient(90deg, #80c0f0, #f080c0);
	}
	25% {
		background: linear-gradient(90deg, #f080c0, #80c0f0);
	}
	50% {
		background: linear-gradient(90deg, #80c0f0, #f080c0);
	}
	100% {
		background: linear-gradient(90deg, #80c0f0, #f080c0);
	}
}

@keyframes bobbing {
	0% {
		transform: translateY(0px);
	}
	25% {
		transform: translateY(-3px);
	}
	50% {
		transform: translateY(0px);
	}
	75% {
		transform: translateY(3px);
	}
	100% {
		transform: translateY(0px);
	}
}

@keyframes animated-text-animation {
	to {
		background-position: -200% center;
	}
}

animated-text {
	background: linear-gradient(90deg, #80c0f0, #f080c0, #80c0f0);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	animation: animated-text-animation 2s linear infinite;
}

nav {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	width: 100%;

	div {
		display: flex;
		flex-direction: row;
		padding: 0px 20px;

		a {
			font-size: 18px;
			color: #80c0f0;
			opacity: 0.7;
			text-decoration: underline;
			padding: 20px;
			cursor: pointer;
			transition: 300ms;

			&:hover {
				opacity: 1;
			}
		}
	}
}

h1 {
	box-sizing: border-box;
	width: 100%;
	text-align: center;
	margin: 0;
	overflow-wrap: anywhere;
	padding: 0px 10%;


	&#a1 {
		font-size: min(6vw, 60px);
		color: #bb9900;
	}
	&#a2 {
		font-size: min(6vw, 60px);
		color: #33aa33;
	}
	&#a3 {
		font-size: min(10vw, 60px);
		animation: bobbing 0.5s linear infinite;
		cursor: pointer;
	}
	&#b1 {
		margin-top: 100px;
		font-size: min(6vw, 60px);
		color: #bb9900;
	}
	&#b2 {
		margin-top: 30px;
		margin-bottom: 200px;
		a {
			font-size: min(4vw, 40px);
			cursor: pointer;
			text-decoration: underline;
			color: #80c0f0;
		}
	}
}

#people {
	margin-top: 50px;
	width: 100%;
	display: flex;
	flex-direction: row;
	box-sizing: border-box;
	padding: 30px 3%;

	.human {
		flex: 1 1 0%;

		img {
			margin: 0px max(15%, calc(50% - 150px));
			width: min(70%, 300px);
			border-radius: 25%;
		}

		h2 {
			text-align: center;
			box-sizing: border-box;
			padding: 0px 3%;
			color: #ffcc00;
			margin: 20px 0px;
			margin-bottom: 50px;
		}

		p, ul {
			box-sizing: border-box;
			padding: 0px 6%;
			color: #dddddd;
			margin: 0px;
			margin-bottom: 50px;

			a {
				color: #00d0f0;
			}
		}

		p {
			text-align: center;
		}

		ul {
			text-align: left;

			li {
				margin: 10px 0px;
			}
		}
	}
}
@media only screen and (max-width: 1000px) {
	#people {
		flex-direction: column;

		.human {
			margin-bottom: 100px;
		}
	}
}
@media only screen and (max-width: 600px) {
	nav a {
		padding: 20px 10px !important;
	}
}
@media only screen and (max-width: 400px) {
	nav a {
		font-size: 12px !important;
	}
}

#vid {
	background-color: black;
	position: sticky;
	height: 100dvh;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	display: none;
}