body {
    background-color: rgb(23, 11, 11);
    color: rgb(255, 96, 96);
    line-height: 1;
    overflow-x: hidden;
}
html{
  overflow-x: hidden;
}

.left{
  position: absolute;
  left: 40;
  width: 50%;
  color: aliceblue;
}

.text-box1{
  font-size: 70%;
}

.text-box2{
  position: absolute;
  left: 1%;
  max-width: 20%;
}

.page-message a{
  color: 0fff13;
}

.right{
  position: absolute;
  left: 50%;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}
.container{
    top: 230px;
    left: 15%;
    position: relative;
    width: 200px;
    height: 200px;
}

.carousel {
    position: absolute;
    height: 100%;
    width: 100%;
    transform-style: preserve-3d;
    transition: transform 1s;
    animation: autoRun 20s linear infinite;   
}

.is-paused {
  animation-play-state: paused;
}

/* .carousel:hover{
  animation-play-state: paused;

} */

.carousel img:hover{
  transform: scale(1.2);
  transition: all 300ms;
  box-shadow: 0 0 20px 0 rgb(23, 222, 23);
}

@keyframes autoRun {
    from {
        transform: rotateX(-10deg) rotateY(0deg);
    }to{
        transform: rotateX(-10deg) rotateY(360deg);
    }
}

.item{
  display: block;
  position: absolute;
  width: 200px;
}

.item img{
  width: 220px;
  border-radius: 10px;
}

.item:nth-child(1){
  transform: rotateY(0deg) translateZ(200px);
}

.item:nth-child(2){
  transform: rotateY(72deg) translateZ(200px);
}

.item:nth-child(3){
  transform: rotateY(144deg) translateZ(200px);
}

.item:nth-child(4){
  transform: rotateY(216deg) translateZ(200px);
}

.item:nth-child(5){
  transform: rotateY(288deg) translateZ(200px);
}

.item:nth-child(6){
  transform: rotateY(0deg) translateZ(0px);
}

.item:nth-child(7){
  transform: rotateY(90deg) translateZ(0px);
}



.crt {
  animation: textShadow 1.6s infinite;
  height: 700px;
}

.crt::after {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(18, 16, 16, 0.1);
  opacity: 0;
  z-index: 2;
  pointer-events: none;
  animation: flicker 0.15s infinite;
}

.crt::before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
              linear-gradient(90deg, rgba(255, 0, 0, 0.06), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.06));
  background-size: 100% 2px, 3px 100%;
  z-index: 2;
  pointer-events: none;
}

@keyframes flicker {
  0% { opacity: 0.27861; }
  5% { opacity: 0.34769; }
  10% { opacity: 0.23604; }
  15% { opacity: 0.90626; }
  20% { opacity: 0.18128; }
  25% { opacity: 0.83891; }
  30% { opacity: 0.65583; }
  35% { opacity: 0.67807; }
  40% { opacity: 0.26559; }
  45% { opacity: 0.84693; }
  50% { opacity: 0.96019; }
  55% { opacity: 0.08594; }
  60% { opacity: 0.20313; }
  65% { opacity: 0.71988; }
  70% { opacity: 0.53455; }
  75% { opacity: 0.37288; }
  80% { opacity: 0.71428; }
  85% { opacity: 0.70419; }
  90% { opacity: 0.7003; }
  95% { opacity: 0.36108; }
  100% { opacity: 0.24387; }
}

@keyframes textShadow {
  0%, 100% {
    text-shadow: 0.5px 0 1px rgba(0,30,255,0.5), -0.5px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
  50% {
    text-shadow: 2.5px 0 1px rgba(0,30,255,0.5), -2.5px 0 1px rgba(255,0,80,0.3), 0 0 3px;
  }
}

@keyframes grain {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1px, -1px); }
  20% { transform: translate(1px, 1px); }
  30% { transform: translate(-1px, 1px); }
  40% { transform: translate(1px, -1px); }
  50% { transform: translate(-1px, 0); }
  60% { transform: translate(1px, 0); }
  70% { transform: translate(0, 1px); }
  80% { transform: translate(0, -1px); }
  90% { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}

.cover-controll{
  position: relative;
  top: 325px;
left: 6.5%;
}

#slider {
  width: 30%;     /* ← increase this */
  --fill: #77ff4d;
  --track: #bb0e0e;
  --thumb: #504dff;
}