:root {
        --nc-font-text: 'Outfit', serif;
        --nc-font-header: 'Helvetica Now Var', sans-serif;
         --nc-font-mono: 'Recursive', monospace;
         --nc-font-italics:'Recursive', monospace;
        --nc-tx-1: #1c1c1c;
        --nc-bg-1: #F5E8D8;
        --nc-link-1:#A514E3 ;
        --nc-accent-1: #A514E3;
        --text-ital: 0;
        --button-scale: 2;
        --size-300: 0.75rem;
        --size-400: 1rem;
        --size-500: 1.33rem;
        --size-600: 1.77rem;
        --size-700: 2.36rem;
        --size-800: 3.15rem;
        --size-900: 4.2rem;
        --nc-wgt-100: 100;
        --nc-wgt-200: 200;
        --nc-wgt-300: 300;
        --nc-wgt-400: 400;
        --nc-wgt-425: 425;
        --nc-wgt-450: 450;
        --nc-wgt-500: 500;
        --nc-wgt-550: 550;
        --nc-wgt-600: 600;
        --nc-wgt-700: 700;
        --nc-wgt-800: 800;
        --nc-wgt-900: 900;
        --nc-wgt-950: 950;
        --step--2: clamp(0.78rem, calc(0.65rem + 0.66vw), 1.12rem);
        --step--1: clamp(0.94rem, calc(0.76rem + 0.90vw), 1.40rem);
        --step-0: clamp(1.13rem, calc(0.88rem + 1.22vw), 1.75rem);
        --step-1: clamp(1.35rem, calc(1.02rem + 1.63vw), 2.19rem);
        --step-2: clamp(1.62rem, calc(1.19rem + 2.17vw), 2.73rem);
        --step-3: clamp(1.94rem, calc(1.37rem + 2.88vw), 3.42rem);
        --step-4: clamp(2.33rem, calc(1.58rem + 3.79vw), 4.27rem);
        --step-5: clamp(2.80rem, calc(1.81rem + 4.96vw), 5.34rem);

    }

    [data-dark="true"] {
        --nc-font-text: 'Outfit', serif;
        --nc-font-header: 'Helvetica Now Var', sans-serif;
         --nc-font-mono: 'Recursive', monospace;
         --nc-font-italics:'Recursive', monospace;
       --nc-tx-1: #F5E8D8;
       --nc-bg-1: #1c1c1c;
       --nc-link-1:#BC60E3;
       --nc-accent-1: #BC60E3;
       --text-ital: 0;
       --button-scale: 2;
       --size-300: 0.75rem;
       --size-400: 1rem;
       --size-500: 1.33rem;
       --size-600: 1.77rem;
       --size-700: 2.36rem;
       --size-800: 3.15rem;
       --size-900: 4.2rem;
       --nc-wgt-100: .85;
       --nc-wgt-200: 170;
       --nc-wgt-300: 255;
       --nc-wgt-400: 340;
       --nc-wgt-425: 361;
       --nc-wgt-450: 382;
       --nc-wgt-500: 425;
       --nc-wgt-550: 468;
       --nc-wgt-600: 510;
       --nc-wgt-700: 595;
       --nc-wgt-800: 680;
       --nc-wgt-900: 765;
       --nc-wgt-950: 808;
       --step--2: clamp(0.78rem, calc(0.65rem + 0.66vw), 1.12rem);
       --step--1: clamp(0.94rem, calc(0.76rem + 0.90vw), 1.40rem);
       --step-0: clamp(1.13rem, calc(0.88rem + 1.22vw), 1.75rem);
       --step-1: clamp(1.35rem, calc(1.02rem + 1.63vw), 2.19rem);
       --step-2: clamp(1.62rem, calc(1.19rem + 2.17vw), 2.73rem);
       --step-3: clamp(1.94rem, calc(1.37rem + 2.88vw), 3.42rem);
       --step-4: clamp(2.33rem, calc(1.58rem + 3.79vw), 4.27rem);
       --step-5: clamp(2.80rem, calc(1.81rem + 4.96vw), 5.34rem);
    }

    @font-face {
        font-family: "Recursive";
        src: url("Recursive_VF_1.085_latin.woff2"), url("Recursive_VF_1.085_latin.woff2") format("woff2-variations");
        font-weight: 300 1000;
        unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
            U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2007-200B, U+2010, U+2012-2015,
            U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033,
            U+2039-203A, U+203E, U+2044, U+2052, U+2074, U+20AC, U+2122, U+2191,
            U+2193, U+2212, U+2215;
            font-display: swap;
    }
    @font-face {
        font-family: "Helvetica Now Var";
        src: url("HelveticaNowVar.woff2"), url("HelveticaNowVar.woff2") format("woff2-variations");
        font-weight: 50 1000;
        font-stretch: 50% 100%;
        unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-017E, U+018F, U+0192,
            U+01F4-01F5, U+01FA-01FF, U+0218-021B, U+0237, U+0259, U+02B0, U+02B3,
            U+02C6-02C7, U+02C9, U+02D8-02DD, U+02E2, U+0300-0304, U+0306-0308,
            U+030A-030C, U+0312-0313, U+0323-0328, U+032E, U+0331, U+0335, U+0394,
            U+03A9, U+03BC, U+03C0, U+1D48, U+1D57, U+1E80-1E85, U+1E9E,
            U+1EF2-1EF3, U+2009, U+2011, U+2013-2014, U+2018-201A, U+201C-201E,
            U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+203D, U+2044,
            U+2070, U+2074-208E, U+2099, U+20AC, U+20B8-20BA, U+20BC, U+20BF,
            U+2105, U+2113, U+2116-2117, U+2122, U+2126, U+212E, U+2153-215E,
            U+2190-2199, U+2202, U+2206, U+220F, U+2211-2212, U+2215, U+2219-221A,
            U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+2460-2468, U+24EA,
            U+24FF, U+25A0-25A1, U+25CA-25CB, U+25CF, U+2776-277E, U+2E18,
            U+FB01-FB02, U+FEFF;
    }

    @font-face {
        font-family: "Outfit";
        src: url("Outfit-Variable.woff2") , url("Outfit-Variable.woff2") format("woff2-variations");
        font-weight: 100 900;
        unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153,
            U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0304, U+0308, U+030A, U+0327,
            U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A,
            U+2044, U+2074, U+20AC, U+2212, U+2215, U+2713, U+FB01-FB02;
    }

