:root {
  --border-mask: 1vw;
  --mask: calc(var(--border-mask) * 2); 
  --display-width: 100vw;
  --display-height: 56.25vw;
  --fontsize: 4vw;
}
html {
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-color: black;
}
body {
  font-family: "Source Serif 4", serif;
  margin: 0;
  padding: 0;
  border: none;
  background-color: black;
  color: grey;
}
code {
  white-space: pre;
  font-size: smaller;
}
span {
  display: inline-block;
  white-space: pre;
  transition: color 2s ease-in-out;
  -o-transition: color 2s ease-in-out;
  -ms-transition: color 2s ease-in-out;
  -moz-transition: color 2s ease-in-out;
  -webkit-transition: color 2s ease-in-out;
}
span.red {
  /* color: #ff4136; */
  color: white;
  /* text-shadow: 0 -0.3ch 0.5ch white,
    0 0.3ch 0.5ch white,
    0 -0.6ch 1ch white,
    0 0.6ch 1ch white; */
}
span.pink {
  /* color:rgb(225,125,120); */
  color: white;
  /* text-shadow: 0 -0.3ch 0.5ch white,
    0 0.3ch 0.5ch white,
    0 -0.6ch 1ch white,
    0 0.6ch 1ch white; */
}
#container {
  position: relative;
  padding-top: 5vw;
  font-size: var(--fontsize);
  width: var(--display-width);
  height: var(--display-height);
  border: none; /* 1px solid black; */
  overflow: hidden;
}
.scroller {
  position: relative;
  margin: none;
  /* line-height: calc(var(--fontsize) * 1.5);
  height: calc(var(--fontsize) * 1.5); */
  width: var(--display-width);
  overflow: hidden;
  white-space: nowrap;
}
.scroll-item {
  position: absolute;
  white-space: pre;
  display: inline-block;
  box-sizing: border-box;
  will-change: transform;
  left: 0;
}
#mask {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--display-width) - var(--mask) + 1px);
  height: calc(var(--display-height) - var(--mask));
  background-color: rgba(255,255,255,0);
  border: var(--border-mask) solid rgba(0, 0, 0, 1);
}
#scroll0 {
  font-size: 33%;
  line-height: calc(var(--fontsize) * 1.5 * 0.33);
  height: calc(var(--fontsize) * 1.5 * 0.33);
}
#scroll1 {
  font-size: 33%;
  line-height: calc(var(--fontsize) * 1.5 * 0.33);
  height: calc(var(--fontsize) * 1.5 * 0.33);
}
#scroll2 {
  font-size: 34%;
  line-height: calc(var(--fontsize) * 1.5 * 0.34);
  height: calc(var(--fontsize) * 1.5 * 0.34);
}
#scroll3 {
  font-size: 36%;
  line-height: calc(var(--fontsize) * 1.5 * 0.36);
  height: calc(var(--fontsize) * 1.5 * 0.36);
}
#scroll4 {
  font-size: 38%;
  line-height: calc(var(--fontsize) * 1.5 * 0.38);
  height: calc(var(--fontsize) * 1.5 * 0.38);
}
#scroll5 {
  font-size: 40%;
  line-height: calc(var(--fontsize) * 1.5 * 0.40);
  height: calc(var(--fontsize) * 1.5 * 0.40);
}
#scroll6 {
  font-size: 50%;
  line-height: calc(var(--fontsize) * 1.5 * 0.50);
  height: calc(var(--fontsize) * 1.5 * 0.50);
}
#scroll7 {
  font-size: 75%;
  line-height: calc(var(--fontsize) * 1.5 * 0.75);
  height: calc(var(--fontsize) * 1.5 * 0.75);
}
#scroll8 {
  line-height: calc(var(--fontsize) * 1.5);
  height: calc(var(--fontsize) * 1.5);
}
#scroll9 {
  font-size: 75%;
  line-height: calc(var(--fontsize) * 1.5 * 0.75);
  height: calc(var(--fontsize) * 1.5 * 0.75);
}
#scroll10 {
  font-size: 50%;
  line-height: calc(var(--fontsize) * 1.5 * 0.50);
  height: calc(var(--fontsize) * 1.5 * 0.50);
}
#scroll11 {
  font-size: 40%;
  line-height: calc(var(--fontsize) * 1.5 * 0.40);
  height: calc(var(--fontsize) * 1.5 * 0.40);
}
#scroll12 {
  font-size: 38%;
  line-height: calc(var(--fontsize) * 1.5 * 0.38);
  height: calc(var(--fontsize) * 1.5 * 0.38);
}
#scroll13 {
  font-size: 36%;
  line-height: calc(var(--fontsize) * 1.5 * 0.36);
  height: calc(var(--fontsize) * 1.5 * 0.36);
}
#scroll14 {
  font-size: 34%;
  line-height: calc(var(--fontsize) * 1.5 * 0.34);
  height: calc(var(--fontsize) * 1.5 * 0.34);
}
#scroll15 {
  font-size: 33%;
  line-height: calc(var(--fontsize) * 1.5 * 0.33);
  height: calc(var(--fontsize) * 1.5 * 0.33);
}
#scroll16 {
  font-size: 33%;
  line-height: calc(var(--fontsize) * 1.5 * 0.33);
  height: calc(var(--fontsize) * 1.5 * 0.33);
}