<header>
  <h1>Hello World</h1>
</header>
<main>
  <p>Marzipan soufflé cotton candy tart sweet bonbon. Macaroon fruitcake pie gummies gummi bears biscuit dragée. Topping icing marshmallow. Soufflé gummies dessert jelly dessert liquorice.</p>
</main>
<footer>
  <p>&copy; ACME</p>
</footer>

// Options: flexbox | grid
$method: flexbox;

$color: rebeccapurple;

* {
  box-sizing: border-box;
}

body {
  font-family: "Baloo 2", sans-serif;
  min-height: 100vh;

  @if ($method == "flexbox") {
    // Flexbox method
    display: flex;
    flex-direction: column;
  } @else {
    // Grid method
    display: grid;
    grid-template-rows: auto 1fr auto;
  }
}

@if ($method == "flexbox") {
  footer {
    margin-top: auto;
  }
}

header,
footer {
  display: grid;
  place-items: center;
  background-color: $color;
  color: #fff;
}

main {
  padding: 1rem;
  max-width: 80ch;
  margin: 0 auto;
  outline: 2px dashed grey;
}

h1 {
  font-size: 4rem;
}

p {
  font-size: 1.125rem;
  line-height: 1.5;
}

// Learn more:
// @link https://moderncss.dev/keep-the-footer-at-the-bottom-flexbox-vs-grid/