.button {
	position: absolute;
	font-size: 24px;
	cursor: pointer;
}

#button-start {
	top: 20px;
	left: 20px;
	z-index: 2;
}

#button-sound {
	top: 20px;
	left: 52px;
	z-index: 2;
}

#button-info {
	position: absolute;
	top: 20px;
	right: 25px;
	z-index: 4;
}

#button-x {
	visibility: hidden;
	position: absolute;
	top: 20px;
	right: 25px;
	z-index: 4;
}

.button a,
.button a:hover {
	text-decoration: none;
}

#info {
	position: absolute;
	visibility: hidden;
	opacity: 0.88;
	top: 15px;
	right: 15px;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.33);
	border: 1px solid rgba(255, 255, 255, 0.66);
	padding: 15px;
	font-family: monospace;
	width: 333px;
	z-index: 3;
}

#info a {
	text-decoration: none;
	color: #4a34ce;
}

#info a:hover {
	color: #000;
	border-bottom: 1px dashed #4a34ce;
}

#bg-fire1 {
	visibility: visible;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ff0000;
	background-image: radial-gradient(
			at 0% 56%,
			hsla(28, 100%, 74%, 1) 0,
			transparent 50%
		),
		radial-gradient(at 54% 30%, hsla(0, 100%, 70%, 1) 0, transparent 50%),
		radial-gradient(at 100% 68%, hsla(50, 100%, 80%, 1) 0, transparent 50%),
		radial-gradient(at 30% 100%, hsla(279, 100%, 61%, 1) 0, transparent 50%),
		radial-gradient(at 0% 100%, hsla(22, 100%, 77%, 1) 0, transparent 50%),
		radial-gradient(at 82% 0%, hsla(279, 100%, 62%, 1) 0, transparent 50%),
		radial-gradient(at 0% 0%, hsla(336, 100%, 60%, 1) 0, transparent 50%);

	-webkit-animation: bg-fire1-ani 6s ease 0s infinite alternate;
	animation: bg-fire1-ani 6s ease-in-out 0s infinite alternate;
}

#bg-fire2 {
	visibility: visible;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #99eeff;
	background-image: radial-gradient(
			at 41% 100%,
			hsla(215, 96%, 69%, 1) 0,
			transparent 51%
		),
		radial-gradient(at 62% 60%, hsla(177, 100%, 79%, 1) 0, transparent 35%),
		radial-gradient(at 46% 45%, hsla(223, 100%, 50%, 1) 0, transparent 56%),
		radial-gradient(at 24% 17%, hsla(180, 100%, 52%, 1) 0, transparent 50%),
		radial-gradient(at 86% 0%, hsla(248, 100%, 60%, 1) 0, transparent 48%),
		radial-gradient(at 2% 61%, hsla(240, 96%, 65%, 1) 0, transparent 53%),
		radial-gradient(at 88% 100%, hsla(241, 100%, 67%, 1) 0, transparent 42%);

	-webkit-animation: bg-fire2-ani 6s ease 0s infinite alternate;
	animation: bg-fire2-ani 6s ease-in-out 0s infinite alternate;
}

#bg-fire3 {
	visibility: visible;
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #ff0000;
	background-image: radial-gradient(
			at 100% 44%,
			hsla(28, 100%, 74%, 1) 0,
			transparent 50%
		),
		radial-gradient(at 46% 70%, hsla(0, 100%, 70%, 1) 0, transparent 50%),
		radial-gradient(at 0% 32%, hsla(50, 100%, 80%, 1) 0, transparent 50%),
		radial-gradient(at 30% 0%, hsla(279, 100%, 61%, 1) 0, transparent 50%),
		radial-gradient(at 100% 0%, hsla(22, 100%, 77%, 1) 0, transparent 50%),
		radial-gradient(at 82% 100%, hsla(279, 100%, 62%, 1) 0, transparent 50%),
		radial-gradient(at 100% 100%, hsla(336, 100%, 60%, 1) 0, transparent 50%);

	-webkit-animation: bg-fire3-ani 6s ease 0s infinite alternate;
	animation: bg-fire3-ani 6s ease-in-out 0s infinite alternate;
}

@keyframes bg-fire1-ani {
	0% {
		opacity: 44%;
	}

	50% {
		opacity: 0%;
	}

	100% {
		opacity: 0%;
	}
}

@keyframes bg-fire2-ani {
	0% {
		opacity: 0%;
	}

	50% {
		opacity: 66%;
	}

	100% {
		opacity: 0%;
	}
}

@keyframes bg-fire3-ani {
	0% {
		opacity: 0%;
	}

	50% {
		opacity: 0%;
	}

	100% {
		opacity: 44%;
	}
}

#bg-glow {
	visibility: hidden;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(109, 255, 176);
	background: radial-gradient(
		circle,
		rgba(109, 255, 176, 1) 0%,
		rgba(236, 255, 159, 1) 33%,
		rgba(0, 190, 208, 1) 66%,
		rgba(59, 70, 208, 1) 100%
	);

	-webkit-animation: bg-glow-ani 6s ease 0s infinite alternate;
	animation: bg-glow-ani 6s ease-in-out 0s infinite alternate;
}

@keyframes bg-glow-ani {
	0% {
		opacity: 0%;
	}

	50% {
		opacity: 66%;
	}

	100% {
		opacity: 0%;
	}
}

@media only screen and (max-device-width: 812px) {
	#info {
		top: 0;
		right: 0;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		opacity: 1;
		border-radius: 0;
		background-color: rgba(255, 255, 255, 0.66);
		border: none;
		padding: 20px;
		padding-top: 75px;
	}

	#bg-fire1,
	#bg-fire2,
	#bg-fire3 {
		display: none;
		visibility: hidden;
	}
}