html {
	overflow: hidden;
	height: 100%;
	background-color: #23272a;
}
html.dienstag:not(.loading) {
	animation: rainbow-bg 10s linear infinite;
}

body {
	color: #ffffff;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	user-select: none;

	height: 100%;
	margin: 0;
}

h1 {
	transition: opacity 2s;
	opacity: 0;
	transform: translateY(-50%);
	padding-bottom: 18px;

	text-align: center;
	margin: 0;

	font-size: 9rem;
	font-size: clamp(2rem, 0.7037rem + 6.9136vw, 9rem);

	top: 50%;
	position: relative;
}
html.dienstag h1 {
	animation: rainbow-color 10s linear infinite;
}
#vol {
	left: 50%;
	position: absolute;
	transform: translateX(-50%);

	bottom: 1rem;
	transition: opacity 0.6s;
	opacity: 0;
}

.show {
	opacity: 1;
}
#vol.show {
	opacity: 0.3;
}
.onload {
	transition: opacity 0s !important;
}

#requestButton {
	text-align: center;
	/* new */
	top: 50%;
	position: relative;
	transform: translateY(-50%);
	position: absolute;
	transform: translate(-50%, -50%);
	left: 50%;
}
a {
	transform: translateY(-50%);
	color: inherit;
	background-color: #454fbf;
	border-radius: 7px;
	padding: 4px 6px;
	font-size: 1.5rem;
}
.hidden {
	display: none;
}

/* ------------- Text gradient ------------- */

html.dienstag h1 {
	background: rgb(148, 0, 211);
	background: linear-gradient(
		111deg,
		rgba(148, 0, 211, 1) 0%,
		rgba(75, 0, 130, 1) 7.14%,
		rgba(0, 0, 255, 1) 14.29%,
		rgba(0, 255, 0, 1) 21.43%,
		rgba(255, 255, 0, 1) 28.57%,
		rgba(255, 127, 0, 1) 35.71%,
		rgba(255, 0, 0, 1) 42.86%,
		rgba(148, 0, 211, 1) 50%,
		rgba(255, 0, 0, 1) 57.14%,
		rgba(255, 127, 0, 1) 64.29%,
		rgba(255, 255, 0, 1) 71.43%,
		rgba(0, 255, 0, 1) 78.57%,
		rgba(0, 0, 255, 1) 85.71%,
		rgba(75, 0, 130, 1) 92.86%,
		rgba(148, 0, 211, 1) 100%
	);
	-webkit-text-stroke: 1px rgba(255, 255, 255, 0.75);
	/* Mask the color to the text, and remove the rest  */
	-webkit-background-clip: text;
	/* Make the text fill color value transparent so the masked background color comes through */
	-webkit-text-fill-color: transparent;
	background-size: 400% 400%;
	animation: text-gradient 25s linear infinite;
}

@keyframes text-gradient {
	0% {
		background-position: 0% 50%;
	}
	100% {
		background-position: 400% 50%;
	}
}
/* ----------------------------------------- */

@keyframes rainbow-bg {
	0% {
		background-color: #9400d3;
	}
	14.29% {
		background-color: #4b0082;
	}
	28.57% {
		background-color: #0000ff;
	}
	42.86% {
		background-color: #00ff00;
	}
	57.14% {
		background-color: #ffff00;
	}
	71.43% {
		background-color: #ff7f00;
	}
	85.71% {
		background-color: #ff0000;
	}
	100% {
		background-color: #9400d3;
	}
}

@keyframes rainbow-color {
	0% {
		color: #ffff00;
	}
	14.29% {
		color: #ff7f00;
	}
	28.57% {
		color: #ff0000;
	}
	42.86% {
		color: #9400d3;
	}
	57.14% {
		color: #4b0082;
	}
	71.43% {
		color: #0000ff;
	}
	85.71% {
		color: #00ff00;
	}
	100% {
		color: #ffff00;
	}
}