/* general */

body {
	background-image: url(/static/images/paper.jpeg);
	font-size: 1.2rem;
}

main {
	margin: 3rem;
}

.center {
	display: flex;
	justify-content: center;
}

h1 {
	font-family: Arial, sans-serif;
	color: #2F5485;
	text-shadow: 0.07em 0.07em 0 #b3b3b3;
	transform: scale(1, 1.5);  /* stretch */
}

/* rainbow text */

.rainbow-word {
	font-weight: bold;
}

.rainbow-letter:nth-child(1) { animation-delay: calc(-2s / 5 * 1); color: red; }
.rainbow-letter:nth-child(2) { animation-delay: calc(-2s / 5 * 2); color: orange; }
.rainbow-letter:nth-child(3) { animation-delay: calc(-2s / 5 * 3); color: #c7c71e; }
.rainbow-letter:nth-child(4) { animation-delay: calc(-2s / 5 * 4); color: green; }
.rainbow-letter:nth-child(5) { animation-delay: calc(-2s / 5 * 5); color: blue; }

@media not (prefers-reduced-motion) {
	.rainbow-letter {
		display: inline-block; /* necesary for transform */
		animation: bounce 2s ease-in-out infinite alternate;
	}

	@keyframes bounce {
		0% { transform: translateY(0); }
		50% { transform: translateY(-0.5em); }
	}
}

/* button stuff */

.button {
	display: inline-block;
	text-decoration: none;

	padding: 1em;
	border: none;
	border-radius: 5px;
}

.button:hover { filter: brightness(0.8); }
.button:active { filter: brightness(0.7); }

.button.yellow {
	color: white;
	background-image: linear-gradient(30deg, #c1a502 0%, #FFC107 25%, yellow 51%, #ff357f 100%);
	background-size: 300% 300%;
	animation: slide-background 20s ease infinite,
	           wiggle 2s ease-in-out infinite alternate;
}

.button.blue {
	color: white;
	background-image: linear-gradient(-45deg, yellow 0%, blue 25%, magenta 51%, #ff357f 100%);
	background-size: 300% 300%;
	animation: slide-background 20s ease infinite,
	           pulsate 1s ease-in-out infinite alternate;
}

@keyframes slide-background {
	  0% { background-position: 0% 50%; }
	 50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

@keyframes wiggle {
	  0% { transform: rotate(-5deg); }
	100% { transform: rotate(+5deg); }
}

@keyframes pulsate {
	  0% { transform: scale(1); }
	100% { transform: scale(1.2); }
}

@media (prefers-reduced-motion) {
	.button.yellow, .button.blue {
		animation: none;
	}
}