* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* Added */
    transition: all 0.5s ease-out;

}
html{
    scroll-behavior: smooth;
    scroll-padding: 10rem;
    overflow-x: hidden;
    
}
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.light {
  position: fixed;
  width: 1px;
  height: 100vh;
  background-color: #969CFF;
  box-shadow: #969CFF 0px 0px 20px 2px;
  opacity: 0;
  top: 0;
  margin: auto;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.x3 { 
  animation: scrollDown 8s 0s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.1) translateZ(15px);
  left: calc(100% * var(--random-x3, 0.4));
}

.x7 { 
  animation: scrollDown 8s 3s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.1) translateZ(60px);
  left: calc(100% * var(--random-x7, 0.5));
}

.x8 { 
  animation: scrollDown 8s 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform: scale(0.1) translateZ(45px);
  left: calc(100% * var(--random-x8, 0.6));
}

@keyframes scrollDown {
  0% {
    top: 0;
    opacity: 0;
    transform: translateX(0) translateZ(30px) rotateY(0deg) scale(1);
  }
  50%{
    opacity:0.6;
  }
  100% {
    top: 100vh;
    opacity: 0;
    transform: translateX(0) translateZ(30px) rotateY(0deg) scale(1);
  }
}


body {
  background: #130B1F;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  color: white;
  position: absolute;
  inset: 0;
  place-content: center;
  align-items: center;
}

.wordshighlight {
    color: #969CFF;
    font-weight: bold;
}
.tag-list {
  width: 30rem;
  max-width: 90vw;
  display: flex;
  flex-shrink: 0;
  flex-direction: column;
  gap: 1rem 0;
  position: relative;
  padding: 1.5rem 0;
  overflow: hidden;
}
  
.tag-list::before,
.tag-list::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  pointer-events: none;
  z-index: 1;
}
  
.tag-list::before {
  left: 0;
  background: linear-gradient( transparent); 
}
  
.tag-list::after {
  right: 0;
  background: linear-gradient( transparent);
}
  
.loop-slider {
  position: relative;
  z-index: 0;
}
  
.inner {
  display: flex;
  width: fit-content;
  animation-name: loop;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: var(--direction);
  animation-duration: var(--duration);
}
  
.tag {
  display: flex;
  align-items: center;
  gap: 0 0.2rem;
  color: #e2e8f0;
  border-radius: 0.4rem;
  padding: 0.7rem 1rem;
  margin-right: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0.1rem 0.2rem #969CFF;
}
  
.fade {
  pointer-events: none;
  position: absolute;
  inset: 0;
}
  
  @keyframes loop {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-50%);
    }
  }
  .glass {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
  }