* {
  margin: 0;
  padding: 0;
}

body {
  background-color: hsl(20, 85%, 18%);
  height: 100vh;
  overflow: hidden;
  position: relative;
}

// Generate a stepped gradient based on the colours we send it.
// This gives us a list of values we send to the ‘box-shadow’ property
// of the element of our choice. ‘$shadow-colors...’ creates a list
// of arbitrary length based on the remaining arguments we send.

@function get-shadows($step-width, $shadow-colors...) {

  // List of shadows needs to be initialized outside the loop
  $shadow-list: ();

  // Loop over the arglist
  @each $color in $shadow-colors {

    // It’s handy to stash this in a var
    $index: index($shadow-colors, $color);

    // We’re stacking shadows here, so we multiply the desired width
    // of the step by the current index to get the ‘spread’ value
    // for our rule
    $spread: $step-width * $index;

    // Generate the rule for this shadow
    $shadow: 0 0 0 $spread $color;

    // Append the rule to the list and add a comma if it’s not the last one
    @if $index != length($shadow-colors) {
      $shadow-list: append($shadow-list, $shadow, 'comma');
    } @else {
      $shadow-list: append($shadow-list, $shadow);
    }
  }

  // Return the finished list for ‘box-shadow’ to consume down there
  @return $shadow-list;

}

$sun-radius: 15vh;

.sun {
  background-color: hsl(42, 98%, 53%);
  border-radius: $sun-radius;
  box-shadow: get-shadows(
    $sun-radius,
    hsl(35, 95%, 54%),
    hsl(25, 91%, 54%),
    hsl(16, 88%, 54%),
    hsl(14, 84%, 34%)
  );
  height: $sun-radius * 2;
  position: absolute;
  bottom: 3vh;

  // 50% from the left, then back it up by half the sun’s width
  left: calc(50% - #{$sun-radius});

  width: $sun-radius * 2;
  z-index: -1;
}

.ground {
  background-color: hsl(14, 84%, 34%);
  height: 18vh;
  position: absolute;
  bottom: 0;
  width: 100%;
}