me/css/style.scss

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

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

body {
	margin: 0;
	font-family: 'Nunito', sans-serif;
}

body.dark-mode {
	background: black;
	color: white;

	.bg {
		opacity: 0 !important;
	}

	.main {
		h1 {
			color: #fff;
		}

		em {
			color: #fff;
		}

		h3 {
			color: #aaa;
		}

		h3 a {
			color: #fff;

			&:before, &:after {
				background: rgba(#fff, 0.2);
			}

			&.among {
				color: inherit;
			}
		}

		a.contact-method p {
			color: #fff;
			font-size: 1rem;
		}
	}
}

.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: #000;
	}

	h3 {
		margin: 1rem 0 0;
		font-size: 1.7rem;
		line-height: 1.4;
		font-weight: normal;
		color: #777;
	}

	em {
		color: #000;
		font: inherit;
	}

	h3 a {
		color: #000;
		text-decoration: none;
		border-bottom: 0.2rem solid transparent;
		white-space: nowrap;
		position: relative;

		&.among {
			color: inherit;
			border-bottom: 0;
			&:before, &:after {
				content: none;
			}
			cursor: text;
		}

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

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

		&:after {
			opacity: 0.5;
		}

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

	.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;

			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;
}

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

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