@layer base {
  :root {
    --default-font-header:
      inter, roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", arial,
      sans-serif;
    --default-font-body:
      inter, roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", arial,
      sans-serif;
    --default-color-bg: oklch(99% 0.005 196.98deg);
    --default-color-primary: oklch(66.94% 0.1138 197.01deg);
    --default-color-secondary: oklch(60.3% 0.2347 26.99deg);

    /*
   * better when enlarged slightly on this website.
   * */
    --default-font-size: clamp(1.2rem, calc(15px + 0.390625vw), 1.5rem);
    --default-color-red: oklch(63.7% 0.237 25.331deg);
    --color-red-0: oklch(from var(--default-color-red) var(--shade-0));
    --color-red-1: oklch(from var(--default-color-red) var(--shade-1));
    --color-red-2: oklch(from var(--default-color-red) var(--shade-2));
    --color-red-3: oklch(from var(--default-color-red) var(--shade-3));
    --color-red-4: oklch(from var(--default-color-red) var(--shade-4));
    --color-red-5: oklch(from var(--default-color-red) var(--shade-5));
    --color-red-6: oklch(from var(--default-color-red) var(--shade-6));
    --color-red-7: oklch(from var(--default-color-red) var(--shade-7));
    --color-red-8: oklch(from var(--default-color-red) var(--shade-8));
    --color-red-9: oklch(from var(--default-color-red) var(--shade-9));
    --default-color-green: oklch(72.3% 0.219 149.579deg);
    --color-green-0: oklch(from var(--default-color-green) var(--shade-0));
    --color-green-1: oklch(from var(--default-color-green) var(--shade-1));
    --color-green-2: oklch(from var(--default-color-green) var(--shade-2));
    --color-green-3: oklch(from var(--default-color-green) var(--shade-3));
    --color-green-4: oklch(from var(--default-color-green) var(--shade-4));
    --color-green-5: oklch(from var(--default-color-green) var(--shade-5));
    --color-green-6: oklch(from var(--default-color-green) var(--shade-6));
    --color-green-7: oklch(from var(--default-color-green) var(--shade-7));
    --color-green-8: oklch(from var(--default-color-green) var(--shade-8));
    --color-green-9: oklch(from var(--default-color-green) var(--shade-9));
    --default-color-yellow: oklch(91.2% 0.1776 104.66deg);
    --color-yellow-0: oklch(from var(--default-color-yellow) var(--shade-0));
    --color-yellow-1: oklch(from var(--default-color-yellow) var(--shade-1));
    --color-yellow-2: oklch(from var(--default-color-yellow) var(--shade-2));
    --color-yellow-3: oklch(from var(--default-color-yellow) var(--shade-3));
    --color-yellow-4: oklch(from var(--default-color-yellow) var(--shade-4));
    --color-yellow-5: oklch(from var(--default-color-yellow) var(--shade-5));
    --color-yellow-6: oklch(from var(--default-color-yellow) var(--shade-6));
    --color-yellow-7: oklch(from var(--default-color-yellow) var(--shade-7));
    --color-yellow-8: oklch(from var(--default-color-yellow) var(--shade-8));
    --color-yellow-9: oklch(from var(--default-color-yellow) var(--shade-9));
  }

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

  body:has(.video-recorder) {
    background-color: var(--color-black);
  }

  /* This is specific for phoenix because it adds an extra div 
  * for all content in the app.html.eex and root.html.eex
  * */
  div[data-phx-main] {
    display: contents;
  }
}