#root {
  background-color: #000;
  width: 100vw;
  height: 100vh;
}

.sliderContainer {
  width: 40vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Helvetica";
}

.sliderContainer::before,
.sliderContainer::after {
  pointer-events: none;
  content: "";
  position: absolute;
  width: 100%;
  height: 35vh;
  z-index: 10;
  left: 0;
}

.sliderContainer::before {
  top: 0;
  background: linear-gradient(180deg, #000, #000 15%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.6) 70%, transparent);
}

.sliderContainer::after {
  bottom: 0;
  background: linear-gradient(0deg, #000, #000 15%, rgba(0, 0, 0, 0.9) 40%, rgba(0, 0, 0, 0.6) 70%, transparent);
}

.quotesList {
  overflow-y: scroll;
  height: 100vh;
  top: -50vh;
  scroll-snap-type: y proximity;
  scroll-behavior: smooth;
  user-select: none;
}

.redLine {
  position: absolute;
  height: 0.15625vw;
  width: 100%;
  top: 50%;
  background-color: red;
  pointer-events: none;
}

.quote {
  font-size: 2.3958333333vw;
  line-height: 3.9vw;
  letter-spacing: -0.92px;
  font-weight: 500;
  height: 3.9vw;
  padding-left: 2.9166666667vw;
  color: #FFF;
  scroll-snap-align: center;
}