.flow {
        --flow-space: 1em;
    }

    .flow> *+* {
        margin-top: var(--flow-space, 1em);
    }

body {
    background: var(--nc-bg-1);
    color: var(--nc-tx-1);
    font-family: var(--nc-font-text);
    font-weight: var(--nc-wgt-400);
    font-size: var(--step-0);
    font-variation-settings: "opsz" 39, "SOFT" 0, "WONK" 0;

    line-height: 1.8;
}
h1 {
    font-family: var(--nc-font-header);
  color: var(--nc-accent-1);
  font-weight: var(--nc-wgt-800);
  text-wrap: balance;

}

h2,
h3,
h4,
h5,
h6 {
  font-family: var(--nc-font-header);
  font-weight: var(--nc-wgt-700);
    color: var(--nc-tx-1);
    word-spacing: normal;
}

em, i {
    font-family: var(--nc-font-mono);
font-weight: Var(--nc-wgt-550);
  font-size: var(--step--1);
  font-variation-settings: "MONO" 0.8, "CASL" 0.5,  "slnt" -10, "CRSV" 1;
}

strong {font-weight: var(--nc-wgt-600);
   }

.small {font-size: var(--step--1);
font-family: var(-nc-font-italics)};

p { font-size: var(--step--1);}

ul { font-size: var(--step-0); }

h1 {
    font-size: var(--step-4);
    max-width: 20ch;
}

h2 {
    font-size: var(--step-3);
    max-width: 40ch;
}

h3 {
    font-size: var(--step-2);
    max-width: 40ch;
}

h4 {
    font-size: var(--step-1);
    max-width: 40ch;
}

p {
    max-width: 65ch;
    text-wrap: pretty;
}

a {
    color: var(--nc-lk-1);
}
a:hover {
    color: var(--nc-lk-2);
}





@counter-style new-style {
    system: extends decimal;
    suffix: ") ";
    prefix: "(";
  }
  ol {
    display:grid;
    list-style-type: new-style;
  }

  /* Blockquote main style */
  blockquote {
    border-left: 3px solid var(--nc-accent-1);

    font-family: var(--nc-font-mono);
    font-size: var(---step-0);
    font-style: italic;
    line-height: 1.8em;
    margin: 1.1em -4em;
    padding: 1em 2em;
    position: relative;
    transition: 0.2s border ease-in-out;
    z-index: 0;
  }

  blockquote:before {
    content: "";
    position: absolute;
    top: 50%;
    left: -4px;
    height: 2em;
    background-color: transparent;
    width: 5px;
    margin-top: -1em;
  }

  blockquote:after {
    content: "";
    position: absolute;
    top: 50%;
    left: -0.5em;
    color: var(--nc-accent-1);
    font-family: "Ionicons";
    font-style: normal;
    line-height: 1em;
    text-align: center;
    text-indent: -2px;
    width: 1em;
    margin-top: -0.5em;
    transition: 0.2s all ease-in-out, 0.4s transform ease-in-out;
  }

  blockquote:active:after {
    transform: rotateY(360deg);
  }

  blockquote cite {
    display: block;
    font-size: 0.75em;
    line-height: 1.8em;
    margin-top: 1em;
  }

  @media (max-width: 1200px) {
    body, html {
      font-size: 18px;
    }
  }
  @media (max-width: 980px) {
    body, html {
      font-size: 16px;
      margin-left: 0;
      margin-top: 0;
    }

    .container {
      max-width: 720px;
      padding: 0 3em 3em;
    }

    blockquote {
      font-size: 1.1em;
      margin: 1.1em -2em;
    }
  }
  @media (max-width: 767px) {
    body, html {
      font-size: 16px;
      margin-left: 0;
      margin-top: 0;
    }

    .container {
      padding: 0 2em 3em;
    }

    blockquote {
      border-top: 2px solid var(--nc-accent-1);
      border-bottom: 2px solid var(--nc-accent-1);
      border-left: none;
      margin: 1.5em 0;
      padding: 1.5em 1em;
    }

    blockquote:before {
      left: 50%;
      top: 0;
      height: 4px;
      margin-top: -3px;
      margin-left: -1em;
      width: 2em;
    }

    blockquote:after {
      font-size: 0.75em;
      left: 50%;
      top: 0;
      margin-top: -0.5em;
      margin-left: -0.5em;
    }

    blockquote cite {
      text-align: right;
    }
  }

  .news {font-size: var(--step-0);}

  .toggle {font-size: var(--step--2);
font-family: var(--nc-font-mono)}

  .downloads {
    font-family: var(--nc-font-mono);
    font-size: var(--step-0);
    color: var(--nc-accent-1);
  }