/* Edit css however you like.
 * Try up/down keys &
 * Left/Right drag
*/

:root {
  color-scheme: light dark;
  --grid-size: 12;
  --font-size: 16;
  --line-height: 1.5;
  --scale-factor: 1.618;
  --unit: 1px;
}

body {
  font-family: system-ui;
  --content-width: 70ch;
  margin-inline: auto;
}

h1 {
  --scale-power: 4;
  --line-height: .9;
  margin-top: calc(2 * var(--grid-unit));
  margin-bottom: calc(4 * var(--grid-unit));
}

h2 {
  --scale-power: 3;
  --line-height: 1.0;
  margin-bottom: calc(3 * var(--grid-unit));
}

h3 {
  --scale-power: 2;
  --line-height: 1.1;
  margin-bottom: calc(1 * var(--grid-unit));
}

h4 {
  --scale-power: 1;
  --line-height: 1.2;
  margin-bottom: var(--grid-unit);
}

p,
ul,
ol,
pre,
blockquote {
  margin-bottom: var(--grid-unit);
}

/* Add your inline elements that could affect line-height */
::marker,
code,
small {
  line-height: 1;
}

/* ⬇︎ Gridlover internals ⬇︎
 * Feel free to modify and adapt, it's just math, not magic.
 */

* {
  --scale-power: 0;
  --gridlover-font-size: calc(var(--font-size) * pow(var(--scale-factor), var(--scale-power)) * var(--unit));
  --gridlover-line-height: round(up, calc(var(--gridlover-font-size) * var(--line-height)), var(--grid-unit));
  font-size: var(--gridlover-font-size);
  line-height: var(--gridlover-line-height);
  margin: 0;

  --grid-unit: calc(var(--grid-size) * var(--unit));
  max-width: calc(round(
      calc(var(--content-width) + var(--grid-unit)),
      calc(var(--grid-unit) * 2)
    ) + var(--grid-unit));

  --gridlover-grid-line-width: .5px;
  --gridlover-grid-color: oklch(70% 0.18 235 / 60%);
}

[grid="lines"] {
  background-image:
    linear-gradient(
      var(--gridlover-grid-color) var(--gridlover-grid-line-width),
      transparent var(--gridlover-grid-line-width)
    ),
    linear-gradient(
      to right,
      var(--gridlover-grid-color) var(--gridlover-grid-line-width),
      transparent var(--gridlover-grid-line-width)
    )
  ;
  background-size: var(--grid-unit) var(--grid-unit);
  background-position: center top;
}
[grid="lines"] * {
  background: color-mix(in oklch, var(--gridlover-grid-color), transparent 30%);
}
[grid="dots"] {
  background-image:
    radial-gradient(
      circle at var(--gridlover-grid-line-width) var(--gridlover-grid-line-width),
      var(--gridlover-grid-color) var(--gridlover-grid-line-width),
      transparent var(--gridlover-grid-line-width)
    )
  ;
  background-size: var(--grid-unit) var(--grid-unit);
  background-position: center top;
}
[grid="dots"] * {
  background: color-mix(in oklch, var(--gridlover-grid-color), transparent 50%);
}

::selection {
  background: var(--gridlover-grid-color);
}