@layer tailwindBase{
.transform{
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
}
.filter{
--tw-blur:  ;
--tw-brightness:  ;
--tw-contrast:  ;
--tw-grayscale:  ;
--tw-hue-rotate:  ;
--tw-invert:  ;
--tw-saturate:  ;
--tw-sepia:  ;
--tw-drop-shadow:  ;
}
.backdrop-filter{
--tw-backdrop-blur:  ;
--tw-backdrop-brightness:  ;
--tw-backdrop-contrast:  ;
--tw-backdrop-grayscale:  ;
--tw-backdrop-hue-rotate:  ;
--tw-backdrop-invert:  ;
--tw-backdrop-opacity:  ;
--tw-backdrop-saturate:  ;
--tw-backdrop-sepia:  ;
}
}

@layer reset{
/* inspired by: */
/* https://piccalil.li/blog/a-modern-css-reset/ */
/* https://keithjgrant.com/posts/2024/01/my-css-resets/ */
/* https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/#css-reset-additions */
/* https://github.com/mayank99/reset.css/blob/main/package/index.css */
/* Box sizing rules */

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

/* Typography */
* {
  text-wrap: pretty;
}

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

/* Scroll behavior */
html:focus-within {
  scroll-behavior: smooth;
}

/* Body defaults */
body {
  min-height: 100vh;
  min-height: 100dvh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

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

/* List styles */
ul[role='list'],
ol[role='list'] {
  list-style: none;
}

[role='list'] {
  padding: 0;
}

/* Anchor styles */
a {
  color: currentcolor;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}

/* Image styles */
img,
picture,
svg,
canvas {
  max-inline-size: 100%;
  block-size: auto;
  vertical-align: middle;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* Button styles */
button {
  all: unset;
}

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

/* Textarea styles */
textarea {
  resize: vertical;
  resize: block;
}

textarea:not([rows]) {
  min-height: 10em;
}

/* Cursor styles */
button,
label,
select,
summary,
[role='button'],
[role='option'] {
  cursor: pointer;
}

/* Scroll margin above anchor links */
:target {
  scroll-margin-block-start: 2ex;
}

/* Scroll margin below focused elements */
:focus {
  scroll-margin-block-end: 8vh;
}

dialog {
  border: none;
  background: none;
  inset: unset;
  max-width: unset;
  max-height: unset;
}

[popover] {
  border: none;
  background: none;
  inset: unset;
  color: inherit;
}

/*  hide dialog elements without open or popover attributes, and elements with a popover attribute that are not in an open state. */
dialog:not([open], [popover]),
[popover]:not(:popover-open) {
  display: none !important;
}

/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */
html:has(dialog[open]:modal) {
  overflow: hidden;
}

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

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

@layer fonts{
@font-face {
  font-family: 'Yanoneka';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: local(''),
    url(/assets/fonts/yanoneka/YanoneKaffeesatz-Bold.woff2) format('woff2');
}
}

@layer tailwindComponents{
:root{
--color-gray-100: #f8f8f8;
--color-gray-200: #e4e4e4;
--color-gray-300: #aeaeae;
--color-gray-400: #808080;
--color-gray-500: #636363;
--color-gray-600: #484848;
--color-gray-700: #3a3a3a;
--color-gray-800: #2e2e2e;
--color-gray-900: #161616;
--color-pri: #d9480f;
--color-pri-subdued: #ca5935;
--color-sec: #fd7e14;
--color-sec-subdued: #ee8947;
--color-acc: #28a745;
--color-acc-subdued: #49a257;
--border-radius-small: 0.1875rem;
--border-radius-medium: 0.3rem;
--space-3xs: clamp(0.125rem, 0.11rem + 0.10vw, 0.1875rem);
--space-2xs: clamp(0.1875rem, 0.15rem + 0.19vw, 0.3125rem);
--space-xs: clamp(0.3125rem, 0.27rem + 0.19vw, 0.4375rem);
--space-s: clamp(0.625rem, 0.55rem + 0.38vw, 0.875rem);
--space-m: clamp(0.875rem, 0.74rem + 0.67vw, 1.3125rem);
--space-l: clamp(1.1875rem, 0.96rem + 1.15vw, 1.9375rem);
--space-xl: clamp(2.375rem, 2.03rem + 1.73vw, 3.5rem);
--space-2xl: clamp(3.5625rem, 3.04rem + 2.60vw, 5.25rem);
--space-3xl: clamp(5.9375rem, 5.07rem + 4.33vw, 8.75rem);
--space-xs-s: clamp(0.3125rem, 0.14rem + 0.87vw, 0.875rem);
--space-s-m: clamp(0.625rem, 0.41rem + 1.06vw, 1.3125rem);
--space-m-l: clamp(0.875rem, 0.55rem + 1.63vw, 1.9375rem);
--space-l-xl: clamp(1.1875rem, 0.48rem + 3.56vw, 3.5rem);
--space-l-2xl: clamp(2.375rem, 1.49rem + 4.42vw, 5.25rem);
--space-xl-2xl: clamp(3.5625rem, 1.97rem + 7.98vw, 8.75rem);
--space-2xl-3xl: clamp(5.9375rem, 3.46rem + 12.40vw, 14rem);
--size-step-min-2: clamp(0.8125rem, 0.75rem + 0.29vw, 1rem);
--size-step-min-1: clamp(1rem, 0.88rem + 0.58vw, 1.375rem);
--size-step-0: clamp(1.1875rem, 1.01rem + 0.87vw, 1.75rem);
--size-step-1: clamp(1.4375rem, 1.21rem + 1.15vw, 2.1875rem);
--size-step-2: clamp(1.6875rem, 1.36rem + 1.63vw, 2.75rem);
--size-step-3: clamp(2.0625rem, 1.64rem + 2.12vw, 3.4375rem);
--size-step-4: clamp(2.5rem, 1.96rem + 2.69vw, 4.25rem);
--size-step-5: clamp(2.9375rem, 2.19rem + 3.75vw, 5.375rem);
--size-step-6: clamp(3.5rem, 1.12rem + 11.92vw, 11.25rem);
--leading-flat: 1;
--leading-fine: 1.2;
--leading-standard: 1.4;
--font-display: Yanoneka,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
--font-base: system-ui,sans-serif;
--font-mono: ui-monospace,Cascadia Code,Source Code Pro,Menlo,Consolas,DejaVu Sans Mono,monospace;
--font-regular: 400;
--font-bold: 700;
--font-extra-bold: 900;
}
}

@layer variables{

/* Global variables.  */

/* Basic variable definitions for color schemes */
:root {
  --gutter: var(--space-m-l);
  --transition-duration: 250ms;
  --transition-timing: ease;
  --wrapper-width: 85rem;
  --tracking: -0.04ch;
  --tracking-s: -0.075ch;
  --tracking-wide: 0.04ch;
  --stroke: 1px solid var(--color-bg-accent);

  --gradient-rainbow: linear-gradient(90deg, #cf4662 10%, #fbbe25 30%, #62c95c 50%, #08bccb 75%, #a977d5 90%);
  --gradient-conic: conic-gradient(
    var(--color-primary) 0 28%,
    var(--color-secondary) 0 67%,
    var(--color-accent) 0 100%
  );
  --gradient-stripes: linear-gradient(
    45deg,
    var(--color-gray-900) 0 75%,
    var(--color-primary) 0 85%,
    var(--color-secondary) 0 92%,
    var(--color-accent) 0 100%
  );
  --gradient-flames: radial-gradient(
    rgb(220, 38, 38),
    rgb(234, 88, 12),
    rgb(202, 138, 4)
  );

  --color-light: var(--color-gray-100);
  --color-dark: var(--color-gray-900);
  --color-mid: var(--color-gray-400);
}

/* Light theme */
:root,
:root[data-theme='light'] {
  --color-text: var(--color-gray-800);
  --color-bg: var(--color-gray-100);

  --color-primary: var(--color-pri);
  --color-secondary: var(--color-sec);
  --color-accent: var(--color-acc);

  --color-text-accent: var(--color-gray-700);
  --color-bg-accent: var(--color-gray-200);
  --color-bg-accent-2: var(--color-gray-300);
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
  :root {
    --color-text: var(--color-gray-100);
    --color-bg: var(--color-gray-800);

    --color-primary: var(--color-pri-subdued);
    --color-secondary: var(--color-sec-subdued);
    --color-accent: var(--color-acc-subdued);

    --color-text-accent: var(--color-gray-300);
    --color-bg-accent: var(--color-gray-700);
    --color-bg-accent-2: var(--color-gray-600);
  }
}
:root[data-theme='dark'] {
  --color-text: var(--color-gray-100);
  --color-bg: var(--color-gray-800);

  --color-primary: var(--color-pri-subdued);
  --color-secondary: var(--color-sec-subdued);
  --color-accent: var(--color-acc-subdued);

  --color-text-accent: var(--color-gray-300);
  --color-bg-accent: var(--color-gray-700);
  --color-bg-accent-2: var(--color-gray-600);
}
}

@layer global{

/*
  Global styles

  Low-specificity, global styles that apply to the whole
  project: https://cube.fyi/css.html
*/

html {
  color-scheme: light dark;
}

body {
  display: flex;
  flex-direction: column;
  font-family: var(--font-base);
  font-size: var(--size-step-0);
  font-weight: var(--font-regular);
  font-size-adjust: from-font;
  line-height: var(--leading-standard);
  color: var(--color-text);
  background-color: var(--color-bg);
  accent-color: var(--color-primary);
  letter-spacing: var(--tracking);
}

main {
  flex: auto;
}

h1,
h2,
h3 {
  line-height: 1.2;
  letter-spacing: var(--tracking-s);
  font-weight: var(--font-extra-bold);
  font-family: var(--font-display);
}

h1 {
  font-size: var(--size-step-6);
}

h2 {
  font-size: var(--size-step-4);
}

h3 {
  font-size: var(--size-step-2);
}

p,
li,
blockquote:not([class]) {
  max-inline-size: 65ch;
}

blockquote {
  border-inline-start: 0.5rem solid var(--color-primary);
  padding: var(--space-m-l);
  font-size: var(--size-step-2);
}

blockquote > * + * {
  margin-block-start: var(--space-m-l);
}

blockquote :last-child {
  font-family: var(--font-base);
  font-style: normal;
  font-size: var(--size-step-1);
}

svg {
  block-size: 0.6lh;
  inline-size: auto;
  flex: none;
}

strong {
  font-weight: var(--font-extra-bold);
}

hr {
  border: none;
  border: 0;
  height: 1px;
  width: 20%;
  margin-block: var(--flow-space, var(--space-m-l));
  margin-block: var(--space-m-l);
  margin-inline-start: 0;
  background-color: var(--color-bg-accent-2);
}

figcaption {
  margin-block-start: var(--space-s);
  font-size: var(--size-step-min-1);
  text-align: center;
  padding-block-end: var(--space-xs);
  border-bottom: var(--stroke);
}

[role='list'] {
  padding: 0;
}

ol li::marker {
  color: var(--color-primary);
}

a {
  text-decoration-thickness: 0.15ex;
  text-underline-offset: 0.2ch;
  transition: color 0.2s ease-in-out;
}

a:not([class]):hover {
  text-decoration: none;
}

article p a {
  color: var(--color-primary);
}

article p a:hover {
  color: var(--color-accent);
}

a:focus {
  outline: 3px dashed;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 3px solid var(--color-primary, currentColor);
  outline-offset: var(--focus-offset, 0.3ch);
}

/* reduce focus offset for Firefox */
@supports (-moz-appearance: none) {
  :root {
    --focus-offset: 0.08em;
  }
}

::-moz-selection {
  background-color: var(--color-text);
  color: var(--color-bg);
}

::selection {
  background-color: var(--color-text);
  color: var(--color-bg);
}

.preload-transitions * {
  transition: none !important;
}

@media (scripting: none) {
  .require-js {
    display: none;
  }
}
}

@layer compositions{

/*
CLUSTER
More info: https://every-layout.dev/layouts/cluster/
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  justify-content: var(--cluster-horizontal-alignment, flex-start);
  align-items: var(--cluster-vertical-alignment, center);
}
/*
FLOW UTILITY
Like the Every Layout stack: https://every-layout.dev/layouts/stack/
Info about this implementation: https://piccalil.li/quick-tip/flow-utility/
*/
.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

/* AUTO GRID
Related Every Layout: https://every-layout.dev/layouts/grid/
More info on the flexible nature: https://piccalil.li/tutorial/create-a-responsive-grid-layout-with-no-media-queries-using-css-grid/
A flexible layout that will create an auto-fill grid with
configurable grid item sizes

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--grid-min-item-size (14rem): How large each item should be
ideally, as a minimum.

--grid-placement (auto-fill): Set either auto-fit or auto-fill
to change how empty grid tracks are handled */

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-placement, auto-fill), minmax(var(--grid-min-item-size, 16rem), 1fr));
  gap: var(--gutter, var(--space-s-m));
}

.grid[data-rows='masonry'] {
  grid-template-rows: masonry;
  align-items: start;
}

.grid[data-layout='50-50'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 50vw, 28rem);
}

.grid[data-layout='thirds'] {
  --grid-placement: auto-fit;
  --grid-min-item-size: clamp(16rem, 33%, 20rem);
}

/*
 REEL
 A layout that creates a carousel-like element


 CONFIGURATION
 Add an attribute of data-scroll="snap" to the element
 to enable scroll snapping
*/

.reel {
  --reel-space: 2rem;
  display: flex;
  block-size: auto;
  max-inline-size: 100%;
  margin-inline: auto;

  /* Padding allows child element hover states to show */
  padding: 0.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.reel > * {
  flex-basis: var(--reel-item-width, calc(33.333% - var(--reel-space)));
  flex-shrink: 0;
}

.reel > * + * {
  margin-inline-start: var(--reel-space);
}

/* SCROLL TYPE EXCEPTION
   Sets the reel to snap on each item on scroll */
.reel[data-scroll='snap'] {
  scroll-snap-type: x mandatory;
}

.reel[data-scroll='snap'] > * {
  scroll-snap-align: start;
}

/*
REPEL
A little layout that pushes items away from each other where
there is space in the viewport and stacks on small viewports

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-s-m)): This defines the space
between each item.

--repel-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/

.repel {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: var(--repel-vertical-alignment, center);
  gap: var(--gutter, var(--space-s-l));
}

.repel[data-nowrap] {
  flex-wrap: nowrap;
}

/*
SIDEBAR
More info: https://every-layout.dev/layouts/sidebar/
A layout that allows you to have a flexible main content area
and a "fixed" width sidebar that sits on the left or right.
If there is not enough viewport space to fit both the sidebar
width *and* the main content minimum width, they will stack
on top of each other

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between the sidebar and main content.

--sidebar-target-width (20rem): How large the sidebar should be

--sidebar-content-min-width(50%): The minimum size of the main content area

EXCEPTIONS
.sidebar[data-direction='rtl']: flips the sidebar to be on the right
*/

.sidebar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
}

.sidebar:not([data-direction]) > :first-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar:not([data-direction]) > :last-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

/*
A flipped version where the sidebar is on the right
*/
.sidebar[data-direction='rtl'] > :last-child {
  flex-basis: var(--sidebar-target-width, 20rem);
  flex-grow: 1;
}

.sidebar[data-direction='rtl'] > :first-child {
  flex-basis: 0;
  flex-grow: 999;
  min-inline-size: var(--sidebar-content-min-width, 50%);
}

.stack {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.stack > * {
  margin-block: 0;
} 

.stack > * + * {
  margin-block-start: var(--space-s-l, 1.5rem);
}
/*
SWITCHER
More info: https://every-layout.dev/layouts/switcher/
A layout that allows you to lay **2** items next to each other
until there is not enough horizontal space to allow that.

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-size-1)): This defines the space
between each item

--switcher-target-container-width (40rem): How large the container
needs to be to allow items to sit inline with each other

--switcher-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/
.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gutter, var(--space-s-l));
  align-items: var(--switcher-vertical-alignment, flex-start);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((var(--switcher-target-container-width, 40rem) - 100%) * 999);
}

/* Max 2 items,
so we target everything *after* those */
.switcher > :nth-last-child(n + 3),
.switcher > :nth-last-child(n + 3) ~ * {
  flex-basis: 100%;
}

/* © Ryan Mulligan - https://ryanmulligan.dev/blog/layout-breakouts/ */

.wrapper {
  --gap: clamp(1rem, 6vw, 3rem);
  --full: minmax(var(--gap), 1fr);
  --content: min(var(--wrapper-width, 85rem), 100% - var(--gap) * 2);
  --popout: minmax(0, 2rem);
  --feature: minmax(0, 5rem);

  display: grid;
  grid-template-columns:
    [full-start] var(--full)
    [feature-start] var(--feature)
    [popout-start] var(--popout)
    [content-start] var(--content) [content-end]
    var(--popout) [popout-end]
    var(--feature) [feature-end]
    var(--full) [full-end];
}

.wrapper > * {
  grid-column: content;
}

.prose-wrapper {
  --wrapper-width: 64rem;
}

.popout {
  grid-column: popout;
}

.feature {
  grid-column: feature;
}

.full {
  grid-column: full;
}
}

@layer blocks{

.post aside,
.styleguide aside {
  --border-width: 0.2rem;
  --border: var(--border-width) solid #999;
  border: var(--border);
  border-radius: var(--border-radius);
  padding-inline: var(--space-s-m);
  position: relative;
  color: var(--color-text);
  background-color: var(--color-bg);
  padding-inline-start: var(--space-l-xl);
  padding-block: var(--space-s-m);
  margin-block: var(--space-m-l);
}

.post aside:before,
.styleguide aside:before {
  --size: 2.25em;
  border-radius: 100%;
  content: '';
  display: flex;
  font-size: 1.15em;
  block-size: 2.15em;
  inset-inline-start: calc(var(--size) / -2 - var(--border-width) / 2);
  line-height: 1;
  position: absolute;
  inset-block-start: 1em;
  inline-size: var(--size);
  background-color: var(--color-bg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.post aside.note:before,
.styleguide aside.note:before {
  background-image: url('../assets/svg/misc/note.svg');
}

.post aside.warning:before,
.styleguide aside.warning:before {
  background-image: url('../assets/svg/misc/warning.svg');
}

.post aside.tip:before,
.styleguide aside.tip:before {
  background-image: url('../assets/svg/misc/tip.svg');
}

.post aside.skateboard:before,
.styleguide aside.skateboard:before {
  background-image: url('../assets/svg/misc/skateboard.svg');
}

/* based on Andy Bell's article: https://piccalil.li/blog/how-i-build-a-button-component/ */

.button {
  --button-bg: var(--color-text);
  --button-color: color-mix(in oklab, var(--button-bg) 10%, var(--color-bg));
  --button-hover-bg: color-mix(in oklab, var(--button-bg) 90%, var(--color-bg));
  --button-hover-color: color-mix(in oklab, var(--button-bg) 5%, var(--color-bg));
  --button-border-width: var(--border-thickness);
  --button-border-style: solid;
  --button-border-color: color-mix(in oklab, var(--button-bg) 80%, var(--color-text));
  --button-radius: var(--border-radius-small);
  --button-gap: var(--space-2xs);
  --button-padding: var(--space-xs) var(--space-m) var(--space-2xs) var(--space-m);
  --button-font-family: var(--font-body);
  --button-font-weight: var(--font-regular);
  --button-font-size: var(--size-step-0);
  --button-text-transform: none;
  --button-tracking: normal;

  display: inline-flex;
  align-items: center;
  gap: var(--button-gap);
  padding: var(--button-padding);
  background: var(--button-bg);
  color: var(--button-color);
  border-width: var(--button-border-width);
  border-style: var(--button-border-style);
  border-color: var(--button-border-color);
  border-radius: var(--button-radius);
  text-decoration: none;
  font-family: var(--button-font-family);
  font-weight: var(--button-font-weight);
  font-size: var(--button-font-size);
  line-height: var(--leading-flat);
  text-transform: var(--button-text-transform);
  letter-spacing: var(--button-tracking);
  /* trim the space at the cap height - in  Safari Technology Preview */
  text-box-trim: trim-both;
  text-box-edge: cap alphabetic;
}

.button svg {
  block-size: var(--button-icon-size, 1.2cap);
}

/* Hover/focus/active */
.button:hover,
.button[aria-current='page'],
.button[aria-pressed='true'],
.button[data-state='active'] {
  background: var(--button-hover-bg);
  color: var(--button-color);
}

.button:focus {
  outline-color: var(--button-outline-color, var(--button-border-color));
}

.button:active {
  transform: scale(99%);
}

/* Variants */
.button[data-button-variant='primary'] {
  --button-bg: var(--color-primary);
  --button-color: var(--color-light);
  --button-color: color-mix(in oklab, var(--color-primary) 5%, var(--color-light));
}

.button[data-button-variant='secondary'] {
  --button-bg: var(--color-secondary);
  --button-color: var(--color-light);
  --button-color: color-mix(in oklab, var(--color-secondary) 5%, var(--color-light));
}

.button[data-button-variant='accent'] {
  --button-bg: var(--color-accent);
  --button-color: var(--color-dark);
  --button-color: color-mix(in oklab, var(--color-accent) 10%, var(--color-dark));
}

.button[data-ghost-button] {
  --button-bg: var(--color-bg);
  --button-border-color: var(--color-text);
  --button-color: var(--color-text);
  --button-hover-color: var(--color-bg);
}

.button[data-ghost-button]:hover {
  --_ghost-hover-bg: var(--button-bg);
  --_ghost-hover-bg: color-mix(in oklab, var(--button-bg) 95%, var(--color-dark));
  background: var(--_ghost-hover-bg);
}

.button[data-small-button] {
  --button-border-width: 2px;
  --button-radius: var(--border-radius-small);
  --button-font-size: var(--size-step-min-2);
  --button-padding: var(--space-2xs) var(--space-s) var(--space-3xs) var(--space-s);
  --button-text-transform: uppercase;
  --button-tracking: var(--tracking-wide);
}
/* Radius variants */
.button[data-button-radius='hard'] {
  --button-radius: 0;
}

:root {
  --color-code-orange: hsl(30, 70%, 60%);
  --color-code-blue: var(--color-secondary);
  --color-code-indigo: hsl(260, 48%, 56%);
  --color-code-violet: hsl(314, 70%, 60%);
  --color-code-pink: hsl(350, 70%, 60%);
  --color-code-gray: hsl(0, 0%, 58%);
  --color-code-bg: color-mix(in oklab, var(--color-bg) 92%, black);
}

code,
pre {
  font-family: var(--font-mono);
  font-size: var(--size-step-min-1);
  background-color: var(--color-code-bg);

  border-radius: var(--border-radius-medium);
}

code[class*='language-'],
pre[class*='language-'] {
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  -webkit-hyphens: none;
          hyphens: none;
}

/* Specific Styles for <pre> Elements */
pre {
  grid-column: popout !important;
  overflow-x: auto;
  padding: var(--space-s) var(--space-l);
}

/* Style Adjustments for <code> within different contexts */
:where(:not(pre)) > code {
  position: relative;
  top: -0.05em;
  padding: 0.1em 0.4em;
}

pre[class*='language-'] {
  overflow: auto;
  position: relative;
}

[class*='language-'] .namespace {
  opacity: 0.7;
}

.token.atrule {
  color: var(--color-code-pink);
}

.token.attr-name {
  color: var(--color-code-orange);
}

.token.attr-value {
  color: var(--color-text-accent);
}

.token.attribute {
  color: var(--color-code-blue);
}

.token.boolean {
  color: var(--color-code-pink);
}

.token.builtin {
  color: var(--color-code-orange);
}

.token.cdata {
  color: var(--color-code-orange);
}

.token.char {
  color: var(--color-code-orange);
}

.token.class {
  color: var(--color-code-orange);
}

.token.class-name {
  color: var(--color-code-orange);
}

.token.color {
  color: var(--color-code-orange);
}

.token.comment {
  color: var(--color-code-gray);
}

.token.constant {
  color: var(--color-code-pink);
}

.token.deleted {
  color: var(--color-code-pink);
}

.token.doctype {
  color: var(--color-code-orange);
}

.token.entity {
  color: var(--color-code-pink);
}

.token.function {
  color: var(--color-code-pink);
}

.token.hexcode {
  color: var(--color-code-orange);
}

.token.id {
  color: var(--color-code-pink);
  font-weight: var(--font-bold);
}

.token.important {
  color: var(--color-code-pink);
  font-weight: var(--font-bold);
}

.token.inserted {
  color: var(--color-code-orange);
}

.token.keyword {
  color: var(--color-code-pink);
  font-style: italic;
}

.token.number {
  color: var(--color-text-accent);
}

.token.operator {
  color: var(--color-code-gray);
}

.token.prolog {
  color: var(--color-code-orange);
}

.token.property {
  color: var(--color-code-orange);
}

.token.pseudo-class {
  color: var(--color-code-blue);
}

.token.pseudo-element {
  color: var(--color-code-blue);
}

.token.punctuation {
  color: var(--color-code-gray);
}

.token.regex {
  color: var(--color-code-orange);
}

.token.selector {
  color: var(--color-code-pink);
}

.token.string {
  color: var(--color-text-accent);
}

.token.symbol {
  color: var(--color-code-pink);
}

.token.tag {
  color: var(--color-code-pink);
}

.token.unit {
  color: var(--color-code-pink);
}

.token.url {
  color: var(--color-code-violet);
}

.token.variable {
  color: var(--color-code-pink);
}

/* CodePen iframe */
.codepen a {
  --icon-size: 1.2em;

  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.prose .cp_embed_wrapper,
.prose .cp_embed_wrapper + script + *:not(h2) {
  --flow-space: var(--space-l);
}

.cp_embed_wrapper {
  grid-column: popout;
  position: relative;
  overflow: auto;
  display: grid;
  place-items: center;
  grid-template-areas: 'container';
  resize: horizontal;
}

.cp_embed_wrapper iframe {
  grid-area: container;
  width: 100%;
}

dialog {
  border: none;
  border-radius: var(--border-radius);
}

dialog + button {
  all: unset;
  cursor: pointer;
}

dialog::backdrop {
  background-image: var(--gradient-stripes);
  opacity: 0.85;
  filter: brightness(50%);
}

/* Prevent page scroll: https://blog.mayank.co/is-dialog-enough */

html:has(dialog[open]:modal) {
  overflow: hidden;
}

article
  [href^='http']:not([href*='localhost:8080']):not(
    [href*='flamedfury.com']
  ):not(.button) {
  padding-inline-end: 0.8em;
}

article
  [href^='http']:not([href*='localhost:8080']):not(
    [href*='flamedfury.com']
  ):not(.no-indicator)::after {
  position: absolute;
  display: inline-block;
  inline-size: 1em;
  block-size: 1em;
  background-image: url('/assets/images/template/external.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 60% auto;
  /* alternative text rules */
  content: '(external hyperlink)';
  overflow: hidden;
  white-space: nowrap;
  text-indent: 1em; /* the width of the icon */
}

.grid-card {
  display: grid;
  gap: 2ch;
  grid-row: span 3;
  grid-template-rows: subgrid;
}

.grid-card img {
  max-inline-size: var(--max-img-width, 100%);
  block-size: auto;
  aspect-ratio: 12/9;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

.music-thread {
  background-color: var(--color-bg-accent);
  border: 4px solid var(--color-bg-accent);
  color: var(--color-text);
  font-size: var(--size-step-min-1);
  padding: var(--space-s-m);
  border-radius: var(--border-radius);
  max-inline-size: 600px;
  margin-inline: auto;
}

.music-thread h2 {
  font-size: var(--size-step-2);
}

.track-list {
  list-style-type: none;
  padding: 0;
}

.track-item {
  font-size: var(--size-step-min-2);
  display: flex;
  align-items: center;
  margin-bottom: var(--space-s);
}

.track-item img {
  margin-right: var(--space-xs);
}

.track-item a {
  color: var(--color-text);
  text-decoration: none;
}

.track-item a:hover {
  text-decoration: underline;
}
/* now: books */
.now-book-meta {
  --flow-space: var(--space-s);
}

.now-book-author {
  color: var(--color-text-accent);
  font-size: var(--size-step-min-2);
  text-transform: uppercase;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-book-title {
  font-weight: 600;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-book-description {
  font-size: var(--size-step-min-1);
}

.now-reading {
  font-size: var(--size-step-min-1);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

/* now: games */
.now-game-meta {
  --flow-space: var(--space-s);
}

.now-game-publisher {
  color: var(--color-text-accent);
  font-size: var(--size-step-min-2);
  text-transform: uppercase;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-game-title {
  font-weight: 600;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-game-description {
  font-size: var(--size-step-min-1);
}

/* now: artists */
.now-artist-name {
  font-size: var(--size-step-min-2);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-artist-plays {
  color: var(--color-text-accent);
  font-size: var(--size-step-min-2);
}

.now-artist {
  --min: 15rem;
  --aspect-ratio: 1/1;
  --gap: 0;
  aspect-ratio: var(--aspect-ratio);
  width: auto;
}

.now-artist > img {
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

/* now: albums */
.now-album-name {
  font-size: var(--size-step-min-2);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-album-artist-name {
  color: var(--color-text-accent);
  font-size: var(--size-step-min-2);
  text-transform: uppercase;
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

/* now: trakt tv shows */
.now-show-title {
  font-size: var(--size-step-min-2);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-show-episode-title {
  color: var(--color-text-accent);
  font-size: var(--size-step-min-2);
}

/* now: trakt movies */
.now-movie-title {
  font-size: var(--size-step-min-2);
  -moz-column-break-inside: avoid;
       break-inside: avoid;
}

.now-movie-date {
  color: var(--color-text-accent);
  font-size: var(--size-step-min-2);
}
.page h1, .bookmark h1 {
  font-size: var(--size-step-5);
}

/* Based on Andy Bell, https://github.com/Andy-set-studio/personal-site-eleventy */

.prose {
  --flow-space: var(--space-m);
  --wrapper-width: 64rem;
}

.prose :is(pre, pre + *, figure, picture) {
  --flow-space: var(--space-m-l);
}

.prose :is(figure + *, picture + *) {
  --flow-space: var(--space-xl);
}

.prose :is(h2, h3, h4) {
  --flow-space: 1em;
}

.prose :is(h2 + *, h3 + *, h4 + *):not(figure) {
  --flow-space: var(--space-l);
}

.prose .heading-anchor:where(:hover, :focus) {
  text-decoration: none;
}

.prose .heading-anchor {
  text-decoration: none;
}

.prose mark {
  background-color: var(--color-accent);
  color: var(--color-dark);
}

/* block space only for "regular lists" */
.prose :not(.cluster):not(.grid) > li + li {
  padding-block-start: var(--space-s-m);
}

/* inline space only for "regular lists" */
.prose :where(ul:not(.grid), ol:not(.grid)) {
  padding-inline-start: 1.5ch;
}

/* marker only for "regular lists" */
.prose :where(ul:not(.grid):not([role='list'])) li::marker {
  color: var(--color-accent);
  content: '– ';
}

.prose ol li::marker {
  color: var(--color-accent);
}

.prose img {
  border-radius: var(--border-radius-medium);
}

.prose a:hover {
  color: var(--color-primary);
}

@media (max-width: 640px) {
  .prose > *,
  .prose a {
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word;
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -webkit-hyphens: auto;
            hyphens: auto;
  }
}

.section > .seperator:first-child {
  transform: rotate(180deg) translateY(-1px);
}

.section__inner {
  background-color: var(--spot-color, var(--color-bg-accent));
  color: var(--color-text);
}

.section blockquote {
  font-weight: var(--font-bold);
  line-height: 1;
  font-size: var(--size-step-4);
  letter-spacing: var(--tracking-s);
}

.section :is(h1, h2, h3, blockquote) {
  opacity: 95%;
}
.seperator {
  display: block;
  block-size: 3.5em;
  inline-size: 100%;
  fill: var(--spot-color, var(--color-bg));
}

.site-foot {
  margin-block-start: var(--space-l-xl);
  padding: var(--space-s-m);
  color: var(--color-text);
}

.site-foot__inner {
  display: flex;
  gap: var(--space-xs);
  justify-content: center;
  align-items: center;
}

/* increase tab size */
.site-foot__inner a {
  padding: var(--space-xs);
}

:not(nav#social).site-foot__inner {
  flex-wrap: wrap;
}

.site-foot svg {
  inline-size: 1.1em;
  block-size: 1em;
}

.site-footer {
  --cluster-horizontal-alignment: center;
}

/* increase tab size */
.site-footer a {
  padding: var(--space-xs);
}

.site-footer svg {
  inline-size: 1.1em;
  block-size: 1em;
}

.logo {
  --gutter: var(--space-xs);
  padding: var(--space-s) 0;
  font-size: var(--size-step-0);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  text-decoration: none;
}

.logo:hover,
.logo:focus {
  color: transparent;
  background: var(--gradient-flames);
  background-size: 50%;
  background-clip: text;
  -webkit-background-clip: text;
}

.logo svg {
  --fillColorTop: var(--color-text);
  --fillColorBot: var(--color-text-accent);
}

.logo:hover svg,
.logo:focus svg {
  --fillColorTop: var(--color-primary);
  --fillColorBot: var(--color-secondary);
}
/* Basic link styling */
.site-nav ul {
  list-style: none;
  margin: 0;
  gap: var(--space-xs);
  line-height: 0.5em;
  padding-block-end: var(--space-s);
}

.site-nav a {
  --text-color: var(--color-text);
  --background-color: var(--color-bg);
  --border-color: var(--color-bg-accent-2);
  background-color: var(--background-color);
  color: var(--text-color);
  padding: var(--space-s);
  text-decoration: none;
  display: block;
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--border-color);
  font-weight: var(--font-bold);
}

/* Change the border-color on :hover and :focus */
.site-nav a:where(:hover, :focus) {
  --background-color: var(--color-text);
  --text-color: var(--color-bg);
  --border-color: var(--color-bg);
}

/* Change border-color and color for the active page. data-state='active' if a child is active. */
.site-nav [aria-current='page'],
.site-nav [data-state='active'] {
  --background-color: var(--color-text);
  --text-color: var(--color-bg);
  --border-color: var(--color-bg);
}

@media (min-width: 1000px) {
  /* Basic link styling */
  .site-nav ul {
    padding-block-end: 0;
  }

  .site-nav a {
    --text-color: var(--color-text);
    --background-color: transparent;
    --border-color: transparent;
    --text-decoration: transparent;
    background-color: var(--background-color);
    color: var(--text-color);
    padding: var(--space-xs) 0.2em;
    text-decoration-line: underline;
    text-decoration-color: var(--text-decoration, transparent);
    text-decoration-thickness: 3px;
    text-underline-offset: 0.2em;
  }

  /* Change the border-color on :hover and :focus */
  .site-nav a:where(:hover, :focus) {
    --text-decoration: var(--color-primary);
    --text-color: var(--color-text);
    --background-color: transparent;
  }

  /* Change border-color and color for the active page */
  .site-nav [aria-current='page'],
  .site-nav [data-state='active'] {
    --text-decoration: var(--color-primary);
    --text-color: var(--color-primary);
    --background-color: transparent;
  }
}
.site-title
{
  color: var(--color-light);
  font-family: var(--font-display);
  font-size: var(--size-step-6);
  text-shadow: var(--color-dark-glare);
  text-transform: uppercase;
  /* transform: rotate(-7deg); */
  word-break: break-word;
}

.skip-link {
  clip: rect(1px, 1px, 1px, 1px);
  display: block;
  block-size: 1px;
  overflow: hidden;
  position: absolute;
  inline-size: 1px;
  top: 1rem;
  left: 1rem;
  z-index: 999;
}

.skip-link:focus {
  clip: auto;
  block-size: auto;
  overflow: visible;
  inline-size: auto;
  background-color: var(--color-text);
  color: var(--color-bg);
  padding: var(--space-xs) var(--space-s-m);
  border-radius: var(--border-radius-medium);
  line-height: 1;
}

.skip-link:not(:focus) {
  border: 0;
  clip: rect(0 0 0 0);
  block-size: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  inline-size: 1px;
  white-space: nowrap;
}
table {
  border: 0;
  inline-size: 100%;
}
table br {
  display: none;
}

thead {
  border: none;
  clip: rect(0 0 0 0);
  block-size: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  inline-size: 1px;
}

tr {
  border: 1px solid var(--color-text);
  display: block;
  margin-block-end: var(--space-s);
}

th,
td {
  padding: var(--space-xs) var(--space-s);
  vertical-align: sub;
}

td {
  border-block-end: 1px solid var(--color-text);
  display: block;
  text-align: start;
}
td::before {
  content: attr(data-label);
  float: start;
  font-weight: var(--font-bold);
}
td:last-child {
  border-block-end: 0;
}

@media (min-width: 640px) {
  table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
    table-layout: fixed;
  }
  table br {
    display: block;
  }
  thead {
    position: static;
    text-align: start;
    display: table-header-group;
  }
  caption {
    margin: var(--space-xs) 0 var(--space-s);
  }
  tr {
    border: 0;
    padding: var(--space-xs);
    margin: 0;
    display: table-row;
  }

  tr:not(:last-child) {
    border-block-end: 1px solid var(--color-bg-accent);
  }

  td {
    border: none;
  }
  td::before {
    display: none;
  }
  th,
  td {
    padding: var(--space-s);
    text-align: start;
    display: table-cell;
  }
}

.gradient-text {
  color: transparent;
  background-image: var(--gradient-flames);
  padding: 0.6rem 0;
  background-size: 50%;
  -webkit-background-clip: text;
          background-clip: text;
}

.gradient-text-linear {
  color: transparent;
  background-image: var(--gradient-flames);
  background-size: 100%;
  background-repeat: repeat;
  -webkit-background-clip: text;
          background-clip: text;
}

.theme-switch .button {
  all: unset;
  cursor: pointer;
  font-size: var(--size-step-1);
  border-radius: 50%;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
}

.theme-switch .button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 0.3ch;
}
.youtube-embed {
  aspect-ratio: 16 / 9;
}
}
/* debugging */
/* @import-glob 'tests/*.css' layer(test); */

@layer tailwindUtilities{
.visible{
visibility: visible;
}
.collapse{
visibility: collapse;
}
.static{
position: static;
}
.fixed{
position: fixed;
}
.absolute{
position: absolute;
}
.relative{
position: relative;
}
.sticky{
position: sticky;
}
.m-auto{
margin: auto;
}
.mx-auto{
margin-left: auto;
margin-right: auto;
}
.my-s-m{
margin-top: clamp(0.625rem, 0.41rem + 1.06vw, 1.3125rem);
margin-bottom: clamp(0.625rem, 0.41rem + 1.06vw, 1.3125rem);
}
.mb-l-xl{
margin-bottom: clamp(1.1875rem, 0.48rem + 3.56vw, 3.5rem);
}
.mb-s-m{
margin-bottom: clamp(0.625rem, 0.41rem + 1.06vw, 1.3125rem);
}
.mb-xl{
margin-bottom: clamp(2.375rem, 2.03rem + 1.73vw, 3.5rem);
}
.ml-auto{
margin-left: auto;
}
.mt-l-xl{
margin-top: clamp(1.1875rem, 0.48rem + 3.56vw, 3.5rem);
}
.mt-s-m{
margin-top: clamp(0.625rem, 0.41rem + 1.06vw, 1.3125rem);
}
.mt-xl{
margin-top: clamp(2.375rem, 2.03rem + 1.73vw, 3.5rem);
}
.block{
display: block;
}
.inline{
display: inline;
}
.flex{
display: flex;
}
.inline-flex{
display: inline-flex;
}
.table{
display: table;
}
.grid{
display: grid;
}
.contents{
display: contents;
}
.list-item{
display: list-item;
}
.hidden{
display: none;
}
.h-\[100px\]{
height: 100px;
}
.transform{
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.resize{
resize: both;
}
.grid-flow-row{
grid-auto-flow: row;
}
.grid-flow-col{
grid-auto-flow: column;
}
.flex-row{
flex-direction: row;
}
.flex-col{
flex-direction: column;
}
.flex-wrap{
flex-wrap: wrap;
}
.place-content-center{
place-content: center;
}
.content-center{
align-content: center;
}
.items-start{
align-items: flex-start;
}
.items-end{
align-items: flex-end;
}
.items-center{
align-items: center;
}
.items-baseline{
align-items: baseline;
}
.justify-end{
justify-content: flex-end;
}
.justify-center{
justify-content: center;
}
.justify-between{
justify-content: space-between;
}
.justify-around{
justify-content: space-around;
}
.justify-evenly{
justify-content: space-evenly;
}
.self-center{
align-self: center;
}
.overflow-hidden{
overflow: hidden;
}
.overflow-visible{
overflow: visible;
}
.overflow-y-auto{
overflow-y: auto;
}
.overflow-x-hidden{
overflow-x: hidden;
}
.overflow-y-scroll{
overflow-y: scroll;
}
.scroll-auto{
scroll-behavior: auto;
}
.scroll-smooth{
scroll-behavior: smooth;
}
.truncate{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.whitespace-nowrap{
white-space: nowrap;
}
.text-wrap{
text-wrap: wrap;
}
.break-words{
overflow-wrap: break-word;
}
.bg-gray-100{
background-color: #f8f8f8;
}
.bg-gray-900{
background-color: #161616;
}
.pb-xl{
padding-bottom: clamp(2.375rem, 2.03rem + 1.73vw, 3.5rem);
}
.text-left{
text-align: left;
}
.text-center{
text-align: center;
}
.text-right{
text-align: right;
}
.align-middle{
vertical-align: middle;
}
.font-mono{
font-family: ui-monospace, Cascadia Code, Source Code Pro, Menlo, Consolas, DejaVu Sans Mono, monospace;
}
.text-step-2{
font-size: clamp(1.6875rem, 1.36rem + 1.63vw, 2.75rem);
}
.text-step-4{
font-size: clamp(2.5rem, 1.96rem + 2.69vw, 4.25rem);
}
.text-step-5{
font-size: clamp(2.9375rem, 2.19rem + 3.75vw, 5.375rem);
}
.text-step-min-1{
font-size: clamp(1rem, 0.88rem + 0.58vw, 1.375rem);
}
.font-bold{
font-weight: 700;
}
.capitalize{
text-transform: capitalize;
}
.italic{
font-style: italic;
}
.text-gray-500{
color: #636363;
}
.underline{
text-decoration-line: underline;
}
.antialiased{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mix-blend-color-burn{
mix-blend-mode: color-burn;
}
.outline-none{
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline{
outline-style: solid;
}
.filter{
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.backdrop-filter{
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
.region-space-m{
--region-space: clamp(0.875rem, 0.74rem + 0.67vw, 1.3125rem);
}
.gutter-s{
--gutter: clamp(0.625rem, 0.55rem + 0.38vw, 0.875rem);
}
.grayscale {
  filter: grayscale(100%);
}
.heading-line {
  display: flex;
  align-items: flex-start;
  text-align: left;

  &:after {
    content: '';
    flex-grow: 1;
    block-size: 1px;
    background: var(--color-bg-accent-2);
    margin-block-start: auto;
    transform: translateY(-0.25em);
  }

  &:after {
    margin-left: var(--space-s);
  }
}
/* set on parent div to get the right z-index context */
.ontop {
  z-index: 1;
  position: relative;
}
 /**
 * REGION
 * Add consistent vertical padding to create regions of content
 * Can either be configured by setting --region-space or use a default from the space scale
 */
 .region {
  --region-space-fallback: var(--region-space, var(--space-l-xl));
  padding-block-start: var(--region-space-top, var(--region-space-fallback));
  padding-block-end: var(--region-space-bottom, var(--region-space-fallback));
}
.spin {
  animation: spin 30s linear infinite;
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(1turn);
    }
  }
}
/*
VISUALLY HIDDEN UTILITY
Info: https://piccalil.li/quick-tip/visually-hidden/
*/
.visually-hidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 0;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
}

@media (min-width: 640px){

.sm\:hidden{
display: none;
}
}

@media (min-width: 1000px){

.md\:flex-row{
flex-direction: row;
}

.md\:items-center{
align-items: center;
}

.md\:justify-between{
justify-content: space-between;
}
}