*, *:before, *:after {
	box-sizing: border-box;
}

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	font-family: 'Nunito', sans-serif;
	background: var(--bgColor);

	@media(prefers-color-scheme: light) {
		--bgColor: white;
		--textColor: #777;
		--iconColor: black;
		--boldColor: black;
	}

	@media(prefers-color-scheme: dark) {
		--bgColor: black;
		--iconColor: white;
		--textColor: #aaa;
		--boldColor: white;
	}

	&.lite-mode {
		--bgColor: white;
		--textColor: #777;
		--iconColor: black;
		--boldColor: black;
	}

	&.dark-mode {
		--bgColor: black;
		--iconColor: white;
		--textColor: #aaa;
		--boldColor: white;
	}

	&.mint-mode {
		--bgColor: #c7fcee;
		--iconColor: #486b61;
		--textColor: #5f8c80;
		--boldColor: #10352b;
	}

	&.purp-mode {
		--bgColor: #cfc7fc;
		--iconColor: #5a518c;
		--textColor: #7166af;
		--boldColor: #312c4c;
	}

	&.yell-mode {
		--bgColor: #fcfcbf;
		--iconColor: #54543f;
		--textColor: #8c8c5f;
		--boldColor: #353528;
	}

	&.blue-mode {
		--bgColor: #ade3ff;
		--iconColor: #394b54;
		--textColor: #46748c;
		--boldColor: #242f35;
	}
}

.main {
	min-height: 100vh;
	position: relative;
	z-index: 10;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	overflow-y: hidden;

	> * {
		position: relative;
	}


	> canvas#bg {
		position: absolute;
		top: 0;
		left: 0;
	}

	.text-container {
		text-align: left;
		max-width: 50rem;
		margin: auto auto auto 13vw;
	}

	h1 {
		font-size: 4rem;
		font-weight: 600;
		margin: 0 0 2rem;
		color: var(--boldColor);
	}

	h3 {
		margin: 1rem 0 0;
		font-size: 1.7rem;
		line-height: 1.4;
		font-weight: normal;
		color: var(--textColor);
	}

	em {
		color: var(--boldColor);
		font: inherit;
	}

	h3 a {
		color: var(--boldColor);
		text-decoration: none;
		border-bottom: 0.2rem solid transparent;
		white-space: nowrap;
		position: relative;

		&:before, &:after {
			content: '';
			bottom: 0.4rem;
			left: 0;
			width: 100%;
			height: 0.1rem;
			background: var(--boldColor);
			position: absolute;
			opacity: 0.04;
			transition: all 0.2s ease;
		}

		&:before {
			transform: scaleX(0);
			transform-origin: center left;
		}

		&:after {
			opacity: 0.1;
		}

		&:hover:before {
			transform: scaleX(1);
			opacity: 0.2;
		}
	}

	h3 button {
		color: inherit;
		font: inherit;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	.contact-methods {
		display: flex;
		margin-left: -1.5rem;
		margin-top: 1rem;

		a.contact-method {
			color: inherit;
			text-decoration: none;
			position: relative;
			overflow: visible;
			width: 4rem;
			height: 4rem;

			i {
				color: var(--iconColor);
			}

			p {
				margin: 0;
				position: absolute;
				top: 90%;
				left: 1.5rem;
				width: max-content;
				opacity: 0;
				transition: all 0.2s ease;
				color: #333;
				font-size: 0.85rem;
			}

			&:hover p {
				opacity: 1;
			}
		}

		i {
			width: 4rem;
			height: 4rem;
			line-height: 4rem;
			text-align: center;
			position: relative;

			&:before {
				position: relative;
				z-index: 10;
			}

			&:after {
				position: absolute;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
				margin: auto;
				width: 60%;
				height: 60%;
				border-radius: 50%;
				opacity: 0;
				transform: scale(0.7);
				content: '';
				transition: all 0.2s ease;
				background: #333;
			}
		}

		i.email {
			position: relative;
			width: 4rem;
			height: 4rem;
			display: block;

			&:before {
				content: '@';
				font-style: normal;
				font-weight: bold;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				width: 100%;
				height: 100%;
				position: absolute;
				text-align: center;
			}
		}
	}
}

@media(max-width: 69rem), (orientation: portrait) {
	.main > .text-container {
		margin: auto;
		padding: 2rem;
	}
}

@media(max-width: 25rem) {
	.main {
		> .text-container {
			h1 {
				font-size: 3rem;
			}

			h3 {
				font-size: 1.5rem;
			}
		}
	}
}

.clapper {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 10rem;
	line-height: 10rem;
	text-align: center;
	z-index: 100000;
	font-size: 5rem;
	pointer-events: none;
	transition: none;
	opacity: 0;
	color: var(--boldColor);
}

.clapper.clapping {
	animation: clap 1s ease-in-out;
}

@keyframes clap {
	0% { opacity: 1; }
	49% { opacity: 0; }
	51% { opacity: 1; }
	100% { opacity: 0; }
}

@media (prefers-reduced-motion) {
	canvas#bg {
		display: none;
	}
}