html {
  font-size: 62.5%; // 1rem = 10px
  font-family: sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  transition: all .15s ease-in-out;
  font-size: 1.6rem;
  word-break: break-word;
}

body {
  color: #dddddd;
  background: #1d1e22;
  min-height: 100vh;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

// Functions

@function pow($base, $exponent) {
  $result: 1;
  @for $i from 1 through $exponent {
    $result: $result * $base;
  }
  @return $result;
}

@function to-rem($size) {
  @return $size + 0rem;
}

// You can find typescales here: https://typescale.com/
// Font sizes - Perfect Fourth 1.333

$base-font-size: 1.6;
$font-ratio: 1.333;

$font-size-xxxl: to-rem($base-font-size * pow($font-ratio, 6));
$font-size-xxl: to-rem($base-font-size * pow($font-ratio, 4));
$font-size-xl: to-rem($base-font-size * pow($font-ratio, 3));
$font-size-l: to-rem($base-font-size * pow($font-ratio, 2));
$font-size-m: to-rem($base-font-size * $font-ratio);
$font-size-s: to-rem($base-font-size);
$font-size-xs: to-rem($base-font-size / $font-ratio);
$font-size-xxs: to-rem($base-font-size / pow($font-ratio, 2));
$font-size-xxxs: to-rem($base-font-size / pow($font-ratio, 3));

h1 {
  font-size: $font-size-xxl;
}

h2 {
  font-size: $font-size-xl;
}

h3 {
  font-size: $font-size-l;
}

h4 {
  font-size: $font-size-m;
}

h5 {
  font-size: $font-size-s;
}

p {
  font-size: $font-size-s;
}

.huge-title {
  font-size: $font-size-xxxl;
}