:root {
  --color-text: navy;
  --color-bg: papayawhip;
  --color-bg-accent: #ecdcc0;
  --gap:10px;
  --duration: 30s;
  --scroll-start: 0;
  --scroll-end: calc(-100% - var(--gap));
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-text: papayawhip;
    --color-bg: rgb(151, 151, 151);
    --color-bg-accent: #363636;
  }
}


.marquee::before{

  background: rgb(2,0,36);
  background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
  content : "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 200px;
  height: 100%;
  z-index: 30;
}


.marquee::after{
  background: rgb(2,0,36);
  background: linear-gradient(270deg, rgba(2,0,36,1) 0%, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%);
  content : "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 200px;
  height: 100%;
  z-index: 30;
}

.marquee {
  position: relative;
  display: flex;
  overflow: hidden;
  user-select: none;
  /* gap: var(--gap); */
  mask-image: linear-gradient(
    var(--mask-direction, to right),
    hsl(0 0% 0% / 0),
    hsl(0 0% 0% / 1) 20%,
    hsl(0 0% 0% / 1) 80%,
    hsl(0 0% 0% / 0)
  );
}

.marquee ul{
  margin-left: 5px;
  margin-right: 5px;
}

.marquee-root {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--gap);
  min-width: 100%;
  animation: scroll-x var(--duration) linear infinite;
}

.marquee-root .img-container{
  background-color: rgb(12, 12, 12);
  border-radius: 10%;
  padding: 10px 3px 10px 3px;
  cursor: pointer;
}

@keyframes showText{
  from{
    bottom: -30px;
    /* visibility: hidden; */
  }
  to{
    bottom:0px;
  }
}

.img-container .container p{
  position: relative;
  padding-top: 10px;
  visibility: hidden;;
  text-align: center;
}

.img-container .container:hover > p{
  /* display: block; */
  color: rgba(217, 217, 217, 1);
  visibility: visible;
  /* animation : showText 3s; */
}


.marquee .img-container {
  width: 100%;
  transition: all 0.5s ease;
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .marquee-root {
    animation-play-state: paused;
  }
}

.marquee--reverse .marquee-root {
  animation-direction: reverse;
  animation-delay: -3s;
}

@keyframes scroll-x {
  from {
    transform: translateX(var(--scroll-start));
  }
  to {
    transform: translateX(var(--scroll-end));
  }
}

.marquee-wrapper {
  margin-bottom: 200px;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  max-width: var(--maxWidth);
}

.marquee-header{
  font-family: 'hollowKnight';
  text-align: center;
  font-size: 60px;
  margin-right: 5px;
  /* margin-bottom: 30px; */
}
.marquee-header-image{
  margin-top: 10px;
  margin-bottom: 50px;
}