html, body {
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
}
.container {
	position: fixed;
	display: flex;
	top: 0;
	left: 0;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	background: url("./assets/bg.webp") #060211;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 70px 0;
	box-sizing: border-box;

    @media (max-height: 650px) {
        padding-top: 30px;
        padding-bottom: 50px;
    }
}
.animation {
	width: 238px;
	height: 238px;
}
.content {
	position: relative;
	width: 100%;
	height: 100%;
}
@keyframes shinePulse {
	0%, 100% { transform: scale(1) }
	50% { transform: scale(0.85) }
}
@keyframes indicatorPulse {
	0%, 20%, 100%, 50%, 60%, 85% { opacity: 1 }
	30%, 40%, 55%, 65% { opacity: 0 }
}
@keyframes starPulse {
	0%, 50%, 100% { transform: scale(0) rotate(0deg); opacity: 0; }
	60% { transform: scale(1.5) rotate(180deg); opacity: 1; }
	70% { transform: scale(0) rotate(360deg); opacity: 0; }
}

.logo{
	margin-bottom: 50px;
	width: 70px;
}
.item {
	position: absolute;
	top: 0;
	left: 0;
	transition-timing-function: ease-in-out;
}
.mask {
	border-radius: 50%;
	overflow: hidden;
	width: 238px;
	height: 238px;
	max-width: 238px;
	max-height: 238px;
	transform: translateZ(0);
}
.name {
	top: 100%;
	left: 50%;
}
.bg-shine{
	width: 238px;
	height: 238px;
	max-width: 238px;
	max-height: 238px;
	background: #40abf2;
	animation: shinePulse 3s ease-in-out 0s infinite reverse;
	border-radius: 50%;
	box-shadow: 0 0 100px #40abf2;
}
.bg-circle{
	width: 238px;
	height: 238px;
	background: linear-gradient(135deg, #6bc9fd, #158de7);
	border-radius: 300px;
}
.bg {
	background: url("./assets/sprite.webp")
}
.bg-indicator {
	top: 115px;
	left: 119px;
	width: 77px; height: 62px;
	background-position: -253px -137px;
	animation: indicatorPulse 4s ease-in-out 0s infinite;
}
.bg-logo {
	top: 262px;
	left: -64px;
	width: 368px; height: 125px;
	background-position: -253px -4px;
}
.bg-star {
	top: -92px;
	left: 87px;
	width: 46px; height: 53px;
	background-position: -338px -137px;
	animation: starPulse 5s linear 0s infinite;
}
.bg-fuel {
	top: -72px;
	width: 241px; height: 313px;
	background-position: -4px -4px;
}
.middle {
	margin-top: -50px;
	height: 363px;
	transform: scale(0.85);
}
@media (max-width: 600px) or (max-height: 600px) {
	.middle {
		transform: scale(0.75);
	}
}
@media (max-width: 450px) or (max-height: 450px) {
	.middle {
		transform: scale(0.66);
	}
}
@media (max-height: 570px) {
	.logo {
		display: none;
	}
	.container {
		justify-content: center;
		padding: 30px 0;
	}
}
@media (max-height: 475px) {
	.progress {
		display: none;
	}
}
.progress {
	width: 280px;
	max-width: calc(100% - 30px);
	height: 9px;
	border-radius: 9px;
	margin: 0px -30px 0;
	position: relative;
}
.progress__value, .progress__line {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.progress__value {
	top: 1px;
	left: 1px;
	width: calc(100% - 2px);
	height: calc(100% - 2px);
	background: #161024;
	height: 7px !important;
	text-align: center;
	color: white;
	font-family: sans-serif;
	font-size: 16px;
	text-indent: 10px;
	line-height: 50px;
}
.progress, .progress__line {
	background: linear-gradient(90deg, #37a7ff, #39aaff);
}
.progress__line {
	width: 0%;
	transition: 8s;
	transition-timing-function: linear;
}
.progress[progress="0"] .progress__line {
	width: 33%;
	transition: 5s;
}
.progress[progress="1"] .progress__line {
	width: 66%;
	transition: 3s;
}
.progress[progress="2"] .progress__line {
	width: 99%;
	transition: 1s;
}
.progress[progress="3"] .progress__line {
	width: 100%;
	transition: 0.3s;
}