.rainbow
  - let b = 0
  while b < 7
    .rainbow__band(style=`--index: ${b};`)
    -- b++

*
  box-sizing border-box
  
body
  min-height 100vh
  display grid
  place-items center
  background hsl(210, 80%, 90%)
  
.rainbow
  height 25vmin
  width 50vmin
  position relative
  overflow hidden
  
  &__band
    --size calc((50 - (var(--index, 0) * 4)) * 1vmin)
    height 50vmin
    width 50vmin
    border-radius 50%
    position absolute
    top 100%
    left 50%
    border-width 2vmin
    border-style solid
    border-color 'hsl(%s, 80%, 50%)' % var(--hue, 10)
    transform translate(-50%, -50%)
    height var(--size)
    width var(--size)
    animation rainbow 2s calc(var(--index, 0) * -0.2s) infinite linear
    
    &:nth-of-type(2)
      --hue 35
    &:nth-of-type(3)
      --hue 55
    &:nth-of-type(4)
      --hue 110
    &:nth-of-type(5)
      --hue 200
    &:nth-of-type(6)
      --hue 230
    &:nth-of-type(7)
      --hue 280
    
      
@keyframes rainbow
  0%, 100%
    --hue 10
  14%
    --hue 35
  28%
    --hue 55
  42%
    --hue 110
  56%
    --hue 200
  70%
    --hue 230
  84%
    --hue 280