@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

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

:root {
	--bright-white: #E9EBF8;
	--slate-blue: #6665DD;
	--bright-indigo: #473BF0;
	--shadow-gray: #1E1E24;
	--gray: #151515;
	--violet: #5234BF;
	--midnight-violet: #160F29;
	--dark-onyx: #030303;
}

body {
	background-color: var(--dark-onyx);
	color: var(--bright-white);
	font-family: 'Ubuntu', sans-serif;
	font-size: 1.2rem;
	line-height: 1.5;
	font-weight: 300;
	overflow: scroll;
}

html,
body {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;
}

main {
	min-height: 100vh;
}

.nav-button-primary {
	background-color: var(--violet);
	color: var(--bright-white);
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.9;
	border: 1px solid var(--dark-onyx);
	transition:
		opacity 0.5s ease-in-out,
		box-shadow 0.5s ease-in-out;
}

.nav-button-primary:hover {
	opacity: 1;
	box-shadow: 0px 2px 1rem var(--dark-onyx);
}

.nav-button {
	text-decoration: none;
	padding: 0.75rem 1rem;
	font-size: 1rem;
	font-weight: 400;
	color: var(--bright-white);
	border-radius: 0.5rem;
	transition: text-shadow 0.5s ease-in-out;
}

.nav-button:hover {
	text-shadow:
		0px 2px 10px var(--slate-blue),
		0px 2px 10px var(--slate-blue),
		0px 2px 8px var(--bright-white);
}

#mouse-ball {
	position: fixed;
	width: 64px;
	height: 64px;
	background: var(--slate-blue);
	filter: blur(2rem);
	border-radius: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
	z-index: -1;
	transition: opacity 0.5s ease-in-out;
}

.fade-in-on-load {
	opacity: 0;
	transition: opacity 0.6s ease-in;
}

.load-fade-in {
	opacity: 1;
}

input {
	font-size: 1.2rem;
	padding: 0.5rem;
	border-radius: 0.5rem;
	border: 1px solid var(--shadow-gray);
	transition: border-color 0.5s ease-in-out;
	background-color: var(--gray);
	color: var(--bright-white);
}

input:not(:placeholder-shown):valid {
	border-color: green;
}

input:not(:placeholder-shown):invalid {
	border-color: red;
}

input:focus {
	outline: none;
	border-color: var(--slate-blue);
}

.btn {
	padding: 0.75rem 1rem;
	border-radius: 0.5rem;
	text-decoration: none;
	font-size: 1.2rem;
	font-weight: 400;
	color: var(--bright-white);
	background-color: var(--gray);
	border: 1px solid var(--shadow-gray);
	transition: border-color 0.5s ease-in-out;
}

.btn:hover {
	border-color: var(--slate-blue);
}

.animated-link {
	position: relative;
	color: var(--slate-blue);
	text-decoration: none;
}

.animated-link::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0%;
	height: 2px;
	background-color: var(--slate-blue);
	transition: width 0.3s ease;
}

.animated-link:hover::after {
	width: 100%;
}

section {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
}

