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.jpg") #060211;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	padding: 70px 0;
	box-sizing: border-box;
}

.animation {
  margin-top: 30px;
	width: 238px;
	height: 238px;
  transform: scale(1.4);
}

.square {
  border-color: #2c1452;
  border-style: solid;
  border-width: 2px;
  border-radius: 15px;
  background-color: rgba(0, 0, 0, 0.04); 
  box-shadow: inset 0 0 13px 4px rgba(53, 25, 98, 0.5), 0 0 13px 4px rgba(53, 25, 98, 0.5);
  z-index: 5;
  width: 295px;
  height: 145px;
  position: absolute;
  top: 300px;
  left: 50%;
  transform: translateX(-50%);
}

.tg-name {
  font-size: 20px;
  font-family: 'Benzin';
  font-weight: bold;
  color: aliceblue;
  text-align: center;
  margin-top: 110px;
}

.text {
  color: aliceblue;
  font-family: 'Benzin';
  font-weight: bold;
  font-size: 52px;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: font-size 0.3s ease;
  margin: 0;
}

.betting {
  color: aliceblue;
  font-family: 'Benzin';
  font-weight: bold;
  font-size: 70px;
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: font-size 0.3s ease;
  margin: 0;
}

.content {
	position: relative;
	width: 100%;
	height: 100%;
}

@keyframes shinePulse {
	0%, 100% { transform: scale(1) }
	50% { transform: scale(0.85) }
}
@keyframes starPulse {
	0%, 100% { transform: scale(1) }
	50% { transform: scale(1.15) }
}
@keyframes letterJump {
	0%, 20%, 100% { transform: translateY(0) }
	7% { transform: translateY(10px) }
	14% { transform: translateY(-20px) }
}
@keyframes manMove {
	0%, 100% { transform: translate(0, 0) }
	50% { transform: translate(10px, -10px) }
}
.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: #c86edb;
	animation: shinePulse 3s ease-in-out 0s infinite reverse;
	border-radius: 50%;
	box-shadow: 0 0 100px #8e46ff;
}
.bg-circle{
	width: 238px;
	height: 238px;
	background: linear-gradient(135deg, #b172ff, #8e46ff);
	border-radius: 300px;
}
.bg {
	background-image: url('./assets/sprite.webp');
}
.bg-l {
	top: -20px;
	left: -129px;
	width: 63px; height: 96px;
	background-position: -401px -1px;
	animation: letterJump 4s ease-in-out 0.5s infinite;
}
.bg-u {
	top: 8px;
	left: -81px;
	width: 56px; height: 67px;
	background-position: -401px -271px;
	animation: letterJump 4s ease-in-out 0.6s infinite;
}
.bg-c {
	top: -32px;
	left: -33px;
	filter: drop-shadow(0 -3px 5px #2f165866);
	width: 62px; height: 109px;
	background-position: -328px -99px;
	animation: letterJump 4s ease-in-out 0.7s infinite;
}
.bg-k {
	top: 1px;
	left: 29px;
	width: 54px; height: 74px;
	background-position: -401px -195px;
	animation: letterJump 4s ease-in-out 0.8s infinite;
}
.bg-y {
	top: -20px;
	left: 73px;
	width: 70px; height: 96px;
	background-position: -328px -210px;
	animation: letterJump 4s ease-in-out 0.9s infinite;
}
.bg-j {
	top: 80px;
	left: -87px;
	width: 61px; height: 94px;
	background-position: -401px -99px;
	animation: letterJump 4s ease-in-out 0.6s infinite;
}
.bg-e {
	top: 93px;
	left: -24px;
	width: 51px; height: 72px;
	background-position: -328px -308px;
	animation: letterJump 4s ease-in-out 0.75s infinite;
}
.bg-t {
	top: 81px;
	left: 22px;
	width: 71px; height: 96px;
	background-position: -328px -1px;
	animation: letterJump 4s ease-in-out 0.9s infinite;
}
.bg-star {
	top: -10px;
	left: -10px;
	width: 47px; height: 51px;
	background-position: -401px -340px;
	animation: starPulse 3s ease-in-out 0s infinite;
}
.bg-star-2 {
	top: 140px;
	left: 208px;
}
.bg-man {
	top: -18%;
	left: -25%;
	width: 325px;
  height: 397px;
	background-position: -1px -1px;
	animation: manMove 1.5s ease-in-out 0s infinite;
}

@font-face {
    font-family: 'Benzin';
    src: url('Benzin-ExtraBold.eot');
    src: local('☞Benzin ExtraBold'), local('Benzin-ExtraBold'),
        url('./fonts/Benzin-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('./fonts/Benzin-ExtraBold.woff2') format('woff2'),
        url('./fonts/Benzin-ExtraBold.woff') format('woff'),
        url('./fonts/Benzin-ExtraBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@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;
	}
}