@font-face {
	font-family: "Comic Sans";
	font-display: swap;
	src:
		local("Comic Sans"),
		local("Comic Sans MS"),
		url(asset/font/comic-regular.woff2) format("woff2"),
		url(asset/font/comic-regular.ttf) format("truetype");
}

@keyframes MoveBackground {
	to {
		background-position: 200%;
	}
}

body {
	background-color: #000;
	height: 100vh;
	margin: 0;
	font-family: "Comic Sans";
}

main {
	display: flex;
	justify-content: center;
	height: 100%;
	align-items: center;
}

h1 {
	font-size: 12vw;
	background: repeating-linear-gradient(90deg, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff, #00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00, #ff2b00, #f50, #ff8000, #fa0, #ffd500, #ff0, #d4ff00, #af0, #80ff00, #5f0, #2bff00, #0f0, #00ff2b, #0f5, #00ff80, #0fa, #00ffd5, #0ff, #00d4ff, #0af, #007fff, #05f, #002bff, #00f, #2a00ff, #50f, #7f00ff, #a0f, #d400ff, #f0f, #ff00d4, #f0a, #ff0080, #f05, #ff002b, #f00);
	background-size: 200%;
	animation: MoveBackground 40s linear infinite;

	color: #0000;
	-webkit-background-clip: text;
	background-clip: text;
}

a {
	color: lightskyblue;
}

a:visited {
	color: plum;
}

a:active {
	color: lightcoral;
}

footer {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	color: #fff;
	gap: .5rem;
}

footer,
.icon {
	display: flex;
	align-items: center;
}

.icon {
	border: #fff solid 4px;
	border-radius: 50%;
	padding: .25rem;

	height: 1rem;
	aspect-ratio: 1/1;

	justify-content: center;
	user-select: none;
	flex-direction: column;
}

.screen-reader {
	height: 1px;
	width: 1px;
	overflow: hidden;
}