* {
	font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

	user-select: none;
}

@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}

@keyframes rotating {
	from {
		-ms-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-webkit-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	to {
		-ms-transform: rotate(360deg);
		-moz-transform: rotate(360deg);
		-webkit-transform: rotate(360deg);
		-o-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


@-webkit-keyframes balancing {
	from {
		-webkit-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	to {
		-webkit-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}

@keyframes balancing {
	from {
		-ms-transform: rotate(-5deg);
		-moz-transform: rotate(-5deg);
		-webkit-transform: rotate(-5deg);
		-o-transform: rotate(-5deg);
		transform: rotate(-5deg);
	}

	to {
		-ms-transform: rotate(5deg);
		-moz-transform: rotate(5deg);
		-webkit-transform: rotate(5deg);
		-o-transform: rotate(5deg);
		transform: rotate(5deg);
	}
}

@-webkit-keyframes balancing-logo {
	from {
		-webkit-transform: rotate(-1deg);
		-o-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}

	to {
		-webkit-transform: rotate(1deg);
		-o-transform: rotate(1deg);
		transform: rotate(1deg);
	}
}

@keyframes balancing-logo {
	from {
		-ms-transform: rotate(-1deg);
		-moz-transform: rotate(-1deg);
		-webkit-transform: rotate(-1deg);
		-o-transform: rotate(-1deg);
		transform: rotate(-1deg);
	}

	to {
		-ms-transform: rotate(1deg);
		-moz-transform: rotate(1deg);
		-webkit-transform: rotate(1deg);
		-o-transform: rotate(1deg);
		transform: rotate(1deg);
	}
}

@-webkit-keyframes rainbow {
	0% {
		background-color: #ff3e3e;
	}

	14.3% {
		background-color: #f68133;
	}

	28.6% {
		background-color: #fff04d;
	}

	42.9% {
		background-color: #54ff4b;
	}

	57.1% {
		background-color: #37b2ff;
	}

	71.4% {
		background-color: #6647ff;
	}

	85.7% {
		background-color: #de35f4;
	}

	100% {
		background-color: #ff3e3e;
	}
}

@keyframes rainbow {
	0% {
		background-color: #ff3e3e;
	}

	14.3% {
		background-color: #f68133;
	}

	28.6% {
		background-color: #fff04d;
	}

	42.9% {
		background-color: #54ff4b;
	}

	57.1% {
		background-color: #37b2ff;
	}

	71.4% {
		background-color: #6647ff;
	}

	85.7% {
		background-color: #de35f4;
	}

	100% {
		background-color: #ff3e3e;
	}
}

.rotateBG {
	-webkit-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	-moz-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	-ms-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	-o-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	animation: rotating 20s linear infinite, rainbow 20s linear infinite;
}

.antirotateBG {
	-webkit-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	-moz-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	-ms-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	-o-animation: rotating 20s linear infinite, rainbow 20s linear infinite;
	animation: rotating 20s linear infinite, rainbow 20s linear infinite;

	animation-direction: reverse;
}

.rotateIcon {
	-webkit-animation: balancing 2s ease-in-out infinite;
	-moz-animation: balancing 2s ease-in-out infinite;
	-ms-animation: balancing 2s ease-in-out infinite;
	-o-animation: balancing 2s ease-in-out infinite;
	animation: balancing 2s ease-in-out infinite;

	animation-direction: alternate;
}

.antirotateIcon {
	-webkit-animation: balancing 2s ease-in-out infinite;
	-moz-animation: balancing 2s ease-in-out infinite;
	-ms-animation: balancing 2s ease-in-out infinite;
	-o-animation: balancing 2s ease-in-out infinite;
	animation: balancing 2s ease-in-out infinite;

	animation-direction: alternate-reverse;
}

.center {
	position: relative;

	display: flex;

	justify-content: center;
	align-items: center;
}

.icon {
	position: absolute;

	top: 0;
	left: 0;

	width: 100%;
	height: 100%;

	display: flex;

	align-items: center;
	justify-content: center;
}

.button {
	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 15px;
}

#topBar {
	position: absolute;

	top: 0;
	left: 0;

	width: 100vw;
	height: 60px;

	display: flex;

	align-items: center;
	justify-content: left;

	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 5px;
}

#aulaLogo {
	margin-left: 10px;
}

#titleBar {
	position: absolute;

	top: 60px;
	left: 0;

	width: 100vw;
	height: calc(50vh - 40px);

	display: flex;

	align-items: center;
	justify-content: center;
}

#title {
	width: 85vw;

	-webkit-animation: balancing-logo 3s ease-in-out infinite;
	-moz-animation: balancing-logo 3s ease-in-out infinite;
	-ms-animation: balancing-logo 3s ease-in-out infinite;
	-o-animation: balancing-logo 3s ease-in-out infinite;
	animation: balancing-logo 3s ease-in-out infinite;

	animation-direction: alternate;
}

#buttonHolder {
	position: absolute;
	top: 50vh;
	left: 0;

	width: 100vw;
	height: 50vh;

	display: flex;
	justify-content: center;
	align-items: center;

	gap: 15vh;
}

#worldStateButton {
	cursor: pointer;
}

#worldStateIcon {
	height: 10vh;
}

#worldStateButtonBG {
	width: 20vh;
	height: 20vh;

	transition: 300ms;
}

#worldStateButton:hover>#worldStateButtonBG {
	width: 22vh;
	height: 22vh;

	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 30px;
}

#playButton {
	cursor: pointer;
}

#playIcon {
	position: absolute;
	left: calc(50% - 5vh);

	width: 12vh;
	height: 12vh;
}

#playButtonBG {
	width: 30vh;
	height: 30vh;

	transition: 300ms;
}

#playButton:hover>#playButtonBG {
	width: 33vh;
	height: 33vh;

	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 30px;
}

#infoButton {
	cursor: pointer;
}

#infoIcon {
	height: 10vh;
}

#infoButtonBG {
	width: 20vh;
	height: 20vh;

	transition: 300ms;
}

#infoButton:hover>#infoButtonBG {
	width: 22vh;
	height: 22vh;

	box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 30px;
}