/* Base element styles: reset, links, headings, body. */

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

img,
picture {
  max-width: 100%;
  display: block;
}

input,
button,
textarea,
select {
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* links */
a:not(.button, .nav-item, [class*="button--shadow"]) {
  color: var(--link-color);
  text-decoration: none;
  transition: var(--transition-default);

  &:hover {
    color: var(--link-hover-color);
  }

  &:active {
    color: var(--link-active-color);
  }
}

/* headings */
h1, h2, h3, h4, h5, h6 {
  /* long words in big titles wrap instead of widening the page on phones */
  overflow-wrap: break-word;
  color: var(--heading-color);
  line-height: var(--line-height-headings);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family-headings);
}

.h1 {
  font-size: 32px;
}

/* body */
html {
  height: -webkit-fill-available;
}

body {
  background-color: var(--body-bg-color);
  font-family: var(--body-font);
  color: var(--body-color);
  min-height: 100vh;
  min-height: -webkit-fill-available;
  text-rendering: optimizeLegibility;

  @media (width <= 720px) {
    padding-top: 16px;
  }
}

/* decorative arrows, top right. Stroke color is baked into each SVG. */
body:not(.error404) {
  background-image: url("data: image/svg+xml, %3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20839.08%20838.58%22%3E%3Cpath%20id%3D%22Path_85%22%20d%3D%22M837.5%2C362.54V17.85c0-8.99-7.29-16.28-16.28-16.28%2C0%2C0%2C0%2C0%2C0%2C0h-344.67c-8.99%2C0-16.28%2C7.29-16.28%2C16.28%2C0%2C4.32%2C1.72%2C8.46%2C4.77%2C11.51l344.67%2C344.68c6.35%2C6.36%2C16.66%2C6.36%2C23.02%2C0%2C3.05-3.05%2C4.77-7.19%2C4.77-11.51%22%20%20%20%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23E8EAED%3B%20stroke-miterlimit%3A%2010%3B%22%20%2F%3E%3Cpath%20id%3D%22Path_92%22%20d%3D%22M837.5%2C821.81v-344.69c0-8.99-7.29-16.28-16.28-16.28t0%2C0h-344.67c-8.99%2C0-16.28%2C7.29-16.28%2C16.28%2C0%2C4.32%2C1.72%2C8.46%2C4.77%2C11.51l344.67%2C344.68c6.35%2C6.36%2C16.66%2C6.36%2C23.02%2C0%2C3.05-3.05%2C4.77-7.19%2C4.77-11.51%22%20%20%20%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23E8EAED%3B%20stroke-miterlimit%3A%2010%3B%22%20%2F%3E%3Cpath%20id%3D%22Path_93%22%20d%3D%22M377.72%2C362.54V17.85c0-8.99-7.29-16.28-16.28-16.28H16.78c-8.99%2C0-16.28%2C7.29-16.28%2C16.28%2C0%2C4.32%2C1.72%2C8.46%2C4.77%2C11.51l344.68%2C344.68c6.35%2C6.36%2C16.66%2C6.36%2C23.02%2C0%2C3.05-3.05%2C4.77-7.19%2C4.77-11.51%22%20%20%20%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%23E8EAED%3B%20stroke-miterlimit%3A%2010%3B%22%20%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: right 50px top 120px;
  background-size: 33%;
}

body[data-theme="dark"] {
  background-image: url("data: image/svg+xml, %3Csvg%20id%3D%22Layer_1%22%20data-name%3D%22Layer%201%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20839.08%20838.58%22%3E%3Cpath%20id%3D%22Path_85%22%20d%3D%22M837.5%2C362.54V17.85c0-8.99-7.29-16.28-16.28-16.28%2C0%2C0%2C0%2C0%2C0%2C0h-344.67c-8.99%2C0-16.28%2C7.29-16.28%2C16.28%2C0%2C4.32%2C1.72%2C8.46%2C4.77%2C11.51l344.67%2C344.68c6.35%2C6.36%2C16.66%2C6.36%2C23.02%2C0%2C3.05-3.05%2C4.77-7.19%2C4.77-11.51%22%20%20%20%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%232C3137%3B%20stroke-miterlimit%3A%2010%3B%22%20%2F%3E%3Cpath%20id%3D%22Path_92%22%20d%3D%22M837.5%2C821.81v-344.69c0-8.99-7.29-16.28-16.28-16.28t0%2C0h-344.67c-8.99%2C0-16.28%2C7.29-16.28%2C16.28%2C0%2C4.32%2C1.72%2C8.46%2C4.77%2C11.51l344.67%2C344.68c6.35%2C6.36%2C16.66%2C6.36%2C23.02%2C0%2C3.05-3.05%2C4.77-7.19%2C4.77-11.51%22%20%20%20%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%232C3137%3B%20stroke-miterlimit%3A%2010%3B%22%20%2F%3E%3Cpath%20id%3D%22Path_93%22%20d%3D%22M377.72%2C362.54V17.85c0-8.99-7.29-16.28-16.28-16.28H16.78c-8.99%2C0-16.28%2C7.29-16.28%2C16.28%2C0%2C4.32%2C1.72%2C8.46%2C4.77%2C11.51l344.68%2C344.68c6.35%2C6.36%2C16.66%2C6.36%2C23.02%2C0%2C3.05-3.05%2C4.77-7.19%2C4.77-11.51%22%20%20%20%20style%3D%22fill%3A%20none%3B%20stroke%3A%20%232C3137%3B%20stroke-miterlimit%3A%2010%3B%22%20%2F%3E%3C%2Fsvg%3E");
}

::selection {
  color: var(--blurple-darker);
  background: var(--pink-lighter);
}