<h1>Kode<strong id="soul">Soul</strong></h1>

          <h1 class="fz-42">Kode<strong id="soul">Soul</strong></h1>

$pc: #C678DD; // primary color
$sc: #8fdd78; // secondary color
$bg: #121212; // background
$fg: #FAFAFA; // foreground
$pd: #62396e; // primary dark
$pl: #f4e4f9; // primary light

:root {
  --white: #FAFAFA;
  --black: #121212;
  --primary: #C678DD;
  --primary-dark: #62396E;
  --primary-light: #F3E4F9; 
}

  font: 100%/1.5 sans-serif;

  font-family: Lato, sans-serif;
  font-size: 100%/1.5;

  color: $bg;
  background-color: $fg;

  color: var(--black);
  background-color: var(--white);

        color: $pd;

        color: var(--primary-dark);

      border-radius: 8px;
      background-color: $pl;

      border-radius: 12px;
      background-color: var(--primary-light);

        border-right: 1px solid black;

        border-right: 1px solid var(--black);

    color: $bg;

    color: var(--black);

    color: $pd;

    color: var(--primary-dark);

    color: $bg;

    color: var(--black);

      color: $pd;

      color: var(--primary-dark);

    border-left: 2px solid $bg;

    border-left: 2px solid var(--black);

    color: $bg;

    color: var(--black);

      border-color: $pd;

      border-color: var(--primary-dark);

// font sizes.
.fz-48 { font-size: 3rem; }
.fz-42 { font-size: 2.625rem; }
.fz-36 { font-size: 2.25rem; }
.fz-32 { font-size: 2rem; }
.fz-28 { font-size: 1.75rem; }
.fz-24 { font-size: 1.5rem; }
.fz-20 { font-size: 1.25rem; }
.fz-16 { font-size: 1rem; }