* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  width: 100vw;
  min-height: 100vh;
}

$s-min: 10;
$s-max: 55;
$l-min: 10;
$l-max: 65;
$random-color: hsl(
  random(360),
  $s-min + random($s-max + -$s-min),
  $l-min + random($l-max + -$l-min)
);

@mixin linearGradient($color, $type) {
  $to: (
    light: lighten($color, 25%),
    lightest: lighten($color, 40%),
    dark: darken($color, 25%),
    darkest: darken($color, 40%)
  );

  background: nth(nth($color, 1), 1);
  background: linear-gradient(to bottom, $color, map-get($to, $type));
}

body {
  @include linearGradient($random-color, darkest);
}