@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

/*** Jets: Türk Yildizlari ***/

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}


@keyframes backgroundWaves {
  0% {
    background-position: center;
    transform: scale(1) skew(0deg, 0deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  25% {
    background-position: 50% 48%;
    transform: scale(1.02) skew(1deg, -1deg);
    clip-path: polygon(0 0, 100% 5%, 95% 100%, 5% 95%);
  }
  50% {
    background-position: 52% 50%;
    transform: scale(1.05) skew(-1deg, 1deg);
    clip-path: polygon(2% 5%, 98% 0, 100% 95%, 0% 100%);
  }
  75% {
    background-position: 49% 53%;
    transform: scale(1.03) skew(1deg, 1deg);
    clip-path: polygon(0 3%, 100% 2%, 97% 100%, 0% 97%);
  }
  100% {
    background-position: center;
    transform: scale(1) skew(0deg, 0deg);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}


@keyframes trippy {
  0% {
    transform: scale(1);
    filter: hue-rotate(0deg) saturate(1);
  }
  50% {
    transform: scale(1.1);
    filter: hue-rotate(150deg) saturate(10);
  }
  100% {
    transform: scale(1);
    filter: hue-rotate(3600deg) saturate(5);
  }
}

.page {
  color: rgba(25, 8, 207, 0.549); 
  font-family: 'Roboto Mono', monospace;
  font-size: 48px;
  position: fixed;
  display: flex;
  top: 180px;
  left: 155px;
  z-index: 1;
  animation: rotateClockwise 15s linear infinite,  hueShift 5s linear infinite;
}
.page span {
  position: absolute;
  color: rgba(25, 8, 207, 0.549);
  font-family: 'Roboto Mono', monospace;
  font-size: 48px;
}

.page span:nth-child(1) {
  transform: rotate(0deg) translate(100px) rotate(0deg);
}

.page span:nth-child(2) {
  transform: rotate(72deg) translate(100px) rotate(-72deg);
}

.page span:nth-child(3) {
  transform: rotate(144deg) translate(100px) rotate(-144deg);
}

.page span:nth-child(4) {
  transform: rotate(216deg) translate(100px) rotate(-216deg);
}

.page span:nth-child(5) {
  transform: rotate(288deg) translate(100px) rotate(-288deg);
}


/* Clockwise rotation animation */
@keyframes rotateClockwise {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes hueShift {
  0% {
    filter: hue-rotate(0deg);
  }
  100% {
    filter: hue-rotate(360deg);
  }
}

@keyframes moveAround {
  0%   { top: 10%; left: 10%; }
  25%  { top: 10%; left: 80%; }
  50%  { top: 80%; left: 80%; }
  75%  { top: 80%; left: 10%; }
  100% { top: 10%; left: 10%; }
}

@keyframes zoomIn {
  0% {
        transform: translateX(-50%) translateY(-50%) scale(1);
    }
  100% {
        transform: translateX(-50%) translateY(-50%) scale(1.5);
    }
}

.slider {
  overflow: hidden;
}

.slider-track {
  display: flex;    
  animation: scroll 45s linear infinite;
  animation-play-state: running;
  margin: 0;
  padding: 0;
}


.slider-track img {
  width: auto;
  margin-right: 500px;
  margin-right: 0px;
  width: 100px; /* Set a fixed width */
  height: 100px; /* Set a fixed height */
  box-sizing: content-box;
  /* Ensure image doesn't cause vertical shift */
  display: flex;
  animation: rotate 5s linear infinite;
}


.slider-track img:hover{
  animation: paused;
}

@keyframes rotate {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(360deg);
}
}

@keyframes scroll {
  0% {
      transform: translateX(0);
  }
  100% {
      transform: translateX(calc(-200px * 31));
  }
}

@keyframes slide {
  100% {
    transform: translateX(var(--ani-offset));
  }
}

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

#video-background-alive {
  position: fixed;
  top: 50%;
  left: 50%;
  object-fit: cover; 
  filter: brightness(100%);
  opacity: 1; 
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -2;
  transform: translateX(-50%) translateY(-50%);
  background-size: cover;
  animation: zoomIn 15s alternate infinite;
}

/* body {
  background-color: #000;
  margin: 0;
} */

#canvas {
  position: relative;
  margin: auto;
  width: 750px;
  height: 780px;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}