<input type="checkbox" checked/><label>View density shifts</label>
<main> <!-- near: 24px, away: 32px -->
  <section data-density-shift> <!-- near: 16px, away: 24px -->

    <header data-density-shift> <!-- near: 8px, away: 16px -->
      <h4>VIDEO</h4>
      <h2>Supernova</h2>
    </header>
    
    <p>An astronomical event that occurs during the last stages of a massive star's life</p>

    <ul data-density-shift> <!-- near: 8px, away:  16px -->
      <li>Galaxies</li>
      <li>Milky Way</li>
      <li>Speed of Light</li>
    </ul>

    <div data-density-shift> <!-- near: 8px, away: 16px -->
      <button>View</button>
    </div>
    
  </section>
</main>

/*
While this Sass looks complex, this merely recursively builds selectors and applies new values to the CSS Custom Properties on each execution.

body { ... }
body [data-density-shift] { ... }
body [data-density-shift] [data-density-shift] { ... }

The resulting CSS is less code than the function, but the function helps curate the values for exploration more quickly.

*/

$attr-sel: "[data-density-shift]";
$levels: 4; /* including body */

/* Fibonacci Sequence */
@function fib($n) {
  @return if($n <= 1, 1, fib($n - 1) + fib($n - 2));
}

@mixin vars($n) {
  --spacing--away: calc(
    #{fib($n + 1)} * var(--density, 0.5rem)
  );
  
  --spacing--near: calc(
    #{fib($n)} * var(--density, 0.5rem)
  );
}


@for $i from 1 through $levels {
  $nest-sel: if($i == 1, "body", selector-nest($nest-sel, $attr-sel));

  #{$nest-sel} {
    @include vars($levels - $i);
  }
}

/*  =================== */

*, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  line-height: 1;
}

body {
  font-family: sans-serif;
  background:  linear-gradient(to top, #001, #003);
  background-attachment: fixed;
  color: white;
  padding: var(--spacing--away);
}

main {
  padding-block: var(--spacing--away);
}

section {
  max-width: 300px;
  background: white;
  padding: var(--spacing--away);
  color: black;
}

header,
section {
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: var(--spacing--near);
}

h4 {
  opacity: .6;
}

ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing--near);
}

li {
  background: #eee;
  padding: var(--spacing--near);
  font-size: .8em;
  border-radius: 2px;
}

button {
  cursor: pointer;
  background: #316a9e;
  color: white;
  border: 0;
  border-radius: 2px;
  padding: var(--spacing--near) var(--spacing--away);
}

/*  =================== */

input[type="checkbox"] {
  margin-inline-end: 1em;
}

input[type="checkbox"] ~ * [data-density-shift] {
  position: relative;
}

input[type="checkbox"]:checked ~ * [data-density-shift] {
  outline: 2px dashed #ec38bc;
}

input[type="checkbox"]:checked ~ * [data-density-shift]:before {
  content: 'density shift';
  position: absolute;
  background: #ec38bc;
  color: white;
  font-size: .5em;
  padding: .5em;
  white-space: pre;
  z-index: 1;
  top: 100%;
  right: -2px;
}