:root {
  --color-canvas: white;
  --color-ink: oklch(26% 0.05 264);
  --color-accent: oklch(57.02% 0.1895 260.46);

  --text-large: 6rem;
  --text-medium: 2rem;
  --text-normal: 1rem;

  @media (prefers-color-scheme: dark) {
    --color-canvas: oklch(20% 0.0195 232.58);
    --color-ink: oklch(96.02% 0.0034 260);
    --color-accent: oklch(74% 0.1293 256);
  }
}

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

html {
  font-size: 1.5rem;
  overflow: hidden;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  align-items: center;
  background-color: var(--color-canvas);
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  font-family: system-ui;
  font-size: var(--text-normal);
  font-style: normal;
  font-weight: 500;
  gap: 2rem;
  line-height: 1.375;
  min-height: 100vh;
  overflow: hidden;
  padding-inline: 1rem;
  justify-content: center;
  text-align: center;
  text-rendering: optimizeLegibility;
  text-size-adjust: none;

  /* Cool wavy striped lines */
  &:before {
    --mask:
    radial-gradient(6px at 50% calc(100% + 3px), #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) calc(50% - 8px) calc(50% - 3px + .5px)/16px 6px ,
    radial-gradient(6px at 50% -3px, #0000 calc(99% - 2px), #000 calc(101% - 2px) 99%, #0000 101%) 50% calc(50% + 3px)/16px 6px ;
    -webkit-mask: var(--mask);
    mask: var(--mask);
    background: var(--color-accent);
    content: "";
    inset: 0;
    opacity: 0.15;
    position: absolute;
    z-index: -1;
  }
}

.error-page__stamp {
  --padding: 1rem 2rem;
  --stroke-width: 0.25rem;

  align-items: center;
  background-color: color-mix(in oklch, var(--color-canvas), transparent 50%);
  background-color: var(--color-canvas);
  border-radius: calc(var(--stroke-width) * 2);
  border: calc(var(--stroke-width) * 1) dashed var(--color-accent);
  color: var(--color-accent);
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.25;
  max-inline-size: 36ch;
  rotate: -5deg;
  padding: var(--padding);
  position: relative;
}

h1 {
  font-size: var(--text-large);
  font-weight: 900;
  line-height: 1;
  position: relative;
  text-transform: uppercase;

  @supports (-webkit-text-stroke: 1px black) {
    -webkit-text-stroke: var(--stroke-width) var(--color-accent);
    -webkit-text-fill-color: transparent;
  }
}

h2 {
  font-size: var(--text-normal);
  font-weight: inherit;
}

hr {
  inline-size: 100%;
  border: 0;
  border-block-start: calc(var(--stroke-width) / 2) solid currentcolor;
  color: currentcolor;
  margin: 1ch auto;
}

a {
  color: inherit;
  line-height: 2rem;
  display: inline-block;
  padding-inline: 1ch;
  border-radius: 99rem;
  text-decoration: none;

  span {
    text-decoration: underline;
    text-underline-offset: 0.25ch;
  }

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