@import url('https://fonts.googleapis.com/css?family=Bevan|Abril+Fatface');
@font-face {
  font-family: 'Gilbert Color';
  src: url('https://cors-anywhere.herokuapp.com/https://speak.wgao19.cc/assets/font/gilbert-color/gilbert-color.otf');
}
@font-face {
  font-family: 'Gilbert';
  src: url('https://cors-anywhere.herokuapp.com/https://speak.wgao19.cc/assets/font/gilbert-color/gilbert.otf');
}

$orange: rgb(255, 107, 0);
$red: rgb(255, 67, 56);
$green: rgb(5, 206, 124);
$blue: rgb(0, 179, 227);
$magenta: rgb(218, 58, 179);
$yellow: rgb(255, 200, 67);
$number-of-colors: 5;

:root {
  font-family: 16px;
}

body {
  display: flex;
  padding: 4rem;
  align-items: center;
}

blockquote {
  font-family: 'Gilbert';
  & + & {
    font-family: 'Gilbert Color';
    margin-left: 1rem;
  }
  font-size: 5rem;
  padding-left: 2rem;
  width: 40rem;
  margin: 0 auto;
  background-image: linear-gradient(
      -15deg,
      transparent 0,
      transparent 20%,
      $magenta 0,
      $magenta 80%,
      transparent 0
    ),
    linear-gradient(
      15deg,
      transparent 0,
      transparent 20%,
      $blue 0,
      $blue 80%,
      transparent 0
    ),
    linear-gradient(
      -15deg,
      transparent 0,
      transparent 20%,
      $yellow 0,
      $yellow 80%,
      transparent 0
    ),
    linear-gradient(
      15deg,
      transparent 0,
      transparent 20%,
      $orange 0,
      $orange 80%,
      transparent 0
    ),
    linear-gradient(
      -15deg,
      transparent 0,
      transparent 20%,
      $green 0,
      $green 80%,
      transparent 0
    ),
    linear-gradient(
      15deg,
      transparent 0,
      transparent 20%,
      $red 0,
      $red 80%,
      transparent 0
    ) !important;

  background-size: 8px calc(141.4% / #{$number-of-colors - 0.5});
  background-repeat: no-repeat;
  background-position-y: 0, calc(100% / #{$number-of-colors}),
    calc(200% / #{$number-of-colors}), calc(300% / #{$number-of-colors}),
    calc(400% / #{$number-of-colors}), calc(500% / #{$number-of-colors});
  background-blend-mode: multiply;
}