<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
<section>
  <h1>Normal section h1</h1>
  <p>Normal section paragraph with <a href="#">an anchor</a>.</p>
</section>

<section class="section-dark">
  <h1>Dark section h1</h1>
  <p>Dark section paragraph with <a href="#">an anchor</a>.</p>
</section>

<section class="section-light">
  <h1>Light section h1</h1>
  <p>Light section paragraph with <a href="#">an anchor</a>.</p>
</section>

</body>

</html>
// Code goes here

$text-size-base: 1rem;

@mixin section-typography($fill, $text-base) {
  background-color: $fill;

  h1, h2, h3, h4, h5 {
    color: $text-base;
  }
  p {
    color: lighten($text-base, 20%);
  }
  a {
    color: lighten($text-base, 20%);
    &:hover {
      color: $text-base;
    }
  }
}

section {
  //-- Common section styles
  h1, h2, h3, h4, h5 {
    font-size: $text-size-base *2;
    line-height: 1.5;
  }
  p {
    font-size: $text-size-base;
    line-height: 1.2;
  }

  //-- Specific: .section-dark
  &.section-dark {
    $fill-dark: #172A3A;
    $text-base-dark: #759FBC;

    @include section-typography($fill-dark, $text-base-dark);
  }

  //-- Specific: .section-light
  &.section-light {
    $fill-light: #D7FFF1;
    $text-base-light: #285943;

    @include section-typography($fill-light, $text-base-light);
  }
}