#vanta-cells-bg {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }

body{
margin:auto;
max-width:1200px;
text-align:center;
}

.cshift {
  animation: colorshift 20s infinite alternate;

}

@keyframes colorshift {

from {filter: hue-rotate(0deg);}

to {filter: hue-rotate(360deg);}

}

.flickering-image {
  animation: flicker-opacity 0.9s infinite alternate; /* Adjust duration and iteration as needed */

    }

@keyframes flicker-opacity {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 0.1;
  }
  100% {
    opacity: 0.9;
  }
}

.flickering-blur  {
  animation: flickerBlur 0.09s infinite alternate;
}

@keyframes flickerBlur {
  0%, 100% {
    filter: blur(0px);
    opacity: 0.7;
  }
  20%, 80% {
    filter: blur(2px);
    opacity: 0.5;
  }
  40%, 60% {
    filter: blur(0px);
    opacity: 0.7;
  }
}

.round {
        border-radius: 15px; /* Adjust the value for desired roundness */
    }

.video-container {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.video-container video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

.video-container table {
  position: relative;
  z-index: 1;
}

.image-hover-effect {
  border: 2px solid transparent;
  transition: transform 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.image-hover-effect:hover {
  transform: scale(1.05);
  border-color: red;
}

.image-hover-effect2 {
  transition: transform 0.3s ease-in-out;
}

.image-hover-effect2:hover {
  transform: scale(1.2);
}

.fade-item {
  opacity: 0;
  transition: opacity 0.5s ease-out; /* Adjust timing as needed */
}

.fade-item.is-visible {
  opacity: 1;
}


.scroll-container {
  overflow: hidden;
  width: 982px; /* Or a specific width */
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

.scroll-container img {
  padding: 5px;
}

.scroller-inner {
  display: flex;
  white-space: nowrap; /* Prevents images from wrapping */
  animation: scroll-left 75s linear infinite; /* Adjust time as needed */
}

.scroller-inner:hover {
  animation-play-state: paused; /* Pauses the animation on hover */
}

@keyframes scroll-left {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-3302px); /* Adjust based on content width */
  }
}

.scroll-container2 {
  overflow: hidden;
  width: 982px; /* Or a specific width */
  margin-left: auto;
  margin-right: auto;
  padding: 5px;
}

.scroll-container2 img {
  padding: 5px;
}

.scroller-inner2 {
  display: flex;
  white-space: nowrap; /* Prevents images from wrapping */
  animation: scroll-right 60s linear infinite; /* Adjust time as needed */
}

.scroller-inner2:hover {
  animation-play-state: paused; /* Pauses the animation on hover */
}

@keyframes scroll-right {
  0% {
    transform: translateX(-2540px);
  }
  100% {
    transform: translateX(0); /* Adjust based on content width */
  }
}

.sith-academy-text {
    font-family: 'SithFont', sans-serif; /* Fallback to a generic font in case the custom font fails to load */
}

@font-face {
  font-family: 'SithFont';
  src: url('../fonts/Ur-Kittat.woff2') format('woff2'),
       url('../fonts/Ur-Kittat.otf') format('opentype');
            /* Add other formats for wider browser support */
}

@font-face {
  font-family: 'SithFont2';
  src: url('../fonts/sithprop.woff2') format('woff2'),
       url('../fonts/sithprop.ttf') format('opentype');
            /* Add other formats for wider browser support */
}