@layer modules {
:root {
  /* font-family */
  --font-family-primary: "Open Sans", sans-serif;
  --font-family-fontawesome: "Font Awesome 6 Pro", "Font Awesome 6 Sharp";
  /* font-size */
  --font-size-multiplier: 1;
  --font-size-xs: calc(clamp(1.4rem, 0.852rem + 0.463vi, 1.6rem) * var(--font-size-multiplier));
  --font-size-sm: calc(clamp(1.5rem, 1.152rem + 0.463vi, 2.1rem) * var(--font-size-multiplier));
  --font-size-md: calc(clamp(2rem, 1.422rem + 0.556vi, 2.1rem) * var(--font-size-multiplier));
  --font-size-md-alt: calc(clamp(2rem, 1.422rem + 0.556vi, 3rem) * var(--font-size-multiplier));
  --font-size-lg: calc(clamp(2.7rem, 2.422rem + 0.556vi, 4rem) * var(--font-size-multiplier));
  --font-size-xl: calc(clamp(3rem, 1.585rem + 1.296vi, 5.3rem) * var(--font-size-multiplier));
  --font-size-xxl: calc(clamp(2.2rem, 1.607rem + 1.852vi, 6rem) * var(--font-size-multiplier));
  /* gutter */
  --gutter: 4rem;
  --gutter-var: clamp(0rem, -0.948rem + 2.963vi, 3.2rem);
  --gutter-fluid: calc((var(--gutter) + var(--gutter-var)) / 2);
  --gutter-min: 0;
  --gutter-max: 3.2;
  --gutter-viewport-min: 32;
  --gutter-viewport-max: 140;
  /* border */
  --border-line: 0.1rem solid;
  --border-line-thick: 0.3rem solid;
  --border-dots: 0.2rem dotted;
  --border-radius: 2.7rem;
  /* transition */
  --transition-duration: 275ms;
  --transition-easing: cubic-bezier(0.15, 0.15, 0.3, 0.9);
  --transition: var(--transition-duration) var(--transition-easing);
  /* document */
  --content-min: 29rem;
  --content-max-c: 84rem;
  --content-max: 130rem;
  --content-max-alt: 192rem;
  --content-width: clamp(var(--content-min), 5rem + 75vi, var(--content-max));
  --content-width-condensed: clamp(
  	var(--content-min),
  	12.704rem + 50.926vi,
  	var(--content-max-c)
  );
  --content-width-alt: clamp(var(--content-min), 5rem + 75vi, var(--content-max-alt));
  --content-padding: max(2rem, (100vw - var(--content-width)) / 2);
  --block-padding: calc((var(--gutter) + var(--gutter-var)) * 0.75);
  --logo-size: clamp(7rem, 2.133rem + 3.333vi, 13rem);
  --header-height: calc(var(--logo-size) * 3 / 2 + var(--gutter) / 3 + 0.1rem);
  --content-height: calc(100vb - var(--header-height, 0rem));
  --button-link-color: var(--color-white);
  --button-bg-color: var(--color-accent);
  /* Blur */
  --bg-transparency: 12.5%;
  --blur-strength: 1rem;
  /*  Decor  */
  --decor-height: 20vw;
}
:root:not([data-loaded=true]) {
  --transition: none;
}
:root,
:root ::selection {
  --color-black: #000000;
  --color-dark: #141414;
  --color-light: #e4e4e4;
  --color-white: #ffffff;
  --color-primary: var(--data-color-black);
  --color-primary-extra: var(--color-primary);
  --color-secondary: var(--color-primary);
  --color-secondary-extra: var(--color-secondary);
  --color-text: var(--color-dark);
  --color-bg: var(--color-white);
  --color-accent: var(--color-primary);
  --color-selection: var(--color-accent);
}

::selection {
  background-color: color-mix(in hsl, var(--data-selection, var(--data-color-primary)), transparent 80%);
}

@media (min-width: 960px) {
  :root {
    --decor-height: 10vw;
  }
}
}