body{
	background-image:url('./DSC00485.webp');
	background-repeat: no-repeat;
	background-size: cover;
	font-family: 'LXGW WenKai Light', 'Saira Light', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
.main{
	width: 100%;
	max-width: 800px;
  border-radius: 15px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
	backdrop-filter: blur(7px);
	background-color: rgba(255, 255, 255, 0.3);
  line-height:30px;
  padding: 20px 25px;
}
img{
    border: 1.5px solid rgba(0, 0, 0, 0.85);
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}
.player {
   clear:both
}

.textt span {
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text;
    transition: --progress 0.1s ease;
	white-space: normal;
	opacity: 0;
	transform: translateY(-13.33px);
	will-change: transform, opacity;
	font-weight: bold;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(-13.33px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOutdown {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}
.fade-out {
  animation: fadeOutdown 0.2s forwards;
}
.fade-in {
  animation: fadeInUp 0.9s forwards;
}
.lowfadeinzb {
    display: inline-block;
    -webkit-background-clip: text;
    background-clip: text;
    transition: --progress 0.1s ease;
	white-space: normal;
	opacity: 0;
	transform: translateY(-13.33px);
	will-change: transform, opacity;
	font-weight: bold;
}
@font-face {
  font-family: 'Saira Light';
  src: url('./Saira-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'LXGW WenKai Light';
  src: url('./LXGWWenKai-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
.text span {
    display: inline-block;
    background: linear-gradient(to right, #000000 var(--progress, 0%), #818282 var(--progress, 0%));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    transition: --progress 0.1s ease;
    white-space: normal;
	font-weight: bold;
}
.notification {
	position: fixed;
	bottom: 20px;
	right: -440px;
	background-color: #f8f9fa;
	padding: 16px;
	border: 1px solid #ccc;
	border-radius: 4px;
	width: 400px;
    border-radius: 15px;
	animation: tc 3s;
}
@keyframes tc {
	0% {
	    right: -440px;
	}
	20% {
		right: 20px;
	}
	80% {
		right: 20px;
	}
	100% {
		right: -440px;
	}
}
@keyframes shake {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  10% {
    transform: translate(5px, -5px) rotate(3deg);
  }
  20% {
    transform: translate(-10px, 8px) rotate(-3deg);
  }
  30% {
    transform: translate(7px, 6px) rotate(2deg);
  }
  40% {
    transform: translate(-3px, -4px) rotate(-5deg);
  }
  50% {
    transform: translate(6px, -7px) rotate(4deg);
  }
  60% {
    transform: translate(-8px, 5px) rotate(1deg);
  }
  70% {
    transform: translate(4px, -3px) rotate(-2deg);
  }
  80% {
    transform: translate(-6px, 4px) rotate(6deg);
  }
  90% {
    transform: translate(2px, -2px) rotate(-4deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
@keyframes translation_shake {
  0% {
    transform: translate(0, 0);
  }
  10% {
    transform: translate(5px, -5px);
  }
  20% {
    transform: translate(-10px, 8px);
  }
  30% {
    transform: translate(7px, 6px);
  }
  40% {
    transform: translate(-3px, -4px);
  }
  50% {
    transform: translate(6px, -7px);
  }
  60% {
    transform: translate(-8px, 5px);
  }
  70% {
    transform: translate(4px, -3px);
  }
  80% {
    transform: translate(-6px, 4px);
  }
  90% {
    transform: translate(2px, -2px);
  }
  100% {
    transform: translate(0, 0);
  }
}
.shake-text {
  display: inline-block;
  animation: shake_translation 20s ease-in-out infinite;
}