@charset "UTF-8";

:root {
	background: repeating-linear-gradient(
		180deg,
		rgba(255, 0, 0, 1.0) 0% 25%,
		rgba(0, 255, 0, 1.0) 25% 50%,
		rgba(0, 0, 255, 1.0) 50% 75%,
		rgba(0, 0, 0, 1.0) 75% 100%
	),
	repeating-linear-gradient(
		90deg,
		rgba(255, 0, 0, 1.0) 0% 25%,
		rgba(0, 255, 0, 1.0) 25% 50%,
		rgba(0, 0, 255, 1.0) 50% 75%,
		rgba(0, 0, 0, 1.0) 75% 100%
	);
	background-color: rgba(40, 40, 40, 1.0);
	background-blend-mode: soft-light;
	background-size: 16px 16px;
	color: rgba(248, 248, 248, 1.0);
	font-size: 14pt;
	font-family: SansSerif, sans-serif;
}

body {
	margin: 40px auto;
	max-width: 1440px;
	width: 90%;
	min-width: 320px;
	border: 4px solid green;
}

header {
	background-color: rgba(24, 24, 24, 1.0);
	min-height: 96px;
	padding: 8px;
	padding-top: 0px;
}

main {
	background-image: linear-gradient(180deg, rgba(24, 24, 24, 1.0), rgba(8, 8, 8, 1.0));
	padding: 8px;
}

h1 {
	margin: 24pt auto;
	text-align: center;
}

h3 {
	text-align: center;
}

a:hover > img {
	animation: clap 1s;
	animation-iteration-count: infinite;
}

footer {
	background-color: rgba(8, 8, 8, 1.0);
	padding: 8px;
}

:link {
	color: magenta;
}

:visited {
	color: pink;
}

@keyframes clap {
	0% {
		transform: translateY(0px);
	}
	30% {
		transform: translateY(-4px);
	}
	40% {
		transform: translateY(4px);
	}
	100% {
		transform: translateY(0px);
	}
}