.section-divider {
	width: 100%;
	height: 160px;
	background-color: var(--slate-blue);
	clip-path: polygon(100% 100%, 0% 100%, 0.00% 81.25%, 0.50% 81.02%, 1.00% 80.33%, 1.50% 79.21%, 2.00% 77.67%, 2.50% 75.76%, 3.00% 73.52%, 3.50% 71.01%, 4.00% 68.29%, 4.50% 65.43%, 5.00% 62.50%, 5.50% 59.57%, 6.00% 56.71%, 6.50% 53.99%, 7.00% 51.48%, 7.50% 49.24%, 8.00% 47.33%, 8.50% 45.79%, 9.00% 44.67%, 9.50% 43.98%, 10.00% 43.75%, 10.50% 43.98%, 11.00% 44.67%, 11.50% 45.79%, 12.00% 47.33%, 12.50% 49.24%, 13.00% 51.48%, 13.50% 53.99%, 14.00% 56.71%, 14.50% 59.57%, 15.00% 62.50%, 15.50% 65.43%, 16.00% 68.29%, 16.50% 71.01%, 17.00% 73.52%, 17.50% 75.76%, 18.00% 77.67%, 18.50% 79.21%, 19.00% 80.33%, 19.50% 81.02%, 20.00% 81.25%, 20.50% 81.02%, 21.00% 80.33%, 21.50% 79.21%, 22.00% 77.67%, 22.50% 75.76%, 23.00% 73.52%, 23.50% 71.01%, 24.00% 68.29%, 24.50% 65.43%, 25.00% 62.50%, 25.50% 59.57%, 26.00% 56.71%, 26.50% 53.99%, 27.00% 51.48%, 27.50% 49.24%, 28.00% 47.33%, 28.50% 45.79%, 29.00% 44.67%, 29.50% 43.98%, 30.00% 43.75%, 30.50% 43.98%, 31.00% 44.67%, 31.50% 45.79%, 32.00% 47.33%, 32.50% 49.24%, 33.00% 51.48%, 33.50% 53.99%, 34.00% 56.71%, 34.50% 59.57%, 35.00% 62.50%, 35.50% 65.43%, 36.00% 68.29%, 36.50% 71.01%, 37.00% 73.52%, 37.50% 75.76%, 38.00% 77.67%, 38.50% 79.21%, 39.00% 80.33%, 39.50% 81.02%, 40.00% 81.25%, 40.50% 81.02%, 41.00% 80.33%, 41.50% 79.21%, 42.00% 77.67%, 42.50% 75.76%, 43.00% 73.52%, 43.50% 71.01%, 44.00% 68.29%, 44.50% 65.43%, 45.00% 62.50%, 45.50% 59.57%, 46.00% 56.71%, 46.50% 53.99%, 47.00% 51.48%, 47.50% 49.24%, 48.00% 47.33%, 48.50% 45.79%, 49.00% 44.67%, 49.50% 43.98%, 50.00% 43.75%, 50.50% 43.98%, 51.00% 44.67%, 51.50% 45.79%, 52.00% 47.33%, 52.50% 49.24%, 53.00% 51.48%, 53.50% 53.99%, 54.00% 56.71%, 54.50% 59.57%, 55.00% 62.50%, 55.50% 65.43%, 56.00% 68.29%, 56.50% 71.01%, 57.00% 73.52%, 57.50% 75.76%, 58.00% 77.67%, 58.50% 79.21%, 59.00% 80.33%, 59.50% 81.02%, 60.00% 81.25%, 60.50% 81.02%, 61.00% 80.33%, 61.50% 79.21%, 62.00% 77.67%, 62.50% 75.76%, 63.00% 73.52%, 63.50% 71.01%, 64.00% 68.29%, 64.50% 65.43%, 65.00% 62.50%, 65.50% 59.57%, 66.00% 56.71%, 66.50% 53.99%, 67.00% 51.48%, 67.50% 49.24%, 68.00% 47.33%, 68.50% 45.79%, 69.00% 44.67%, 69.50% 43.98%, 70.00% 43.75%, 70.50% 43.98%, 71.00% 44.67%, 71.50% 45.79%, 72.00% 47.33%, 72.50% 49.24%, 73.00% 51.48%, 73.50% 53.99%, 74.00% 56.71%, 74.50% 59.57%, 75.00% 62.50%, 75.50% 65.43%, 76.00% 68.29%, 76.50% 71.01%, 77.00% 73.52%, 77.50% 75.76%, 78.00% 77.67%, 78.50% 79.21%, 79.00% 80.33%, 79.50% 81.02%, 80.00% 81.25%, 80.50% 81.02%, 81.00% 80.33%, 81.50% 79.21%, 82.00% 77.67%, 82.50% 75.76%, 83.00% 73.52%, 83.50% 71.01%, 84.00% 68.29%, 84.50% 65.43%, 85.00% 62.50%, 85.50% 59.57%, 86.00% 56.71%, 86.50% 53.99%, 87.00% 51.48%, 87.50% 49.24%, 88.00% 47.33%, 88.50% 45.79%, 89.00% 44.67%, 89.50% 43.98%, 90.00% 43.75%, 90.50% 43.98%, 91.00% 44.67%, 91.50% 45.79%, 92.00% 47.33%, 92.50% 49.24%, 93.00% 51.48%, 93.50% 53.99%, 94.00% 56.71%, 94.50% 59.57%, 95.00% 62.50%, 95.50% 65.43%, 96.00% 68.29%, 96.50% 71.01%, 97.00% 73.52%, 97.50% 75.76%, 98.00% 77.67%, 98.50% 79.21%, 99.00% 80.33%, 99.50% 81.02%, 100.00% 81.25%);
}

.section-divider-inverted {
	transform: rotate(180deg);
}

main {
	#home {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		min-height: 80vh;

		h1 {
			font-size: 4rem;

			span {
				position: relative;
				transition:
					color 0.5s ease-in-out,
					text-shadow 0.75s ease-in-out;
				color: var(--shadow-gray);
			}
		}

		h2 {
			font-size: 2.5rem;
			font-weight: 500;
			color: yellow;
			text-shadow: 0 0 1rem yellow;
		}
	}

	#home:hover {
		h1 {
			span {
				color: var(--slate-blue);
				text-shadow:
					0 0 2rem var(--midnight-violet),
					0 10px 1rem var(--bright-indigo);
			}
		}
	}

	#about,
	#mission,
	#services {
		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		flex-direction: column;
		gap: 1rem;

		h1 {
			font-size: 4rem;
		}

		div {
			width: 60%;

			span {
				font-size: 2rem;
				font-weight: 400;
				/* transition: text-shadow 0.3s ease-in-out; */
				color: var(--bright-white);
				cursor: default;
				display: inline-block;
			}

			.animated-link::after {
				bottom: 0;
			}

			/* span:hover { */
			/* 	text-shadow: */
			/* 		0px 2px 10px var(--slate-blue), */
			/* 		0px 2px 10px var(--slate-blue), */
			/* 		0px 2px 8px var(--bright-white); */
			/* } */
		}
	}

	#join {
		transform: scale(1.5);

		h1 {
			font-size: 2rem;
		}

		p {
			font-size: 1rem;
		}
	}

	#mission {
		#mission-cards {
			display: grid;
			justify-content: center;
			grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
			gap: 1rem;
			margin-top: 2rem;
			width: 70vw;

			.mission-card {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: flex-start;
				width: 100%;
				height: 100%;
				background-color: var(--gray);
				border-radius: 1rem;
				padding: 1.5rem;
				color: darkgray;
				border: 2px solid var(--shadow-gray);
				cursor: default;
				transition:
					background-color 0.3s ease-in-out,
					color 0.3s ease-in-out,
					border-color 0.3s ease-in-out;

				h2 {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0.5rem;
					text-align: center;
					flex-direction: row;
					font-size: 2rem;
					font-weight: 500;
					margin-bottom: 0.5rem;
				}

				p {
					font-size: 1.2rem;
					text-align: left;
				}
			}

			.mission-card:hover {
				background-color: var(--violet);
				color: var(--bright-white);
				border-color: var(--slate-blue);
			}
		}
	}
}