@keyframes background {
	0% {
		background-color: #f8fff3;
	}
	14.29% {
		background-color: #55a117;
	}
	28.57% {
		background-color: #efe839;
	}
	42.86% {
		background-color: #aac800;
	}
	57.14% {
		background-color: #5ad97d;
	}
	71.43% {
		background-color: #8fb9f8;
	}
	85.71% {
		background-color: #ff7d20;
	}
	100% {
		background-color: #f8fff3;
	}
}

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

html {
	height: 100%;
}

body {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 100%;
	margin: 0;
	padding: 2vw;
	font-family: serif;
	color: #000;
	background: #fff;
}

main {
	display: flex;
	flex: 1 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: #f8fff3;
	animation: background 60s infinite linear;
}

a {
	position: relative;
	display: inline-block;
	vertical-align: top;
	font-size: min(7.5vw, 7.5rem);
	line-height: 1.2;
	text-decoration: none;
	color: #113007;

	&::after {
		content: "";
		position: absolute;
		top: calc(100% + 0.1em);
		left: 0;
		width: 100%;
		height: 0.05em;
		opacity: 0;
		background: currentColor;
		transform: translateY(-0.2em);
		transition:
			transform 0.4s ease-in-out,
			opacity 0.2s linear;
	}

	&:focus-visible,
	&:hover {
		&::after {
			opacity: 0.4;
			transform: translateY(0);
		}
	}
}