@font-face {
  font-family: "bould";
  font-style: normal;
  font-weight: 200;
  src: url("../../../fonts/bould-extralight-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: normal;
  font-weight: 300;
  src: url("../../../fonts/bould-light-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: normal;
  font-weight: 400;
  src: url("../../../fonts/bould-regular-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: normal;
  font-weight: 500;
  src: url("../../../fonts/bould-medium-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: normal;
  font-weight: 600;
  src: url("../../../fonts/bould-semibold-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: normal;
  font-weight: 700;
  src: url("../../../fonts/bould-bold-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: italic;
  font-weight: 400;
  src: url("../../../fonts/bould-regularitalic-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: italic;
  font-weight: 500;
  src: url("../../../fonts/bould-mediumitalic-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "bould";
  font-style: italic;
  font-weight: 600;
  src: url("../../../fonts/bould-semibolditalic-webfont.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: Overpass;
  font-style: normal;
  font-weight: 300;
  src:
    local("Overpass Light"),
    local("Overpass-Light"),
    url("../../../fonts/overpass-latin-300.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: Overpass;
  font-style: normal;
  font-weight: 600;
  src:
    local("Overpass Bold"),
    local("Overpass-Bold"),
    url("../../../fonts/overpass-latin-600.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Fira Mono";
  font-style: normal;
  font-weight: 400;
  src:
    local("Fira Mono Regular"),
    local("Fira Mono-Regular"),
    url("../../../fonts/fira-mono-latin-400.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: Circular;
  font-style: normal;
  font-weight: 300;
  src: url("../../../fonts/circular-latin-300.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: Circular;
  font-style: normal;
  font-weight: 600;
  src: url("../../../fonts/circular-latin-400.woff2") format("woff2");
  font-display: swap;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:where(h1, h2, h3, h4, h5, h6, [id]) {
    scroll-margin-top: var(--vats-header-height);
}

@media (max-width: 849px) {
    :where(h1, h2, h3, h4, h5, h6, [id]) {
        scroll-margin-top: var(--vats-buttonbar-height);
    }
}

:root {
    color-scheme: light;
}

[data-theme='dark'] {
    color-scheme: dark;
}

html {
    font-size: 62%;
}

html,
body {
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    scrollbar-width: auto;
}

body {
    font-size: var(--vats-text-m);
    font-family: var(--vats-font);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
    color: var(--vats-text);
    background: var(--vats-background);

    accent-color: var(--vats-coloredtext);
    caret-color: var(--vats-coloredtext);

    > div {
        display: contents;
    }
}

a, a:visited, a:hover {
    color: var(--vats-text);
}

a:hover {
    color: var(--vats-coloredtext);
    text-decoration: underline;
    text-decoration-thickness: 0.15rem;
}

button:focus-visible {
    outline: none;
    box-shadow: var(--vats-focus-shadow);
}

a:focus-visible {
    outline: none;
    text-shadow: var(--vats-focus-text-shadow);
}

hr {
    height: 1px;
    background-color: var(--vats-topbar-bordercolor);
    border-style: none;
}

button {
    font-size: var(--vats-text-m);
    font-family: var(--vats-font);
    -webkit-font-smoothing: antialiased;
    line-height: 1.5;
}

input:not([type=checkbox]),
select {
    box-sizing: border-box;
    height: var(--vats-input-height);
    border-radius: var(--vats-input-borderradius);
    border: 1px solid var(--vats-input-bordercolor);
    font: 600 var(--vats-text-m) var(--vats-font);
    color: var(--vats-input-text);
    background-color: var(--vats-input-background);
    padding: 0.5rem 1rem;
}

h1 {
    font-size: var(--vats-text-xxl);
    font-weight: 500;
    border-bottom: 0.4rem solid var(--vats-coloredtext);
    margin-bottom: 2rem;
    line-height: 1.35;
}

h2 {
    text-transform: uppercase;
    font-size: var(--vats-text-xl);
    color: var(--vats-coloredtext);
    font-weight: 500;
    margin: 3.5rem 0 0.1rem 0;
}

h3 {
    font-size: var(--vats-text-xl);
    color: var(--vats-text);
    margin: 2.5rem 0 0.1rem 0;
    font-weight: 500;
    margin-left: 1rem;
}

h4 {
    text-transform: uppercase;
    font-size: var(--vats-text-m);
    color: var(--vats-text);
    margin: 2rem 0 0.1rem 0;
    font-weight: 600;
    margin-left: 1rem;
}

:root {
    --vats-text: rgb(23, 23, 23);
    --vats-text2: rgb(82, 82, 82);
    --vats-text3: rgb(173, 173, 173);
    --vats-text4: #ccc;
    --vats-coloredtext: #ec2526;
    --vats-text-inverse: white;

    --vats-background: white;
    --vats-background-alternative: 0deg 0% 99.2%;
    --vats-bookicon-background: white;

    --vats-sidebar-background: rgb(247, 250, 253);
    --vats-topbar-background: white;
    --vats-topbar-bordercolor: rgb(199, 199, 199);

    --vats-thx-th: #181144;
    --vats-thx-x: #ec2526;
    --vats-thx-dot: #000;

    --vats-input-placeholdertext: var(--vats-text3);

    /*--vats-blue: rgb(66, 180, 255);*/
    --vats-blue: rgb(32, 169, 224);
    --vats-focus-color: var(--vats-blue);
    --vats-focus-shadow: 0 0 8px 4px hsl(from var(--vats-focus-color) h s l / 40%);
    --vats-focus-text-shadow: 0 0 4px hsl(from var(--vats-focus-color) h s l / 60%), 0 0 8px hsl(from var(--vats-focus-color) h s l / 80%);
    --vats-focus-icon-filter: drop-shadow(0 0 2px hsl(from var(--vats-focus-color) h s l / 100%)) drop-shadow(0 0 4px hsl(from var(--vats-focus-color) h s l / 80%));

    --vats-chart-series1: #d90429;
    --vats-chart-series2: #0077b6;
    --vats-chart-series3: #2b9348;
    --vats-chart-series4: #ffb703;
    --vats-chart-series5: #8e24aa;
    --vats-chart-series6: #f57c00;
}

[data-theme="dark"] {
    --vats-text: #d8dbdf;
    --vats-text2: #e6c594;
    /* #e6c594; */
    /* #8aa9f9 */
    /* #b8bbbf; */
    --vats-text3: #989b9f;
    --vats-text4: #677677;
    --vats-coloredtext: #db3737;
    --vats-text-inverse: var(--vats-background);

    --vats-background: #061626;
    --vats-background-alternative: 0deg 0% 5.9%;
    --vats-bookicon-background: var(--vats-text);

    --vats-sidebar-background: #05121f;
    --vats-topbar-background: var(--vats-background);
    --vats-topbar-bordercolor: #444;

    --vats-thx-th: var(--vats-text);
    --vats-thx-x: #db3737;
    --vats-thx-dot: var(--vats-thx-th);

    --vats-input-placeholdertext: var(--vats-text4);

    --vats-chart-series1: #e63946;
    --vats-chart-series2: #8be9fd;
    --vats-chart-series3: #50fa7b;
    --vats-chart-series4: #ffb86c;
    --vats-chart-series5: #bd93f9;
    --vats-chart-series6: #ff79c6;
}

:root[data-theme="dark"] {
    --vats-chart-axis-label: var(--vats-text3);
}

:root {
    --vats-bottombar-background: var(--vats-sidebar-background);
    --vats-menu-background: var(--vats-sidebar-background);

    --vats-input-text: var(--vats-text);
    --vats-input-background: var(--vats-sidebar-background);
    --vats-input-bordercolor: var(--vats-topbar-bordercolor);

    --vats-chart-text: var(--vats-text);
    --vats-chart-axis-label: var(--vats-chart-text);
    --vats-chart-axis: var(--vats-text);
    --vats-chart-grid: hsl(from var(--vats-chart-text) h s l / 8%);
    --vats-chart-markedarea: hsl(from var(--vats-chart-text) h s l / 4%);
    --vats-chart-markedline: hsl(from var(--vats-coloredtext) h s l / 40%);
    --vats-chart-series-primary: var(--vats-coloredtext);
    --vats-chart-series-secondary: var(--vats-text);

    --vats-tour-background: #061626;
    --vats-tour-border: var(--vats-coloredtext);
    --vats-tour-text: #d8dbdf;
    --vats-tour-text2: #fff;
    --vats-tour-glow: var(--vats-blue);

    --vats-font-supabase: Circular;
    --vats-font-svelte: Overpass;
    --vats-font-blog: "EB Garamond", Georgia, "Times New Roman", serif;
    --vats-font: "bould", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    --vats-font-mono: "Fira Mono", monospace;

    --vats-text-xxl: 3.1rem;
    --vats-text-xl: 2.4rem;
    --vats-text-l: 2rem;
    --vats-text-m: 1.6rem;
    --vats-text-ms: 1.45rem;
    --vats-text-s: 1.3rem;
    --vats-text-xs: 1.1rem;
    --vats-text-xxs: 0.8rem;

    --vats-header-height: 50px;
    --vats-buttonbar-height: 3.25rem;

    --vats-page-maxwidth: 84rem;
    --vats-exercise-maxwidth: 52rem;
    --vats-page-padding-top: 3rem;
    --vats-page-padding-left: 3rem;
    --vats-page-padding-right: 3rem;

    --vats-dialogborder-size: 2px;

    --vats-input-height: 3.5rem;
    --vats-input-borderradius: 1rem;

    --vats-bookicon-size: 5rem;
    --vats-book-leftparaindent: 2rem;

    --vats-bubble-background: var(--vats-blue);
    --vats-bubble-text: rgb(23, 23, 23);
}