$sizes: (
  small 300px,
  medium 600px,
  large 1200px
);

$colors:
  #6c5ce7,
  #a29bfe,
  #0984e3,
  #fab1a0,
  #e17055;

html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
}

html:not(.scroller-hybrid) {
  height: 100%;

  body,
  main {
    height: 100%;
  }
}

body::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body::-webkit-scrollbar-thumb {
  background-color: black;
}

section {
  width: 100%;
  display: block;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-transform: uppercase;
  font-size: 42px;
  color: rgba(white, .5);

  @for $i from 1 through 50 {
    &:nth-child(#{$i}) {
      background-color: nth($colors, 1 + $i % length($colors));
    }
  }

  @each $name, $size in $sizes {
    html:not(.scrolldir-horizontal) &.#{$name} {
      height: $size;
    }

    html.scrolldir-horizontal &.#{$name} {
      width: $size;
      height: 100%;
    }
  }
}

html.scrolldir-horizontal {
  height: 100%;

  body,
  main,
  .smoovy-wrapper {
    height: 100%;
  }

  .smoovy-wrapper,
  main {
    display: inline-flex;

    section {
      flex-shrink: 0;
    }
  }
}