:root {
  --height-subtitle: 40px;
}

.title {
  text-transform: uppercase;
  font-size: 5rem;

  /* This is one way to assign specific letters a color with scramble*/
  background: linear-gradient(to right,
      var(--clr-highlight) 55%,
      var(--clr-highlight-gradient) 55%,
      var(--clr-highlight-gradient) 63.6%,
      var(--clr-highlight-contrast) 63.6%);

  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

  margin: 0;
  margin-bottom: 1rem;
}

.site-header {
  /*Overwrite content justification so its on the right side of screen*/
  justify-content: flex-end;
}

.socials {
  margin-top: 1rem;
  display: inline-block;
  font-size: 2rem;
  text-align: center;
  min-height: 32px;

  &>a:hover {
    color: var(--clr-highlight);
  }
}

#rotating_list_container {
  overflow: hidden;
  height: var(--height-subtitle);
  display: block;

  & .rotating_list {
    animation: pan 20s ease 1s infinite;

    & .rotating_list_item {
      text-align: center;
      margin: 0;
      line-height: var(--height-subtitle);
      font-size: calc(var(--height-subtitle) - 3px);
    }
  }
}

@keyframes pan {

  0%,
  100% {
    transform: translateY(0);
  }

  10%,
  90% {
    transform: translateY(-16.66%);
  }

  20%,
  80% {
    transform: translateY(-33.33%);
  }

  30%,
  70% {
    transform: translateY(-49.99%);
  }

  40%,
  60% {
    transform: translateY(-66.66%);
  }

  50% {
    transform: translateY(-83.33%);
  }
}