body {
	width: 100%;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	font-family: "Montserrat", sans-serif;
	background-color: #111;
	color: #fff;
	align-items: center;
	justify-content: center;
}

h1 {
	font-family: "Geist Mono", monospace;
	font-size: 4rem;
	font-weight: 500;
}

#aka {
	font-size: 1rem;
	color: #aaa;
	margin-bottom: 1rem;
	transition: 0.5s color;
}

h1:hover + #aka, #aka:hover {
	color: #fff;
}

#tagline {
	font-size: 1.5rem;
	font-weight: 500;
	margin-bottom: 1rem;
}

#avatar {
	width: 6rem;
	aspect-ratio: 1;
	filter: grayscale(1);
	border-radius: 100%;
	transition: 0.5s filter;
	&:hover {
		filter: grayscale(0);
	}
}

#contact {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;

	a {
		text-decoration: none;
		color: #fff;
		&:hover {
			color: #ddd;
		}
	}
}

#contact-email, #contact-discord {
	display: flex;
	background-color: #222;
	padding: 0.5rem 1rem;
	align-items: center;
	gap: 0.5rem;
	border-radius: 0.5rem;
}

#contact-email > .icon, #contact-discord > .icon {
	content: '';
	display: block;
	height: 1.25rem;
	width: 1.25rem;
	background-size: 100% 100%;
}

#footer {
	margin-top: 1rem;
	color: #ddd;
}