html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efefef;
}

.letters {
  font-family: 'Foldit', cursive;
  font-size: 25vh;
  font-weight: 1;

  span {
    animation: letterUpdate 2.5s ease-in-out infinite;

    @for $index from 1 through 9 {
      &:nth-child(#{$index}) {
        animation-delay: #{$index * 0.2s};
      }
    }
  }
}

@keyframes letterUpdate {
  10% { font-weight: 100; }
  50% { font-weight: 900; }
  90% { font-weight: 100; }
}