.footer[data-astro-cid-jo6i4kqk] {
  padding: var(--spacing-s);
}

.footer-wrapper[data-astro-cid-jo6i4kqk] {
  width: 100%;
  justify-content: space-between;
  display: flex;
  flex-wrap: wrap;
  color: var(--text-muted);
}
.header[data-astro-cid-nen7h5rs] {
  padding: var(--spacing-s);
}

.logo[data-astro-cid-nen7h5rs] {
}

.navigation[data-astro-cid-nen7h5rs] {
  display: flex;
  align-items: center;
}

.taskboard[data-astro-cid-nen7h5rs] {
  margin-inline-start: auto;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  color: var(--text-main);
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 600;
  font-size: var(--font-size-md);
  letter-spacing: .2em;
  transition: opacity .15s;
}

.taskboard[data-astro-cid-nen7h5rs]:hover, .taskboard[data-astro-cid-nen7h5rs]:focus-visible {
  opacity: .7;
}

.taskboard__arrow[data-astro-cid-nen7h5rs] {
  flex-shrink: 0;
  transition: transform .15s;
}

.taskboard[data-astro-cid-nen7h5rs]:hover .taskboard__arrow[data-astro-cid-nen7h5rs], .taskboard[data-astro-cid-nen7h5rs]:focus-visible .taskboard__arrow[data-astro-cid-nen7h5rs] {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .taskboard[data-astro-cid-nen7h5rs], .taskboard__arrow[data-astro-cid-nen7h5rs] {
    transition: none;
  }
}
@layer reset, base, layout;

  @layer reset {
    /* Box sizing rules */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    /* Prevent font size inflation */
    html {
      -moz-text-size-adjust: none;
      -webkit-text-size-adjust: none;
      text-size-adjust: none;
    }

    /* Remove default margin in favour of better control in authored CSS */
    body,
    h1,
    h2,
    h3,
    h4,
    p,
    figure,
    blockquote,
    dl,
    dd {
      margin-block-end: 0;
      margin: 0;
      padding: 0;
    }

    /* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
    ul[role="list"],
    ol[role="list"] {
      list-style: none;
    }

    /* Set core body defaults */
    body {
      min-height: 100vh;
      line-height: 1.5;
    }

    /* Set shorter line heights on headings and interactive elements */
    h1,
    h2,
    h3,
    h4,
    button,
    input,
    label {
      line-height: 1.1;
    }

    /* Balance text wrapping on headings */
    h1,
    h2,
    h3,
    h4 {
      text-wrap: balance;
    }

    /* A elements that don't have a class get default styles */
    a:not([class]) {
      text-decoration-skip-ink: auto;
      color: currentColor;
    }

    /* Make images easier to work with */
    img,
    picture {
      max-width: 100%;
      display: block;
    }

    /* Inherit fonts for inputs and buttons */
    input,
    button,
    textarea,
    select {
      font-family: inherit;
      font-size: inherit;
    }

    /* Make sure textareas without a rows attribute are not tiny */
    textarea:not([rows]) {
      min-height: 10em;
    }

    /* Anything that has been anchored to should have extra scroll margin */
    :target {
      scroll-margin-block: 5ex;
    }
  }

  @layer base {
    :root {
      --clr-white: hsl(0, 0%, 100%);

      --clr-blue-500: hsl(200, 79%, 57%);
      --clr-green-500: hsl(122, 40%, 49%);
      --clr-orange-500: hsl(36, 79%, 57%);

      --clr-gray-950: hsl(240, 6%, 5%);
      --clr-gray-900: hsl(240, 6%, 10%);
      --clr-gray-800: hsl(240, 6%, 12%);
      --clr-gray-700: hsl(240, 6%, 17%);
      --clr-gray-600: hsl(240, 6%, 21%);
      --clr-gray-500: hsl(240, 6%, 25%);
      --clr-gray-400: hsl(240, 6%, 30%);
      --clr-gray-300: hsl(240, 6%, 35%);
      --clr-gray-200: hsl(240, 6%, 45%);
      --clr-gray-100: hsl(240, 6%, 55%);
      --clr-gray-50: hsl(240, 6%, 95%);

      --ff-heading: var(--font-proxima-nova);
      --ff-body: var(--font-proxima-nova);

      --fs-100: 0.688rem;
      --fs-200: 0.813rem;
      --fs-300: 1rem;
      --fs-400: 1.188rem;
      --fs-500: 1.438rem;
      --fs-600: 1.75rem;
      --fs-700: 2.063rem;
      --fs-800: 2.5rem;
      --fs-900: 3rem;
      --fs-950: 3.563rem;

      --spacing-xxs: 0.25rem;
      --spacing-xs: 0.5rem;
      --spacing-s: 1rem;
      --spacing-m: 1.5rem;
      --spacing-l: 2rem;
      --spacing-xl: 3rem;
      --spacing-xxl: 5rem;
    }

    :root {
      --text-main: var(--clr-white);
      --text-muted: var(--clr-gray-100);
      --text-accent: var(--clr-blue-500);

      --background-main: var(--clr-gray-900);

      --font-size-xs: var(--fs-100);
      --font-size-sm: var(--fs-200);
      --font-size-md: var(--fs-300);
      --font-size-lg: var(--fs-400);
      --font-size-xl: var(--fs-500);
      --font-size-2xl: var(--fs-600);
      --font-size-3xl: var(--fs-700);
      --font-size-4xl: var(--fs-800);
      --font-size-5xl: var(--fs-900);
      --font-size-6xl: var(--fs-950);
    }
  }

  @layer base {
    @view-transition {
      navigation: auto;
    }

    @media (prefers-reduced-motion: no-preference) {
      html {
        scroll-behavior: smooth;
      }
    }

    html {
      scroll-padding: 2rem;
    }

    body {
      font-family: var(--ff-body);
      color: var(--text-main);
      background-color: var(--background-main);
    }

    section {
      padding-block: var(--spacing-xl);
      background-color: var(--background-main);
      color: var(--text-main);
    }

    [data-color="light"] {
      --background-main: var(--clr-gray-50);
      --text-main: var(--clr-gray-950);
      --text-muted: var(--clr-gray-700);
    }
  }

  @layer layout {
    .flow > * + * {
      margin-block-start: var(--flow-space, 1em);
    }
    .grid-flow {
      display: grid;
      gap: var(--grid-flow-space, 1rem);

      align-content: start;
      justify-items: start;
    }

    .main-container {
      display: grid;
      grid-template-rows: auto 1fr auto;
      min-height: 100dvh;
    }

    main {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xl);
      padding-block: var(--spacing-xl);
    }

    .container {
      --flow-space: var(--spacing-xl);

      width: 100%;
      max-width: 1100px;
      margin-inline: auto;
      padding-inline: var(--spacing-s);

      container-name: main-container;
      container-type: inline-size;
    }
  }.eyebrow[data-astro-cid-73dgtvns] {
  font-size: var(--font-size-md);
  text-transform: uppercase;
  color: var(--text-accent);
  margin-bottom: var(--spacing-xs);
  letter-spacing: 10%;
  font-weight: bold;
}

.heading[data-astro-cid-73dgtvns] {
  font-size: var(--font-size-6xl);
  max-width: 15ch;
  line-height: 1;
  font-weight: 400;
  color: var(--text-main);
  text-wrap: balance;
  margin-bottom: var(--spacing-s);
}

.body[data-astro-cid-73dgtvns] {
  font-size: var(--font-size-md);
  color: var(--text-muted);
  max-width: 60ch;
  text-wrap: balance;
}