*,
*::before,
*::after {
	box-sizing: border-box;
}

* {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

@media screen and (min-width: 300px) and (max-width: 960px) {
	#progress-bar {
		width: 15em;
		height: 1.5em;
		border-radius: 0.2em;
		box-shadow: 0 0 0 3px white;
	}

	::-webkit-progress-value {
		border-radius: 0.3em;
		border-bottom: 2px solid #E07000;
	}

	#otp-game-title {
		margin: 10px 0;
		font-weight: 500;
		font-size: 18px;
	}

	#unity-bg {
		background-size: 100px 100px;
	}
}

@media screen and (min-width: 960px) {
	#progress-bar {
		width: 35em;
		height: 2em;
		border-radius: 0.3em;
		box-shadow: 0 0 0 4px white;
	}

	::-webkit-progress-value {
		border-radius: 0.3em;
		border-bottom: 4px solid #E07000;
	}

	#otp-game-title {
		margin: 10px 0;
		font-weight: 700;
		font-size: 24px;
	}

	#unity-bg {
		background-size: 250px 250px;

	}
}

#progress-bar {
	position: relative;
	left: 50%;
	transform: translate(-50%);
	margin: 10px 5px;
	background: linear-gradient(#999999, #2c2c2c);
}

#otp-game-title {
	text-transform: uppercase;
	text-align: center;
	color: white;
	font-family: 'Roboto', sans-serif;
}

::-webkit-progress-value {
	background: linear-gradient(#FFD500, #FFAE00);
	--fill: linear-gradient(#{rgba(#e2664c, .65)}, transparent),
	repeating-linear-gradient(135deg,
		#FFD500, #FFAE00)
}

body {
	padding: 0;
	margin: 0
}

#otp {
	width: 100%;
	height: 100%;
	position: fixed;
	background: radial-gradient(#478fdd, #033e9e);
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

#unity-container {
	position: absolute;
}

#unity-container.unity-desktop {
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%)
}

#unity-container.unity-mobile {
	width: 100%;
	height: 100%
}

#unity-bg {
	width: 100%;
	height: 100%;
	background-image: url('bg.png');
	background-position: center;
	filter: blur(0), brightness(0.1);
	transform: scale(1.1);
	animation: scrollAnim 30s linear infinite;
}

#bg-brightness {
	width: 100%;
	height: 100%;
	background-color: #00000079;
}

.unity-mobile #unity-canvas {
	width: 100%;
	height: 100%
}

#unity-loading-bar {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 100%;
}

#unity-logo {
	height: 200px;
	width: 200px;
	margin: 0 auto;
	background: url('200.png') no-repeat center;
	transform: scale(1);
	border-radius: 20px;
	box-shadow: 0 0 0 3px white;
	margin-bottom: 25px;
/*-moz-animation: seqAnim 1s steps(28) forwards infinite;
	-o-animation: seqAnim 1s steps(28) forwards infinite;
	-webkit-animation: seqAnim 1s steps(28) forwards infinite;
	animation: seqAnim 1s steps(28) forwards infinite;*/
}

#cover {
	width: 100vw;
	height: 100vh;
	background-color: black;
	position: absolute;
	opacity: 0;
}

@keyframes scalingAnim {
	0% {
		transform: scale(1.1)
	}

	100% {
		transform: scale(1.2)
	}
}

@keyframes scrollAnim {
	0% {
		background-position: 0px 0px
	}

	100% {
		background-position: -512px 512px
	}
}

@-webkit-keyframes seqAnim {

	to {
		background-position: -5600px 0px;
	}
}

@-moz-keyframes seqAnim {
	to {

		background-position: -5600px 0px;
	}
}

@keyframes seqAnim {

	to {

		background-position: -5600px 0px;
	}
}

@keyframes backgroundFadeIn {

	to {
		opacity: 1.1;
	}
}

@keyframes backgroundFadeOut {
	from {
		background-color: #000000FF
	}
}

@keyframes FadeIn {
	0% {
		opacity: #FFFFFF00
	}

	100% {
		background-color: #FFFFFFFF
	}
}

@keyframes FadeOut {
	0% {
		background-color: #FFFFFFFF
	}

	100% {
		background-color: #FFFFFF00
	}
}

@keyframes ScaleIn {
	from {
		opacity: 0;
		transform: scale(0.8)
	}
	to {
		opacity: 1
	}
}