@layer reset, theme, components;
@layer reset {
  * {
    box-sizing: border-box;
  }
  html {
    color-scheme: light dark;
    font-family: "Roboto", "Helvetica", sans-serif;
  }
  body {
    margin: 0;
  }
  h1, h2, h3, h4, h5, h6 {
    margin: 0;
  }
  p, pre {
    margin: 0;
  }
  summary {
    list-style: none;
    cursor: pointer;
  }
  dialog {
    border: 0;
    padding: 0;
    background: transparent;
  }
  label[for] {
    cursor: pointer;
  }
  label:has(:where(input, textarea, select)) {
    cursor: pointer;
  }
  img {
    display: block;
    max-width: 100%;
  }
}
@layer theme {
  @keyframes appearFade {
    from {
      opacity: 0;
    }
  }
  @keyframes disappearFade {
    to {
      opacity: 0;
    }
  }
  @keyframes appearScreen {
    from {
      scale: 1 0;
      transform: scaleX(1.5);
      opacity: 0;
      filter: invert(50%) brightness(200%);
    }
    50% {
      opacity: 1;
      transform: scaleX(1);
      filter: invert(50%) brightness(200%);
    }
    to {
      opacity: 1;
    }
  }
  @keyframes disappearScreen {
    from {
      opacity: 1;
    }
    50% {
      opacity: 1;
      transform: scaleX(1);
      filter: invert(50%) brightness(200%);
    }
    to {
      scale: 1 0;
      transform: scaleX(1.5);
      opacity: 0;
      filter: invert(50%) brightness(200%);
    }
  }
  @keyframes appearUp {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
  }
  @keyframes disappearUp {
    to {
      opacity: 0;
      transform: translateY(-100%);
    }
  }
  @keyframes spinCW {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(1turn);
    }
  }
  @keyframes spinCCW {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(-1turn);
    }
  }
  :root {
    --max-width: 50rem;
    --layout-gutter: 2rem;
  }
  :root,
  ::backdrop {
    color-scheme: light;
    --theme: light;
    --link-base: oklch(0.55 0.13 70);
    --link: var(--link-base);
    --accent-base: oklch(0.55 0.13 70);
    --accent: var(--accent-base);
    --bg-primary: oklch(0.98 0 0);
    --colour-primary: oklch(0 0 0);
    --bg-primary--active: oklch(0.9 0 0);
    --colour-primary--active: oklch(0 0 0);
    --bg-secondary: oklch(0.9 0 0);
    --colour-secondary: oklch(0 0 0);
    --bg-secondary--active: oklch(0.8 0 0);
    --colour-secondary--active: oklch(0 0 0);
    --bg-tertiary: oklch(0.8 0 0);
    --colour-tertiary: oklch(0 0 0);
    --bg-tertiary--active: oklch(0.75 0 0);
    --colour-tertiary--active: oklch(0 0 0);
    --colour-task--todo: oklch(0.27 0.3 225);
    --colour-task--in-progress: oklch(0.27 0.3 225);
    --colour-task--completed: oklch(0.27 0.3 150);
    --colour-task--investigating: oklch(0.27 0.3 225);
    --colour-task--in-review: oklch(0.27 0.3 225);
    --colour-task--ready-to-test: oklch(0.27 0.3 150);
    --colour-task--paused: oklch(0.27 0.3 25);
    --colour-task--approved-to-deploy: oklch(0.27 0.3 150);
    --colour-task--will-not-do: oklch(0.27 0.3 25);
  }
  html {
    color-scheme: light;
  }
  @media not print {
    @media (prefers-color-scheme: dark) {
      :root,
      ::backdrop {
        color-scheme: dark;
        --theme: dark;
        --link-base: oklch(0.7 0.15 70);
        --link: var(--link-base);
        --accent-base: oklch(0.7 0.15 70);
        --accent: var(--accent-base);
        --bg-primary: oklch(0.15 0 0);
        --colour-primary: oklch(1 0 0);
        --bg-primary--active: oklch(0.3 0 0);
        --colour-primary--active: oklch(1 0 0);
        --bg-secondary: oklch(0.3 0 0);
        --colour-secondary: oklch(1 0 0);
        --bg-secondary--active: oklch(0.35 0 0);
        --colour-secondary--active: oklch(1 0 0);
        --bg-tertiary: oklch(0.35 0 0);
        --colour-tertiary: oklch(1 0 0);
        --bg-tertiary--active: oklch(0.4 0 0);
        --colour-tertiary--active: oklch(1 0 0);
        --colour-task--todo: oklch(0.8 0.1 225);
        --colour-task--in-progress: oklch(0.8 0.1 225);
        --colour-task--completed: oklch(0.8 0.1 150);
        --colour-task--investigating: oklch(0.8 0.1 225);
        --colour-task--in-review: oklch(0.8 0.1 225);
        --colour-task--ready-to-test: oklch(0.8 0.1 150);
        --colour-task--paused: oklch(0.8 0.1 25);
        --colour-task--approved-to-deploy: oklch(0.8 0.1 150);
        --colour-task--will-not-do: oklch(0.8 0.1 25);
      }
    }
    .light {
      color-scheme: light;
      --theme: light;
      --link-base: oklch(0.55 0.13 70);
      --link: var(--link-base);
      --accent-base: oklch(0.55 0.13 70);
      --accent: var(--accent-base);
      --bg-primary: oklch(0.98 0 0);
      --colour-primary: oklch(0 0 0);
      --bg-primary--active: oklch(0.9 0 0);
      --colour-primary--active: oklch(0 0 0);
      --bg-secondary: oklch(0.9 0 0);
      --colour-secondary: oklch(0 0 0);
      --bg-secondary--active: oklch(0.8 0 0);
      --colour-secondary--active: oklch(0 0 0);
      --bg-tertiary: oklch(0.8 0 0);
      --colour-tertiary: oklch(0 0 0);
      --bg-tertiary--active: oklch(0.75 0 0);
      --colour-tertiary--active: oklch(0 0 0);
      --colour-task--todo: oklch(0.27 0.3 225);
      --colour-task--in-progress: oklch(0.27 0.3 225);
      --colour-task--completed: oklch(0.27 0.3 150);
      --colour-task--investigating: oklch(0.27 0.3 225);
      --colour-task--in-review: oklch(0.27 0.3 225);
      --colour-task--ready-to-test: oklch(0.27 0.3 150);
      --colour-task--paused: oklch(0.27 0.3 25);
      --colour-task--approved-to-deploy: oklch(0.27 0.3 150);
      --colour-task--will-not-do: oklch(0.27 0.3 25);
    }
    @container style(--theme: light) {
      body {
        color-scheme: light;
        --theme: light;
        --link-base: oklch(0.55 0.13 70);
        --link: var(--link-base);
        --accent-base: oklch(0.55 0.13 70);
        --accent: var(--accent-base);
        --bg-primary: oklch(0.98 0 0);
        --colour-primary: oklch(0 0 0);
        --bg-primary--active: oklch(0.9 0 0);
        --colour-primary--active: oklch(0 0 0);
        --bg-secondary: oklch(0.9 0 0);
        --colour-secondary: oklch(0 0 0);
        --bg-secondary--active: oklch(0.8 0 0);
        --colour-secondary--active: oklch(0 0 0);
        --bg-tertiary: oklch(0.8 0 0);
        --colour-tertiary: oklch(0 0 0);
        --bg-tertiary--active: oklch(0.75 0 0);
        --colour-tertiary--active: oklch(0 0 0);
        --colour-task--todo: oklch(0.27 0.3 225);
        --colour-task--in-progress: oklch(0.27 0.3 225);
        --colour-task--completed: oklch(0.27 0.3 150);
        --colour-task--investigating: oklch(0.27 0.3 225);
        --colour-task--in-review: oklch(0.27 0.3 225);
        --colour-task--ready-to-test: oklch(0.27 0.3 150);
        --colour-task--paused: oklch(0.27 0.3 25);
        --colour-task--approved-to-deploy: oklch(0.27 0.3 150);
        --colour-task--will-not-do: oklch(0.27 0.3 25);
      }
    }
    .dark {
      color-scheme: dark;
      --theme: dark;
      --link-base: oklch(0.7 0.15 70);
      --link: var(--link-base);
      --accent-base: oklch(0.7 0.15 70);
      --accent: var(--accent-base);
      --bg-primary: oklch(0.15 0 0);
      --colour-primary: oklch(1 0 0);
      --bg-primary--active: oklch(0.3 0 0);
      --colour-primary--active: oklch(1 0 0);
      --bg-secondary: oklch(0.3 0 0);
      --colour-secondary: oklch(1 0 0);
      --bg-secondary--active: oklch(0.35 0 0);
      --colour-secondary--active: oklch(1 0 0);
      --bg-tertiary: oklch(0.35 0 0);
      --colour-tertiary: oklch(1 0 0);
      --bg-tertiary--active: oklch(0.4 0 0);
      --colour-tertiary--active: oklch(1 0 0);
      --colour-task--todo: oklch(0.8 0.1 225);
      --colour-task--in-progress: oklch(0.8 0.1 225);
      --colour-task--completed: oklch(0.8 0.1 150);
      --colour-task--investigating: oklch(0.8 0.1 225);
      --colour-task--in-review: oklch(0.8 0.1 225);
      --colour-task--ready-to-test: oklch(0.8 0.1 150);
      --colour-task--paused: oklch(0.8 0.1 25);
      --colour-task--approved-to-deploy: oklch(0.8 0.1 150);
      --colour-task--will-not-do: oklch(0.8 0.1 25);
    }
    @container style(--theme: dark) {
      body {
        color-scheme: dark;
        --theme: dark;
        --link-base: oklch(0.7 0.15 70);
        --link: var(--link-base);
        --accent-base: oklch(0.7 0.15 70);
        --accent: var(--accent-base);
        --bg-primary: oklch(0.15 0 0);
        --colour-primary: oklch(1 0 0);
        --bg-primary--active: oklch(0.3 0 0);
        --colour-primary--active: oklch(1 0 0);
        --bg-secondary: oklch(0.3 0 0);
        --colour-secondary: oklch(1 0 0);
        --bg-secondary--active: oklch(0.35 0 0);
        --colour-secondary--active: oklch(1 0 0);
        --bg-tertiary: oklch(0.35 0 0);
        --colour-tertiary: oklch(1 0 0);
        --bg-tertiary--active: oklch(0.4 0 0);
        --colour-tertiary--active: oklch(1 0 0);
        --colour-task--todo: oklch(0.8 0.1 225);
        --colour-task--in-progress: oklch(0.8 0.1 225);
        --colour-task--completed: oklch(0.8 0.1 150);
        --colour-task--investigating: oklch(0.8 0.1 225);
        --colour-task--in-review: oklch(0.8 0.1 225);
        --colour-task--ready-to-test: oklch(0.8 0.1 150);
        --colour-task--paused: oklch(0.8 0.1 25);
        --colour-task--approved-to-deploy: oklch(0.8 0.1 150);
        --colour-task--will-not-do: oklch(0.8 0.1 25);
      }
    }
    .colour-scheme--default {
      color-scheme: light;
      --theme: light;
      --link-base: oklch(0.55 0.13 70);
      --link: var(--link-base);
      --accent-base: oklch(0.55 0.13 70);
      --accent: var(--accent-base);
      --bg-primary: oklch(0.98 0 0);
      --colour-primary: oklch(0 0 0);
      --bg-primary--active: oklch(0.9 0 0);
      --colour-primary--active: oklch(0 0 0);
      --bg-secondary: oklch(0.9 0 0);
      --colour-secondary: oklch(0 0 0);
      --bg-secondary--active: oklch(0.8 0 0);
      --colour-secondary--active: oklch(0 0 0);
      --bg-tertiary: oklch(0.8 0 0);
      --colour-tertiary: oklch(0 0 0);
      --bg-tertiary--active: oklch(0.75 0 0);
      --colour-tertiary--active: oklch(0 0 0);
      --colour-task--todo: oklch(0.27 0.3 225);
      --colour-task--in-progress: oklch(0.27 0.3 225);
      --colour-task--completed: oklch(0.27 0.3 150);
      --colour-task--investigating: oklch(0.27 0.3 225);
      --colour-task--in-review: oklch(0.27 0.3 225);
      --colour-task--ready-to-test: oklch(0.27 0.3 150);
      --colour-task--paused: oklch(0.27 0.3 25);
      --colour-task--approved-to-deploy: oklch(0.27 0.3 150);
      --colour-task--will-not-do: oklch(0.27 0.3 25);
    }
    @media (prefers-color-scheme: dark) {
      .colour-scheme--default {
        color-scheme: dark;
        --theme: dark;
        --link-base: oklch(0.7 0.15 70);
        --link: var(--link-base);
        --accent-base: oklch(0.7 0.15 70);
        --accent: var(--accent-base);
        --bg-primary: oklch(0.15 0 0);
        --colour-primary: oklch(1 0 0);
        --bg-primary--active: oklch(0.3 0 0);
        --colour-primary--active: oklch(1 0 0);
        --bg-secondary: oklch(0.3 0 0);
        --colour-secondary: oklch(1 0 0);
        --bg-secondary--active: oklch(0.35 0 0);
        --colour-secondary--active: oklch(1 0 0);
        --bg-tertiary: oklch(0.35 0 0);
        --colour-tertiary: oklch(1 0 0);
        --bg-tertiary--active: oklch(0.4 0 0);
        --colour-tertiary--active: oklch(1 0 0);
        --colour-task--todo: oklch(0.8 0.1 225);
        --colour-task--in-progress: oklch(0.8 0.1 225);
        --colour-task--completed: oklch(0.8 0.1 150);
        --colour-task--investigating: oklch(0.8 0.1 225);
        --colour-task--in-review: oklch(0.8 0.1 225);
        --colour-task--ready-to-test: oklch(0.8 0.1 150);
        --colour-task--paused: oklch(0.8 0.1 25);
        --colour-task--approved-to-deploy: oklch(0.8 0.1 150);
        --colour-task--will-not-do: oklch(0.8 0.1 25);
      }
    }
  }
  body {
    --bg: var(--bg-primary);
    --colour: var(--colour-primary);
    --accent: var(--accent-base, oklch(0.55 0.13 70));
    --link: var(--link-base, oklch(0.55 0.13 70));
    background-color: oklch(0.98 0 0);
    background-color: var(--bg, oklch(0.98 0 0));
    color: oklch(0 0 0);
    color: var(--colour, oklch(0 0 0));
    accent-color: var(--accent);
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: normal;
    src: url("/assets/fonts/roboto/roboto-regular.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 400;
    font-style: italic;
    src: url("/assets/fonts/roboto/roboto-italic.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: normal;
    src: url("/assets/fonts/roboto/roboto-bold.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Roboto";
    font-weight: 700;
    font-style: italic;
    src: url("/assets/fonts/roboto/roboto-bolditalic.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Nunito";
    font-weight: 400;
    font-style: normal;
    src: url("/assets/fonts/nunito/nunito-bold.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Nunito";
    font-weight: 400;
    font-style: italic;
    src: url("/assets/fonts/nunito/nunito-bolditalic.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Nunito";
    font-weight: 700;
    font-style: normal;
    src: url("/assets/fonts/nunito/nunito-black.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Nunito";
    font-weight: 700;
    font-style: italic;
    src: url("/assets/fonts/nunito/nunito-blackitalic.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Roboto Mono";
    font-weight: 400;
    font-style: normal;
    src: url("/assets/fonts/roboto-mono/robotomono-regular.woff2") format("woff2");
    font-display: auto;
  }
  @font-face {
    font-family: "Icons";
    src: url("/assets/fonts/icons/icons.woff2") format("woff2");
    font-display: auto;
  }
}
@layer components {
  .poetry {
    padding: 4rem;
    margin-inline: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 4rem;
  }
  .poetry__poem {
    display: grid;
    place-items: center;
  }
}

/*# sourceMappingURL=poetry.css.map */