:root {
  --header-height: theme('spacing.14');
  --docs-scroll-margin-block: calc(var(--header-height) + 4rem);
  --blogpost-scroll-margin-block: calc(var(--header-height));
}

@screen md {
  :root {
    --header-height: theme('spacing.18');
    --blogpost-scroll-margin-block: calc(var(--header-height) - 0.5rem);
  }
}

@screen xl {
  :root {
    --docs-scroll-margin-block: calc(var(--header-height) + 1rem);
  }
}

button:focus-visible, div:focus-visible, a:focus-visible {
  /* remove default focus style */
  outline: none;
  /* custom focus style */
  border-radius: 2px;
  box-shadow: 0 0 0 2px #00DC82;
}