body {
        overflow-x: none;
        max-width: 100%;
        background-image: url('banshee-bg.png');
        /*color: #9caf98;*/
        text-align: left;
        background-attachment: fixed;
        } 
       img {
        width: 100%;
       }
       p {
        line-height: 2;
        font-size: 2em;
/*        margin-left: 30%;*/
        font-family: "Neuton", serif;
        font-weight: 700;
        font-style: normal;
        font-optical-sizing: auto;
        /*color:#9caf98;*/
       }
       a {
        pointer-events: auto;
        z-index: 1000;
        }

/*starts here*/
@property --scroll-y-position {
  syntax: "<percentage>";
  initial-value: -10%;
  inherits: false;
}
@property --reflection-y-position {
  syntax: "<percentage>";
  initial-value: -50%;
  inherits: false;
}
@property --scrollbar-color {
  syntax: "<color>";
  inherits: false;
  initial-value: transparent;
}
@property --opacity-1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-4 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-5 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-6 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-7 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-8 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-9 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-10 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-11 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-12 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-13 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-14 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-15 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --opacity-16 {
  syntax: "<number>";
  inherits: false;
  initial-value: 0.1;
}
@property --text-offset-1 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-2 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-3 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-4 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-5 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-6 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-7 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-8 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-9 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-10 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-11 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-12 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-13 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-14 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-15 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
@property --text-offset-16 {
  syntax: "<number>";
  inherits: false;
  initial-value: 10;
}
html::-webkit-scrollbar {
  display: none;
}
body {
  margin: 0;
  height: 900px;
}
.scrollbar {
  width: 4px;
  height: 100%;
  background-color: var(--scrollbar-color);
  background-image: radial-gradient(
    circle at 0% var(--scroll-y-position),
    rgb(112, 153, 255) 0%,
    rgba(56, 106, 249, 0.79135) 10px,
    rgba(10, 76, 242, 0.53) 20px,
    rgba(255, 255, 255, 0) 40px,
    rgba(49, 49, 49, 0) 100%
  );
  animation: on-scrolling both linear;
  animation-timeline: scroll();
  animation-range: 10vh;
}

.container {
  width: 500px;
  height: 100%;
  margin-left: 15px;
  position: relative;
}
.container::before,
.container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position-y: var(--reflection-y-position);
  animation: on-scrolling both linear;
  animation-timeline: scroll();
  animation-range: 10vh;
  pointer-events: none;
}
.container::before {
  background-size: 1px 150px;
  filter: blur(1px);
}
.container::after {
  background-size: 10px 150px;
  filter: blur(10px);
}

main {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40vh;
  padding-bottom: 40vh;
}
a:link, a:visited {
  /*color: #9caf98;*/
  font-style: italic;
  text-decoration: none;
}

a:hover {
  color: ghostwhite;
}

p {
  background-image: linear-gradient(
    270deg,
    rgba(255, 255, 255, 0.4) 0%,
    rgba(255, 255, 255, 0.9) 90%,
    rgb(191, 209, 255) 100%
  );
  background-clip: text;
  -webkit-background-clip: text;
  color: #9caf98;
  padding: 20px;
  line-height: 1.5em;
  animation: on-scrolling both linear;
  animation-timeline: scroll();
  animation-range: 10vh;
}

p:nth-child(1) {
  opacity: var(--opacity-1);
  transform: translateY(calc(var(--text-offset-1) * 1px));
}
p:nth-child(2) {
  opacity: var(--opacity-2);
  transform: translateY(calc(var(--text-offset-2) * 1px));
}
p:nth-child(3) {
  opacity: var(--opacity-3);
  transform: translateY(calc(var(--text-offset-3) * 1px));
}
p:nth-child(4) {
  opacity: var(--opacity-4);
  transform: translateY(calc(var(--text-offset-4) * 1px));
}
p:nth-child(5) {
  opacity: var(--opacity-5);
  transform: translateY(calc(var(--text-offset-5) * 1px));
}
p:nth-child(6) {
  opacity: var(--opacity-6);
  transform: translateY(calc(var(--text-offset-6) * 1px));
}
p:nth-child(7) {
  opacity: var(--opacity-7);
  transform: translateY(calc(var(--text-offset-7) * 1px));
}
p:nth-child(8) {
  opacity: var(--opacity-8);
  transform: translateY(calc(var(--text-offset-8) * 1px));
}
p:nth-child(9) {
  opacity: var(--opacity-9);
  transform: translateY(calc(var(--text-offset-9) * 1px));
}
p:nth-child(10) {
  opacity: var(--opacity-10);
  transform: translateY(calc(var(--text-offset-10) * 1px));
}
p:nth-child(11) {
  opacity: var(--opacity-11);
  transform: translateY(calc(var(--text-offset-11) * 1px));
}
p:nth-child(12) {
  opacity: var(--opacity-12);
  transform: translateY(calc(var(--text-offset-12) * 1px));
}
p:nth-child(13) {
    opacity: var(--opacity-13);
    transform: translateY(calc(var(--text-offset-13) * 1px));
  }
  p:nth-child(14) {
    opacity: var(--opacity-14);
    transform: translateY(calc(var(--text-offset-14) * 1px));
  }
  p:nth-child(15) {
    opacity: var(--opacity-15);
    transform: translateY(calc(var(--text-offset-15) * 1px));
  }
  p:nth-child(16) {
    opacity: var(--opacity-16);
    transform: translateY(calc(var(--text-offset-16) * 1px));
  }
  p:nth-child(17) {
    opacity: var(--opacity-17);
    transform: translateY(calc(var(--text-offset-17) * 1px));
  }
  p:nth-child(18) {
    opacity: var(--opacity-18);
    transform: translateY(calc(var(--text-offset-18) * 1px));
  }