:root {
  --main-bg-color: rgb(174, 231, 195);
  --text: #111;
  --heading: rgb(248, 129, 181);
  --link: rgb(104, 152, 250);
  --link-visited: rgb(215, 50, 215);
  --heading-font: 'comic sans ms';
}

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}

*,
*::before,
*::after {
  transition:
    color .25s ease,
    background-color .25s ease,
    border-color .25s ease,
    text-shadow .25s ease;
}

body {
  text-align: left;
  font-family: var(--body-font); /* The one true font */
  background-color: var(--main-bg-color);

  display: flex;
  flex-direction: column;
  margin-left: 5em;
  margin-right: 5em;
}

main {
  flex: 1;
}

h1,h2,h3,h4,h5,h6 {
  --h-indent: 0em;
  margin-left: var(--h-indent);
  font-family: var(--heading-font);
}

h1 {
  color: var(--heading);
}

h2 {
  --h-indent: 0.5em;
  color: color-mix(in oklab, var(--main-bg-color) 25%, var(--heading) 100%);
}

:is(h1, h2, h3, h4, h5, h6) ~ :is(p, ul) {
  margin-left: calc(var(--h-indent, 0em) + 1.7em);
  margin-right: calc(var(--h-indent, 0em) + 1.7em);
}

a {
  text-decoration: none;
  text-shadow: 0.065em 0.065em rgba(10, 2, 10, 0.316);
}

a:hover {
  text-decoration: dotted;
}

/* The color-mix stuff is a bit of a hack around lack of alpha blending for links */
a:link {
  color: color-mix(in oklab, var(--main-bg-color) 50%, var(--link) 100%);
}

a:visited {
  color: color-mix(in oklab, var(--main-bg-color) 100%, var(--link-visited) 55%);
}