/* design_tokens/color.css */

:root,
.theme-light {
  /*  rgb values to be able to use like this: rgba(var(--color-grey-00), 0.5); */
  --color-blue-00: 251,255,255;
  --color-blue-20: 248,254,254;
  --color-blue-35: 242,251,251;
  --color-blue-50: 232,246,247;
  --color-blue-100: 199,231,236;
  --color-blue-200: 147,206,223;
  --color-blue-300: 51,152,207;
  --color-blue-400: 0,115,198;
  --color-blue-500: 0,67,184;
  --color-blue-600: 22,50,155;
  --color-blue-700: 23,20,98;
  --color-blue-800: 18,7,71;
  --color-blue-900: 14,2,58;
  --color-blue-1000: 10,0,46;
  --color-red-00: 255,253,252;
  --color-red-20: 254,250,249;
  --color-red-35: 253,246,244;
  --color-red-50: 251,239,237;
  --color-red-100: 245,218,212;
  --color-red-200: 233,183,173;
  --color-red-300: 207,117,106;
  --color-red-400: 188,75,68;
  --color-red-500: 164,0,27;
  --color-red-600: 123,0,15;
  --color-red-700: 48,0,1;
  --color-red-800: 16,0,0;
  --color-red-900: 4,0,0;
  --color-red-1000: 0,0,0;
  --color-green-00: 252,255,251;
  --color-green-20: 249,253,248;
  --color-green-35: 245,250,244;
  --color-green-50: 238,244,237;
  --color-green-100: 215,227,214;
  --color-green-200: 179,200,179;
  --color-green-300: 111,151,118;
  --color-green-400: 68,122,85;
  --color-green-500: 0,91,51;
  --color-green-600: 6,67,33;
  --color-green-700: 2,23,6;
  --color-green-800: 1,5,1;
  --color-green-900: 0,1,0;
  --color-green-1000: 0,0,0;
  --color-yellow-00: 255,255,248;
  --color-yellow-20: 253,253,245;
  --color-yellow-35: 250,249,240;
  --color-yellow-50: 245,244,232;
  --color-yellow-100: 230,225,206;
  --color-yellow-200: 208,194,164;
  --color-yellow-300: 173,136,91;
  --color-yellow-400: 154,99,51;
  --color-yellow-500: 131,58,0;
  --color-yellow-600: 92,48,0;
  --color-yellow-700: 26,22,0;
  --color-yellow-800: 4,7,0;
  --color-yellow-900: 1,2,0;
  --color-yellow-1000: 0,0,0;
  --color-cyan-00: 248,255,255;
  --color-cyan-20: 241,250,250;
  --color-cyan-35: 236,246,246;
  --color-cyan-50: 233,244,245;
  --color-cyan-100: 209,227,228;
  --color-cyan-200: 172,199,202;
  --color-cyan-300: 103,149,158;
  --color-cyan-400: 62,119,133;
  --color-cyan-500: 0,87,107;
  --color-cyan-600: 6,62,82;
  --color-cyan-700: 3,19,32;
  --color-cyan-800: 1,4,9;
  --color-cyan-900: 0,1,2;
  --color-cyan-1000: 0,0,0;
  --color-orange-00: 255,253,249;
  --color-orange-20: 251,248,240;
  --color-orange-35: 248,244,234;
  --color-orange-50: 247,242,231;
  --color-orange-100: 236,223,201;
  --color-orange-200: 221,190,155;
  --color-orange-300: 197,125,77;
  --color-orange-400: 180,83,38;
  --color-orange-500: 158,20,0;
  --color-orange-600: 114,28,0;
  --color-orange-700: 31,20,0;
  --color-orange-800: 4,6,0;
  --color-orange-900: 0,2,0;
  --color-orange-1000: 0,0,0;
  --color-fushia-00: 255,253,255;
  --color-fushia-20: 252,246,252;
  --color-fushia-35: 250,242,250;
  --color-fushia-50: 248,240,248;
  --color-fushia-100: 237,218,238;
  --color-fushia-200: 218,183,221;
  --color-fushia-300: 182,119,189;
  --color-fushia-400: 158,80,170;
  --color-fushia-500: 132,25,148;
  --color-fushia-600: 93,20,118;
  --color-fushia-700: 29,5,52;
  --color-fushia-800: 6,1,19;
  --color-fushia-900: 1,0,5;
  --color-fushia-1000: 0,0,0;
  --color-purple-00: 255,254,255;
  --color-purple-20: 252,248,253;
  --color-purple-35: 251,244,251;
  --color-purple-50: 250,243,251;
  --color-purple-100: 240,224,244;
  --color-purple-200: 222,195,236;
  --color-purple-300: 180,143,225;
  --color-purple-400: 151,114,219;
  --color-purple-500: 117,79,213;
  --color-purple-600: 86,58,162;
  --color-purple-700: 31,19,70;
  --color-purple-800: 8,4,29;
  --color-purple-900: 2,1,11;
  --color-purple-1000: 0,0,1;
  --color-grey-00: 255,255,248;
  --color-grey-20: 253,253,246;
  --color-grey-35: 249,249,242;
  --color-grey-50: 244,243,236;
  --color-grey-100: 225,224,217;
  --color-grey-200: 195,194,187;
  --color-grey-300: 142,140,134;
  --color-grey-400: 112,109,103;
  --color-grey-500: 80,77,72;
  --color-grey-600: 59,57,51;
  --color-grey-700: 20,21,15;
  --color-grey-800: 4,6,3;
  --color-grey-900: 1,2,1;
  --color-grey-1000: 0,0,0;
  --color-black: 0,0.2913950572018906,0;
  --color-bg: var(--color-grey-20);
  --color-body: var(--color-grey-500);
}

.theme-dark {
  /* dark theme */
  --color-blue-00: 14,18,26;
  --color-blue-20: 16,20,29;
  --color-blue-35: 20,25,37;
  --color-blue-50: 22,28,40;
  --color-blue-100: 34,44,64;
  --color-blue-200: 57,73,106;
  --color-blue-300: 82,105,152;
  --color-blue-400: 108,138,200;
  --color-blue-500: 135,173,250;
  --color-blue-600: 145,191,252;
  --color-blue-700: 161,208,252;
  --color-blue-800: 182,223,252;
  --color-blue-900: 206,237,253;
  --color-blue-1000: 219,243,254;
  --color-red-00: 25,14,14;
  --color-red-20: 28,17,16;
  --color-red-35: 36,21,20;
  --color-red-50: 39,23,22;
  --color-red-100: 62,37,35;
  --color-red-200: 103,62,59;
  --color-red-300: 148,88,85;
  --color-red-400: 195,116,112;
  --color-red-500: 244,146,140;
  --color-red-600: 248,165,157;
  --color-red-700: 251,183,175;
  --color-red-800: 253,201,193;
  --color-red-900: 254,220,213;
  --color-red-1000: 255,229,223;
  --color-green-00: 13,20,13;
  --color-green-20: 15,22,14;
  --color-green-35: 18,28,18;
  --color-green-50: 20,31,20;
  --color-green-100: 31,48,31;
  --color-green-200: 52,80,51;
  --color-green-300: 73,114,72;
  --color-green-400: 96,150,95;
  --color-green-500: 119,187,118;
  --color-green-600: 142,201,140;
  --color-green-700: 164,214,162;
  --color-green-800: 186,228,185;
  --color-green-900: 209,241,207;
  --color-green-1000: 220,248,218;
  --color-yellow-00: 21,17,8;
  --color-yellow-20: 24,19,10;
  --color-yellow-35: 31,24,12;
  --color-yellow-50: 34,27,13;
  --color-yellow-100: 53,43,21;
  --color-yellow-200: 89,71,34;
  --color-yellow-300: 127,101,47;
  --color-yellow-400: 167,133,61;
  --color-yellow-500: 210,167,75;
  --color-yellow-600: 218,184,106;
  --color-yellow-700: 226,200,134;
  --color-yellow-800: 235,216,161;
  --color-yellow-900: 245,231,188;
  --color-yellow-1000: 250,239,201;
  --color-orange-00: 24,15,10;
  --color-orange-20: 27,18,12;
  --color-orange-35: 34,22,15;
  --color-orange-50: 38,25,16;
  --color-orange-100: 60,40,26;
  --color-orange-200: 100,66,43;
  --color-orange-300: 143,94,62;
  --color-orange-400: 188,124,81;
  --color-orange-500: 236,155,101;
  --color-orange-600: 239,174,122;
  --color-orange-700: 243,192,145;
  --color-orange-800: 246,209,170;
  --color-orange-900: 250,225,195;
  --color-orange-1000: 252,233,208;
  --color-purple-00: 18,16,25;
  --color-purple-20: 21,18,28;
  --color-purple-35: 26,23,36;
  --color-purple-50: 29,26,39;
  --color-purple-100: 46,41,62;
  --color-purple-200: 77,69,104;
  --color-purple-300: 110,98,149;
  --color-purple-400: 145,129,196;
  --color-purple-500: 181,162,246;
  --color-purple-600: 197,177,247;
  --color-purple-700: 212,193,249;
  --color-purple-800: 226,209,250;
  --color-purple-900: 238,226,252;
  --color-purple-1000: 244,235,254;
  --color-fushia-00: 22,15,22;
  --color-fushia-20: 25,17,25;
  --color-fushia-35: 31,22,32;
  --color-fushia-50: 34,24,35;
  --color-fushia-100: 54,38,56;
  --color-fushia-200: 91,64,93;
  --color-fushia-300: 130,91,133;
  --color-fushia-400: 171,120,176;
  --color-fushia-500: 215,150,220;
  --color-fushia-600: 223,168,227;
  --color-fushia-700: 232,186,234;
  --color-fushia-800: 240,203,241;
  --color-fushia-900: 248,221,248;
  --color-fushia-1000: 251,230,252;
  --color-cyan-00: 8,20,21;
  --color-cyan-20: 8,23,24;
  --color-cyan-35: 10,28,30;
  --color-cyan-50: 11,31,33;
  --color-cyan-100: 16,49,52;
  --color-cyan-200: 22,81,86;
  --color-cyan-300: 27,115,123;
  --color-cyan-400: 30,151,162;
  --color-cyan-500: 30,189,202;
  --color-cyan-600: 87,203,212;
  --color-cyan-700: 123,216,222;
  --color-cyan-800: 155,229,232;
  --color-cyan-900: 185,242,243;
  --color-cyan-1000: 200,249,249;
  --color-grey-00: 14,18,26;
  --color-grey-20: 16,20,28;
  --color-grey-35: 21,25,34;
  --color-grey-50: 24,28,36;
  --color-grey-100: 40,44,54;
  --color-grey-200: 69,74,84;
  --color-grey-300: 100,106,116;
  --color-grey-400: 133,139,150;
  --color-grey-500: 168,174,186;
  --color-grey-600: 180,189,200;
  --color-grey-700: 193,204,214;
  --color-grey-800: 206,219,228;
  --color-grey-900: 219,234,241;
  --color-grey-1000: 226,241,248;
  --color-black: 0,0,0;


  --color-bg: var(--color-grey-20);
  --color-body: var(--color-grey-500);
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    /* dark theme */
    --color-blue-00: 14,18,26;
  --color-blue-20: 16,20,29;
  --color-blue-35: 20,25,37;
  --color-blue-50: 22,28,40;
  --color-blue-100: 34,44,64;
  --color-blue-200: 57,73,106;
  --color-blue-300: 82,105,152;
  --color-blue-400: 108,138,200;
  --color-blue-500: 135,173,250;
  --color-blue-600: 145,191,252;
  --color-blue-700: 161,208,252;
  --color-blue-800: 182,223,252;
  --color-blue-900: 206,237,253;
  --color-blue-1000: 219,243,254;
  --color-red-00: 25,14,14;
  --color-red-20: 28,17,16;
  --color-red-35: 36,21,20;
  --color-red-50: 39,23,22;
  --color-red-100: 62,37,35;
  --color-red-200: 103,62,59;
  --color-red-300: 148,88,85;
  --color-red-400: 195,116,112;
  --color-red-500: 244,146,140;
  --color-red-600: 248,165,157;
  --color-red-700: 251,183,175;
  --color-red-800: 253,201,193;
  --color-red-900: 254,220,213;
  --color-red-1000: 255,229,223;
  --color-green-00: 13,20,13;
  --color-green-20: 15,22,14;
  --color-green-35: 18,28,18;
  --color-green-50: 20,31,20;
  --color-green-100: 31,48,31;
  --color-green-200: 52,80,51;
  --color-green-300: 73,114,72;
  --color-green-400: 96,150,95;
  --color-green-500: 119,187,118;
  --color-green-600: 142,201,140;
  --color-green-700: 164,214,162;
  --color-green-800: 186,228,185;
  --color-green-900: 209,241,207;
  --color-green-1000: 220,248,218;
  --color-yellow-00: 21,17,8;
  --color-yellow-20: 24,19,10;
  --color-yellow-35: 31,24,12;
  --color-yellow-50: 34,27,13;
  --color-yellow-100: 53,43,21;
  --color-yellow-200: 89,71,34;
  --color-yellow-300: 127,101,47;
  --color-yellow-400: 167,133,61;
  --color-yellow-500: 210,167,75;
  --color-yellow-600: 218,184,106;
  --color-yellow-700: 226,200,134;
  --color-yellow-800: 235,216,161;
  --color-yellow-900: 245,231,188;
  --color-yellow-1000: 250,239,201;
  --color-orange-00: 24,15,10;
  --color-orange-20: 27,18,12;
  --color-orange-35: 34,22,15;
  --color-orange-50: 38,25,16;
  --color-orange-100: 60,40,26;
  --color-orange-200: 100,66,43;
  --color-orange-300: 143,94,62;
  --color-orange-400: 188,124,81;
  --color-orange-500: 236,155,101;
  --color-orange-600: 239,174,122;
  --color-orange-700: 243,192,145;
  --color-orange-800: 246,209,170;
  --color-orange-900: 250,225,195;
  --color-orange-1000: 252,233,208;
  --color-purple-00: 18,16,25;
  --color-purple-20: 21,18,28;
  --color-purple-35: 26,23,36;
  --color-purple-50: 29,26,39;
  --color-purple-100: 46,41,62;
  --color-purple-200: 77,69,104;
  --color-purple-300: 110,98,149;
  --color-purple-400: 145,129,196;
  --color-purple-500: 181,162,246;
  --color-purple-600: 197,177,247;
  --color-purple-700: 212,193,249;
  --color-purple-800: 226,209,250;
  --color-purple-900: 238,226,252;
  --color-purple-1000: 244,235,254;
  --color-fushia-00: 22,15,22;
  --color-fushia-20: 25,17,25;
  --color-fushia-35: 31,22,32;
  --color-fushia-50: 34,24,35;
  --color-fushia-100: 54,38,56;
  --color-fushia-200: 91,64,93;
  --color-fushia-300: 130,91,133;
  --color-fushia-400: 171,120,176;
  --color-fushia-500: 215,150,220;
  --color-fushia-600: 223,168,227;
  --color-fushia-700: 232,186,234;
  --color-fushia-800: 240,203,241;
  --color-fushia-900: 248,221,248;
  --color-fushia-1000: 251,230,252;
  --color-cyan-00: 8,20,21;
  --color-cyan-20: 8,23,24;
  --color-cyan-35: 10,28,30;
  --color-cyan-50: 11,31,33;
  --color-cyan-100: 16,49,52;
  --color-cyan-200: 22,81,86;
  --color-cyan-300: 27,115,123;
  --color-cyan-400: 30,151,162;
  --color-cyan-500: 30,189,202;
  --color-cyan-600: 87,203,212;
  --color-cyan-700: 123,216,222;
  --color-cyan-800: 155,229,232;
  --color-cyan-900: 185,242,243;
  --color-cyan-1000: 200,249,249;
  --color-grey-00: 14,18,26;
  --color-grey-20: 16,20,28;
  --color-grey-35: 21,25,34;
  --color-grey-50: 24,28,36;
  --color-grey-100: 40,44,54;
  --color-grey-200: 69,74,84;
  --color-grey-300: 100,106,116;
  --color-grey-400: 133,139,150;
  --color-grey-500: 168,174,186;
  --color-grey-600: 180,189,200;
  --color-grey-700: 193,204,214;
  --color-grey-800: 206,219,228;
  --color-grey-900: 219,234,241;
  --color-grey-1000: 226,241,248;
  --color-black: 0,0,0;

    --color-bg: var(--color-grey-20);
    --color-body: var(--color-grey-500);
  }
}

body {
  background: rgba(var(--color-bg), 1);
  color: rgba(var(--color-body), 1);
}

:focus-visible {
  outline: 2px solid rgba(var(--color-blue-200), 1);
}

/* design_tokens/font.css */

@font-face {
  font-family:"Basier";
  src: url("/assets/font/basiercircle-regular.woff2") format("woff2"), 
       url("/assets/font/basiercircle-regular.woff") format("woff");
  font-style:normal;
  font-weight:400;
  font-display: swap;
}

@font-face {
  font-family:"Basier";
  src: url("/assets/font/basiercircle-bold.woff2") format("woff2"), 
       url("/assets/font/basiercircle-bold.woff") format("woff");
  font-style:normal;
  font-weight:700;
  font-display: swap;
}


:root {
  --font-sans:  "Basier", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 
  --font-serif: Athelas, Cambria, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-mono: SF Mono, Menlo, Consolas, DejaVu Sans Mono, monospace;

  --base-font-size: 19px;

  /****************/ 
  /* font-weight */

  --font-weight-400: 400;
  --font-weight-700: 700;

  /****************/
  /* modular scale */ 
  
  --ratio: 1.2;
  --font-size-10: calc(var(--base-font-size) / var(--ratio) / var(--ratio) / var(--ratio) / var(--ratio)); /* -4 */
  --font-size-20: calc(var(--base-font-size) / var(--ratio) / var(--ratio) / var(--ratio)); /* -3 */
  --font-size-30: calc(var(--base-font-size) / var(--ratio) / var(--ratio)); /* -2 */
  --font-size-40: calc(var(--base-font-size) / var(--ratio)); /* -1 */
  --font-size-50: var(--base-font-size);
  --font-size-60: calc(var(--base-font-size) * var(--ratio)); /* +1 */
  --font-size-70: calc(var(--base-font-size) * var(--ratio) * var(--ratio)); /* +2 */
  --font-size-80: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio)); /* +4 */
  --font-size-90: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +5 */
  --font-size-100: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +6 */
  --font-size-110: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +7 */
  --font-size-120: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +8 */
  --font-size-130: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +9 */
  --font-size-140: calc(var(--base-font-size) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio) * var(--ratio)); /* +10 */
}

html,
body {
  font-size: var(--base-font-size);
}

body {
  font-family: var(--font-sans);
  font-weight: var(--font-weight-400);
  line-height: var(--space-4x);
  letter-spacing: 0.01em;
}
/* design_tokens/gradient.css */

:root,
:root.theme-light {
  --gradient-bottom-grey-40: linear-gradient(0deg, rgba(var(--color-grey-300), 1), rgba(var(--color-grey-400), 1));
  --gradient-bottom-green-40: linear-gradient(0deg, rgba(var(--color-green-300), 1), rgba(var(--color-green-400), 1));
 
  --gradient-top-grey-10: linear-gradient(180deg, rgba(var(--color-grey-35), 1), rgba(var(--color-grey-50), 1));
  --gradient-top-grey-20: linear-gradient(180deg, rgba(var(--color-grey-50), 1), rgba(var(--color-grey-100), 1));
  --gradient-top-grey-30: linear-gradient(180deg, rgba(var(--color-grey-100), 1), rgba(var(--color-grey-200), 1));
  
  --gradient-top-grey-50: linear-gradient(180deg, rgba(var(--color-grey-500), 1), rgba(var(--color-grey-600), 1));
  --gradient-top-grey-60: linear-gradient(180deg, rgba(var(--color-grey-600), 1), rgba(var(--color-grey-700), 1));
  --gradient-top-grey-70: linear-gradient(180deg, rgba(var(--color-grey-700), 1), rgba(var(--color-grey-800), 1));
  --gradient-top-grey-80: linear-gradient(180deg, rgba(var(--color-grey-800), 1), rgba(var(--color-grey-900), 1));

  --gradient-top-primary-50: linear-gradient(180deg, rgba(var(--color-blue-500), 1), rgba(var(--color-blue-600), 1));
  --gradient-top-primary-60: linear-gradient(180deg, rgba(var(--color-blue-600), 1), rgba(var(--color-blue-700), 1));
}

:root.theme-dark {
  /* invert angle */
  --gradient-bottom-grey-40: linear-gradient(0deg, rgba(var(--color-grey-400), 1), rgba(var(--color-grey-300), 1));
  --gradient-bottom-green-40: linear-gradient(0deg, rgba(var(--color-green-400), 1), rgba(var(--color-green-300), 1));
  
  --gradient-top-grey-10: linear-gradient(180deg, rgba(var(--color-grey-50), 1), rgba(var(--color-grey-35), 1));
  --gradient-top-grey-20: linear-gradient(180deg, rgba(var(--color-grey-100), 1), rgba(var(--color-grey-50), 1));
  --gradient-top-grey-30: linear-gradient(180deg, rgba(var(--color-grey-200), 1), rgba(var(--color-grey-100), 1));

  --gradient-top-grey-50: linear-gradient(180deg, rgba(var(--color-grey-500), 1), rgba(var(--color-grey-400), 1));
  --gradient-top-grey-60: linear-gradient(180deg, rgba(var(--color-grey-600), 1), rgba(var(--color-grey-500), 1));
  --gradient-top-grey-70: linear-gradient(180deg, rgba(var(--color-grey-800), 1), rgba(var(--color-grey-700), 1));
  --gradient-top-grey-80: linear-gradient(180deg, rgba(var(--color-grey-900), 1), rgba(var(--color-grey-800), 1));

  --gradient-top-primary-50: linear-gradient(180deg, rgba(var(--color-blue-500), 1), rgba(var(--color-blue-400), 1));
  --gradient-top-primary-60: linear-gradient(180deg, rgba(var(--color-blue-600), 1), rgba(var(--color-blue-500), 1));
}

@media (prefers-color-scheme: dark) {
  :root:not(.theme-light) {
    /* dark */
    --gradient-bottom-grey-40: linear-gradient(0deg, rgba(var(--color-grey-400), 1), rgba(var(--color-grey-300), 1));
    --gradient-bottom-green-40: linear-gradient(0deg, rgba(var(--color-green-400), 1), rgba(var(--color-green-300), 1));
    
    --gradient-top-grey-10: linear-gradient(180deg, rgba(var(--color-grey-50), 1), rgba(var(--color-grey-35), 1));
    --gradient-top-grey-20: linear-gradient(180deg, rgba(var(--color-grey-100), 1), rgba(var(--color-grey-50), 1));
    --gradient-top-grey-30: linear-gradient(180deg, rgba(var(--color-grey-200), 1), rgba(var(--color-grey-100), 1));
  
    --gradient-top-grey-50: linear-gradient(180deg, rgba(var(--color-grey-500), 1), rgba(var(--color-grey-400), 1));
    --gradient-top-grey-60: linear-gradient(180deg, rgba(var(--color-grey-600), 1), rgba(var(--color-grey-500), 1));
    --gradient-top-grey-70: linear-gradient(180deg, rgba(var(--color-grey-800), 1), rgba(var(--color-grey-700), 1));
    --gradient-top-grey-80: linear-gradient(180deg, rgba(var(--color-grey-900), 1), rgba(var(--color-grey-800), 1));
  
    --gradient-top-primary-50: linear-gradient(180deg, rgba(var(--color-blue-500), 1), rgba(var(--color-blue-400), 1));
    --gradient-top-primary-60: linear-gradient(180deg, rgba(var(--color-blue-600), 1), rgba(var(--color-blue-500), 1));
  }
}
/* design_tokens/motion.css */

html:focus-within {
  scroll-behavior: smooth;
}

/* force reduced motion if preference is set */

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-delay: -1ms !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    background-attachment: initial !important;
    scroll-behavior: auto !important;
    transition-duration: 0s !important;
    transition-delay: 0s !important;
  }
}
/* design_tokens/shadow.css */

:root {
/* box-shadow */
  --box-shadow-s: 
    0 1px 1px 0 rgba(var(--color-black), 0.05),
    0 1px 2px 0 rgba(var(--color-black), 0.05);
  --box-shadow-m: 
    0 1px 1px 0 rgba(var(--color-black), 0.05),
    0 1px 2px 0 rgba(var(--color-black), 0.05),
    0 2px 4px -1px rgba(var(--color-black), 0.05),
    0 4px 8px -2px rgba(var(--color-black), 0.05);
  --box-shadow-l: 
    0 0px 2px 0 rgba(var(--color-black), 0.05),
    0 1px 2px 0 rgba(var(--color-black), 0.05),
    0 2px 4px -1px rgba(var(--color-black), 0.05),
    0 4px 8px -2px rgba(var(--color-black), 0.05),
    0 8px 16px -4px rgba(var(--color-black), 0.05),
    0 16px 32px -8px rgba(var(--color-black), 0.05);
  --box-shadow-xl: 
    0 0px 2px 0 rgba(var(--color-black), 0.08),
    0 1px 4px 0 rgba(var(--color-black), 0.08),
    0 2px 8px 0px rgba(var(--color-black), 0.08),
    0 4px 16px -1px rgba(var(--color-black), 0.08),
    0 8px 32px -2px rgba(var(--color-black), 0.08),
    0 16px 64px -4px rgba(var(--color-black), 0.08);

/* inset box shadow */
  --box-inset-shadow-s: 0 1px 1px 0 rgba(var(--color-black), 0.05) inset;  
  --box-inset-shadow-m: 0 1px 1px 0px rgba(var(--color-black), 0.05) inset,
      0 2px 2px 1px rgba(var(--color-black), 0.05) inset;
  --box-inset-shadow-l: 0 1px 1px 0px rgba(var(--color-black), 0.05) inset,
        0 2px 2px 1px rgba(var(--color-black), 0.05) inset,
      0 2px 8px 2px rgba(var(--color-black), 0.05) inset;
      
/* text shadow */
  --text-shadow-s: 0 1px 1px rgba(var(--color-black), 0.05);
  --text-shadow-m: 0 1px 1px rgba(var(--color-black), 0.05),
      0 2px 2px rgba(var(--color-black), 0.05);
  --text-shadow-l: 0 1px 1px rgba(var(--color-black), 0.05),
      0 2px 2px rgba(var(--color-black), 0.05),
      0 4px 4px rgba(var(--color-black), 0.05);
}
/* design_tokens/shape.css */

:root {
  /* border radius */
  --border-radius-s: calc(var(--space) * 0.25);
  --border-radius-m: var(--space-1-2);
  --border-radius-l: calc(var(--space) * 1);

  /* aspect ratio */
}
/* design_tokens/space.css */

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

:root {
  --space: 8px;
  /* divided */
  --space-1-4: calc(var(--space) / 4);
  --space-1-2: calc(var(--space) / 2);
  /* multiple */
  --space-2x: calc(var(--space) * 2);
  --space-3x: calc(var(--space) * 3);
  --space-4x: calc(var(--space) * 4);
  --space-5x: calc(var(--space) * 5);
  --space-6x: calc(var(--space) * 6);
  --space-7x: calc(var(--space) * 7);
  --space-8x: calc(var(--space) * 8);
  --space-9x: calc(var(--space) * 9);
  --space-10x: calc(var(--space) * 10);
  --space-11x: calc(var(--space) * 11);
  --space-12x: calc(var(--space) * 12);
  --space-13x: calc(var(--space) * 13);
  --space-14x: calc(var(--space) * 14);

  --screen-s: 900px;
  --screen-m: 1200px;
  --screen-l: 1400px;
}

.is-flowing > * + * {
  margin-top: var(--space-3x);
}
/* design_tokens/states.css */

*[hidden=true] { 
  display: none; 
}

/* hide visually but make it available to assistive technology. */
.sr-only {
  border: 0 !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  height: 1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
  white-space: nowrap !important;
}
/**** BUTTONS *****/

button,
input[type="submit"],
input[type="button"],
input[type="reset"],
[role="button"],
:any-link[role="button"]  {
  /* Display */

  width: auto;
  cursor: pointer;
  
  /*  shape */
  background-color: transparent;
  padding: var(--space) calc(var(--space) * 2);

  /*  border */
  border: none;
  border-radius: var(--border-radius-s, 0); /* defined in design_tokens/shape.scss */
  box-shadow: 0 0 0 1px rgba(var(--color-grey-300), 1) inset,
    var(--box-shadow-s);
  outline: 0;

  /* text */
  color: rgba(var(--color-grey-700), 1);
  font: inherit;
  font-family: inherit;
  font-size: var(--font-size-40);
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: var(--space-3x);
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  text-shadow: var(--text-shadow-s);
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
[role="button"]:hover,
:any-link[role="button"]:hover,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
[role="button"]:active,
:any-link[role="button"]:active {
  color: rgba(var(--color-grey-800), 1);
  box-shadow: 0 0 0 1px rgba(var(--color-grey-700), 1) inset, 
    var(--box-shadow-s);
  transition: all 0.2s ease-in-out;
}

button:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
input[type="reset"]:focus,
[role="button"]:focus,
:any-link[role="button"]:focus {
  outline: 2px solid rgba(var(--color-blue-200), 1);
  border: 0;
  color: rgba(var(--color-grey-900), 1);
  z-index: 1;
}

button:focus:focus:not(:focus-visible),
input[type="submit"]:focus:focus:not(:focus-visible),
input[type="button"]:focus:focus:not(:focus-visible),
input[type="reset"]:focus:focus:not(:focus-visible),
[role="button"]:focus:focus:not(:focus-visible),
:any-link[role="button"]:focus:focus:not(:focus-visible) { 
  outline: none;
}

/* button elements */
button * + *,
button[type="reset"] * + *,
input[type="submit"] * + *,
input[type="button"] * + *,
input[type="reset"] * + *,
[role="button"] * + *,
:any-link[role="button"] * + * {
  margin: 0 0 0 var(--space);
}

/* button icon */
button svg, 
input[type="submit"] svg,
input[type="button"] svg,
input[type="reset"] svg,
[role="button"] svg,
:any-link[role="button"] svg {
  height: calc(var(--space) * 2);
  width: calc(var(--space) * 2);
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* MODIFIERS */

/* ARIA STATES */

  /* toggle */

button[aria-pressed="true"],
button[type="reset"][aria-pressed="true"],
input[type="submit"][aria-pressed="true"],
input[type="button"][aria-pressed="true"],
input[type="reset"][aria-pressed="true"],
[role="button"][aria-pressed="true"],
:any-link[role="button"][aria-pressed="true"] {
  background: rgba(var(--color-grey-100), 1);
  color: rgba(var(--color-blue-600), 1);
  box-shadow: 0 0 0 1px rgba(var(--color-grey-200), 1) inset,
  var(--box-inset-shadow-m);
}

/* menubutton */
button[aria-expanded="true"],
button[type="reset"][aria-expanded="true"],
input[type="submit"][aria-expanded="true"],
input[type="button"][aria-expanded="true"],
input[type="reset"][aria-expanded="true"],
[role="button"][aria-expanded="true"],
:any-link[role="button"][aria-expanded="true"] {
  background: rgba(var(--color-grey-100), 1);
  color: rgba(var(--color-grey-600), 1);
  box-shadow: 0 0 0 1px rgba(var(--color-grey-200), 1) inset,
    var(--box-inset-shadow-m);
}

/* DISPLAY MODIFIERS */

button.is-block,
button[type="reset"].is-block,
input[type="submit"].is-block,
input[type="button"].is-block,
input[type="reset"].is-block,
[role="button"].is-block,
:any-link[role="button"].is-block {
  width: 100%;
}

/* STYLE MODIFIERS */

/* strong: higher contrast */
button.is-strong,
button[type="reset"].is-strong,
input[type="submit"].is-strong,
input[type="button"].is-strong,
input[type="reset"].is-strong,
[role="button"].is-strong,
:any-link[role="button"].is-strong {
  background: rgba(var(--color-grey-700), 1);
  background: var(--gradient-top-grey-60);
  color: rgba(var(--color-bg), 1);
  box-shadow: 
    0 -1px 1px 0 rgba(var(--color-black), 0.1) inset,
    0 1px 1px 0 rgba(255,255,255, .1) inset,
    var(--box-shadow-m);
}
 
button.is-strong:hover,
button[type="reset"].is-strong:hover,
input[type="submit"].is-strong:hover,
input[type="button"].is-strong:hover,
input[type="reset"].is-strong:hover,
[role="button"].is-strong:hover,
:any-link[role="button"].is-strong:hover,
button.is-strong:active,
button[type="reset"].is-strong:active,
input[type="submit"].is-strong:active,
input[type="button"].is-strong:active,
input[type="reset"].is-strong:active,
[role="button"].is-strong:active {
  background: rgba(var(--color-grey-800), 1);
  background: var(--gradient-top-grey-70);
  color: rgba(var(--color-bg), 1);
  box-shadow: 0 -1px 1px 0 rgba(var(--color-black), 0.04) inset,
      0 1px 1px 0 rgba(255,255,255, .04) inset,
      var(--box-shadow-m);
}

button.is-strong:focus,
button[type="reset"].is-strong:focus,
input[type="submit"].is-strong:focus,
input[type="button"].is-strong:focus,
input[type="reset"].is-strong:focus,
[role="button"].is-strong:focus,
:any-link[role="button"].is-strong:focus {
  color: rgba(var(--color-bg), 1);
}

/* reset style */

button[type="reset"],
input[type="reset"],
button.is-reset,
input[type="submit"].is-reset,
input[type="button"].is-reset,
[role="button"].is-reset,
:any-link[role="button"].is-reset {
  color: rgba(var(--color-red-500), 1);
}

button[type="reset"]:hover,
input[type="reset"]:hover,  
button[type="reset"]:hover,
input[type="reset"]:hover,
button.is-reset:hover,
input[type="submit"].is-reset:hover,
input[type="button"].is-reset:hover,
[role="button"].is-reset:hover,
:any-link[role="button"].is-reset:hover,
button[type="reset"]:active,
input[type="reset"]:active,
button.is-reset:active,
input[type="submit"].is-reset:active,
input[type="button"].is-reset:active,
[role="button"].is-reset:active,
:any-link[role="button"].is-reset:active {
  background: rgba(var(--color-red-500), 1);
  color: rgba(var(--color-red-20), 1);

  box-shadow: 0 0 0 1px rgba(var(--color-red-600), 1) inset, 
    var(--box-shadow-s);
}

button[type="reset"]:focus,
input[type="reset"]:focus,
button.is-reset:focus,
input[type="submit"].is-reset:focus,
input[type="button"].is-reset:focus,
[role="button"].is-reset:focus,
:any-link[role="button"].is-reset:focus {
  background: rgba(var(--color-red-500), 1);
  color: rgba(var(--color-red-20), 1);
  outline: 2px solid rgba(var(--color-red-200), 1);
}

/* link style */
button.is-link,
button[type="reset"].is-link,
input[type="submit"].is-link,
input[type="button"].is-link,
input[type="reset"].is-link,
[role="button"].is-link,
:any-link[role="button"].is-link {
  background: transparent;
  color: rgba(var(--color-grey-500), 1);
  text-decoration: underline;
  border-color: transparent;
  box-shadow: none !important;
}

button.is-link:hover,
button[type="reset"].is-link:hover,
input[type="submit"].is-link:hover,
input[type="button"].is-link:hover,
input[type="reset"].is-link:hover,
[role="button"].is-link:hover,
:any-link[role="button"].is-link:hover,
button.is-link:active,
button[type="reset"].is-link:active,
input[type="submit"].is-link:active,
input[type="button"].is-link:active,
input[type="reset"].is-link:active,
[role="button"].is-link:active,
:any-link[role="button"].is-link:active {
  background: transparent;
  color: rgba(var(--color-grey-700), 1);
  box-shadow: none;
}
  
button.is-link:focus,
button[type="reset"].is-link:focus,
input[type="submit"].is-link:focus,
input[type="button"].is-link:focus,
input[type="reset"].is-link:focus,
[role="button"].is-link:focus,
:any-link[role="button"].is-link:focus {
  color: rgba(var(--color-grey-700), 1);
}

/* SIZE MODIFIERS */

/* small button */
button.is-small,
button[type="reset"].is-small,
input[type="submit"].is-small,
input[type="button"].is-small,
input[type="reset"].is-small,
[role="button"].is-small,
:any-link[role="button"].is-small {
  border-radius: var(--border-radius-s);
  font-size: var(--font-size-30);
  line-height: var(--space-3x);
  min-height: var(--space-3x);
  padding: 0 calc(var(--space) * 1.5);
}

button.is-small svg,
button[type="reset"].is-small svg,
input[type="submit"].is-small svg,
input[type="button"].is-small svg,
input[type="reset"].is-small svg,
[role="button"].is-small svg,
:any-link[role="button"].is-small svg {
  height: var(--space);
  width: var(--space);
}

/* large button */
button.is-large,
button[type="reset"].is-large,
input[type="submit"].is-large,
input[type="button"].is-large,
input[type="reset"].is-large,
[role="button"].is-large,
:any-link[role="button"].is-large {
  border-radius: var(--border-radius-l);
  font-size: var(--font-size-50);
  line-height: calc(var(--space) * 6);
  min-height: calc(var(--space) * 8);
  padding: var(--space-3x) calc(var(--space) * 4);
}

button.is-large * + *,
button[type="reset"].is-large * + *,
input[type="submit"].is-large * + *,
input[type="button"].is-large * + *,
input[type="reset"].is-large * + *,
[role="button"].is-large * + *,
:any-link[role="button"].is-large * + * {
  margin-left: var(--space-2x);
}
  
button.is-large svg,
button[type="reset"].is-large svg,
input[type="submit"].is-large svg,
input[type="button"].is-large svg,
input[type="reset"].is-large svg,
[role="button"].is-large svg,
:any-link[role="button"].is-large svg {
  height: var(--space-3x);
  width: var(--space-3x);
}

/* ICONS */

/* icon alone */
button.is-icon svg,
button[type="reset"].is-icon svg,
input[type="submit"].is-icon svg,
input[type="button"].is-icon svg,
input[type="reset"].is-icon svg,
[role="button"].is-icon svg,
:any-link[role="button"].is-icon svg {
  margin: var(--space-1-2) calc(var(--space) * -0.5);
}

button.is-icon.is-small svg,
button[type="reset"].is-icon.is-small svg,
input[type="submit"].is-icon.is-small svg,
input[type="button"].is-icon.is-small svg,
input[type="reset"].is-icon.is-small svg,
[role="button"].is-icon.is-smallsvg,
:any-link[role="button"].is-icon.is-small svg {
  margin: 0 calc(var(--space) * -1);
}

button.is-icon.is-large svg,
button[type="reset"].is-icon.is-large svg,
input[type="submit"].is-icon.is-large svg,
input[type="button"].is-icon.is-large svg,
input[type="reset"].is-icon.is-large svg,
[role="button"].is-icon.is-large svg,
:any-link[role="button"].is-icon.is-large svg {
  margin: 0 calc(var(--space) * -0.5);
}

@media screen and (-ms-high-contrast: active) {
  button,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  [role="button"],
  :any-link[role="button"] {
    border: 2px solid currentcolor;
  }
}

code,
pre {
  font-family: var(--font-mono);
  color: rgba(var(--color-grey-500), 1);
  font-size: inherit;
  line-height: inherit;
  overflow-y: auto;
  word-wrap: normal;
  white-space: pre-wrap;
	word-spacing: normal;
  word-break: normal;
  margin: 0;
}

code {
  background: rgba(var(--color-grey-50), 1);
}

pre {
  padding: calc(var(--space) * 1 - 1px) 0 calc(var(--space) * 2 + 1px);
}
  
pre p { 
  padding: 0 0 var(--space-3x);
  font-family: inherit;
  font-size: inherit;
}


/* PRISM OVERWRITE */

/**
 * prism.js default theme for JavaScript, CSS and HTML
 * Based on dabblet (http://dabblet.com)
 * @author Lea Verou
 */

 code[class*="language-"],
 pre[class*="language-"] {
   color: rgba(var(--color-grey-500), 1);
   background: rgba(var(--color-grey-50), 1);
   text-shadow: none;
   font-family: var(--font-mono);
   font-size: 1rem;
   line-height: inherit;
   text-align: left;
   white-space: wrap;
   word-spacing: normal;
   word-wrap: normal;
   word-break: break-word;
   overflow: hidden;
   -moz-tab-size: 4;
   -o-tab-size: 4;
   tab-size: 4;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
 }
 
 pre[class*="language-"]::-moz-selection,
 pre[class*="language-"] ::-moz-selection,
 code[class*="language-"]::-moz-selection,
 code[class*="language-"] ::-moz-selection {
   text-shadow: none;
   background: rgba(var(--color-blue-100), 1);
 }
 
 pre[class*="language-"]::selection,
 pre[class*="language-"] ::selection,
 code[class*="language-"]::selection,
 code[class*="language-"] ::selection {
   text-shadow: none;
   background: rgba(var(--color-blue-100), 1);
 }
 
 @media print {
   code[class*="language-"],
   pre[class*="language-"] {
     text-shadow: none;
   }
 }
 
 /* Code blocks */
 pre[class*="language-"] {
   padding: calc(var(--space) * 1 - 1px) 0 calc(var(--space) * 2 + 1px);
   margin: 0;
   overflow: auto;
 }
 
 :not(pre) > code[class*="language-"],
 pre[class*="language-"] {
   background: rgba(var(--color-grey-50), 1);
   padding: var(--space-3x);
 }
 
 /* Inline code */
 :not(pre) > code[class*="language-"] {
   padding: 0 var(--space-1-2, 0);
   border-radius: var(--border-radius-m, 0);
   white-space: normal;
 }
 
 .token.comment,
 .token.prolog,
 .token.doctype,
 .token.cdata {
    color: rgba(var(--color-grey-300), 1);
    font-style: italic;
    opacity: 1;
 }
 
 .token.punctuation {
   color: rgba(var(--color-grey-400), 1);
 }
 
 .token.namespace {
   opacity: .7;
 }
 
 .token.property,
 .token.tag,
 .token.boolean,
 .token.number,
 .token.constant,
 .token.symbol,
 .token.deleted {
    color: rgba(var(--color-red-500), 1);
 }

 .token.constant {
  color: rgba(var(--color-yellow-500), 1);
}
 
 .token.selector,
 .token.attr-name,
 .token.string,
 .token.char,
 .token.builtin,
 .token.inserted {
   color: rgba(var(--color-cyan-500), 1);
 }

 .token.attr-name {
    color: rgba(var(--color-blue-500), 1);
 }
 
 .token.operator,
 .token.entity,
 .token.url,
 .language-css .token.string,
 .style .token.string {
   color: rgba(var(--color-grey-500), 1);
   background: transparent;
 }

 .token.operator {
  color: rgba(var(--color-purple-500), 1);
}
 
 .token.atrule,
 .token.keyword {
   color: rgba(var(--color-fushia-500), 1);
 }

 .token.attr-value {
   color: rgba(var(--color-cyan-500), 1);
 }
 
 .token.function,
 .token.class-name {
   color: rgba(var(--color-blue-500), 1);
 }
 
 .token.regex,
 .token.important,
 .token.variable {
   color: rgba(var(--color-yellow-500), 1);
 }
 
 .token.important,
 .token.bold {
   font-weight: var(--font-weight-700);
 }
 .token.italic {
   font-style: italic;
 }
 
 .token.entity {
   cursor: help;
 }
svg {
  vertical-align: middle;
}

/* use feathers icons as inline svg for icons */

.is-icon svg,
svg.is-icon {
  display: inline-block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2; 
  stroke-linecap: round;
  stroke-linejoin: round;
}
img {
  max-width: 100%;
  display: block;
}

figure {
  display: block;
  text-align: center;
  margin: 0;
}

figure img {
  margin: 0 auto;
}

figcaption {
  text-align: center;
  font-size: var(--font-size-40);
  padding: calc(var(--space) - 1px) 0 calc(var(--space-2x) + 1px);
}

picture {
  display: block;
}

picture img {
  margin: 0 auto;
}

picture svg {
  width: auto;
  height: auto;
  max-width: 100%;
  display: block;
}

/* Modifiers */

/* ratio */

/* 16/9 */
picture.is-16-9 {
  display: block;
  height: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 56.25%;
}

@supports (object-fit: cover) {
  picture.is-16-9 img {
    position: absolute;
    object-fit: cover;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* 3/2 */
picture.is-3-2 {
  display: block;
  height: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 66.66%;
}

@supports (object-fit: cover) {
  picture.is-3-2 img {
    position: absolute;
    object-fit: cover;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

/* square */
picture.is-1-1 {
  display: block;
  height: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-bottom: 100%;
}

@supports (object-fit: cover) {
  picture.is-1-1 img {
    position: absolute;
    object-fit: cover;
    left: 0;
    width: 100%;
    height: 100%;
  }
}

a:any-link {
  /* Selects any element that would be matched by :link or :visited */
  color: rgba(var(--color-grey-700, inherit), 1);
  text-decoration: underline;
}

a:any-link:hover {
  color: rgba(var(--color-grey-800), 1);
}

a:any-link > * + * {
  margin-left: var(--space);
  text-decoration: none;
}

/* external links */
a:any-link[target="_blank"] { 
  padding-right: 16px;
  position: relative;
  display: inline-block;
}

/* Arrow to signify external links */
a:any-link[target="_blank"]::after,
a:any-link[target="_blank"]::before {
  content: "";
  display: block;
  position: absolute;
  right: 0;
}

a:any-link[target="_blank"]::before {
  background: currentColor;
  transform: rotate(-45deg);
  top: 50%;
  height: 2px;
  width: 12px;
}

a:any-link[target="_blank"]::after {
  width: 8px;
  height: 8px;
  border-right: 2px solid;
  border-top: 2px solid;
  top: calc(50% - 5px);
  }

  
/**************************/ 
/* icon external link */
/**************************/ 

a:any-link.is-icon[target="_blank"] { /* external links */
  padding-right: 0;
}
  
/* Arrow to signify external links */
a:any-link.is-icon[target="_blank"]::after,
a:any-link.is-icon[target="_blank"]::before {
  content: none;
  background: none;
  width: 0;
  height: 0;
}

ul,
ol,
dl {
  margin: 0;
  padding: 6px 0 18px 24px;
}

ul ul,
ol ol,
ol ul {
  padding: 0 0 0 24px;
}

ul.is-nobullet {
  list-style-type: none;
  padding: 0;
}

dl {
  padding: 6px 0 18px 0;
}

dt {
  font-weight: var(--font-weight-700);
  color: rgba(var(--color-grey-700), 1);
}

dd {
  margin: 0;
}

dd + dt {
  margin-top: var(--space-3x)
}
/* audio video embed ... */
/* text selection */
::-moz-selection {
  background: rgba(var(--color-blue-100), 1);
  text-shadow: none;
}

::selection {
  background: rgba(var(--color-blue-100), 1);
  text-shadow: none;
}

/* paragraphs */

p {
  margin: 0;
  padding: calc(var(--space) + 1px) 0 calc(var(--space-3x) - 1px); /*  adjust baseline */
}

p.is-large {
  font-size: var(--font-size-60);
  line-height: var(--space-4x);
  padding: var(--space) 0 var(--space-3x); /*  adjust baseline */
}

/* headings */

h1,
.is-h1 {
  /* box */
  display: inline-block;
  margin: 0;
  padding: 12px 0 calc(var(--space-4x) -  12px);

  /* type */
  color: rgba(var(--color-grey-700), 1);
  font-size: var(--font-size-110);
  font-weight: 400;
  letter-spacing: -0.032em;
  line-height: var(--space-8x);
  text-transform: none;
}

h2,
.is-h2 {
  margin: 0;
  padding: calc(var(--space) + 6px) 0 calc(var(--space-3x) - 6px);

  /* type */
  color: rgba(var(--color-grey-700), 1);
  font-size: var(--font-size-100);
  font-weight: 400;
  letter-spacing: -0.05rem;
  line-height: var(--space-8x);
  text-transform: none;
}

* + h2,
* + .is-h2  {
  margin-top: var(--space-4x);
}

h3,
.is-h3 {
  margin: 0;
  padding: var(--space) 0 var(--space-3x);

  /* type */
  color: rgba(var(--color-grey-700), 1);
  font-size: var(--font-size-60);
  font-weight: 400;
  letter-spacing: 0;
  line-height: var(--space-4x);
  text-transform: none;
  
}

h4,
.is-h4 {
  margin: 0;
  padding: calc(var(--space-2x) - 6px) 0 calc(var(--space-2x) + 6px);

  /* type */
  color: rgba(var(--color-grey-400), 1);
  font-size: var(--font-size-40);
  letter-spacing: 0.1rem;
  line-height: var(--space-4x);
  text-transform: uppercase;
}

h4 + p { margin-top: -32px; }

strong {
  color: rgba(var(--color-grey-700), 1);
  font-weight: inherit;
}

small {
  font-size: var(--font-size-30);
  font-weight: 400;
  text-transform: none;
  color: rgba(var(--color-grey-400), 1);
}

hr {
  height: var(--space-4x);
  margin: 0;
  padding: var(--space-4x) 0 calc(var(--space-4x) - 1px);

  /* type */
  background: transparent;
  border: 0;
  box-shadow: 0 -1px 0 0 rgba(var(--color-grey-50), 1);
}

blockquote {
  margin: 0;
  padding: calc(var(--space-2x) - 8px) 0 calc(var(--space-2x) + 8px) calc(var(--space-2x) + 4px);
  border-left: calc(var(--space) / 2) solid rgba(var(--color-grey-100), 1);
  color: rgba(var(--color-grey-400), 1);
  
  /* type */
  color: rgba(var(--color-grey-500), 1);
  font-family: var(--font-serif);
  font-size: var(--font-size-70);
  font-style: italic;
  line-height: var(--space-4x);
}

blockquote q,
blockquote p {
  display: block;
  color: rgba(var(--color-red-500), 1);    
}

blockquote + * {
  margin-top: var(--space-4x);
}

blockquote * + * {
  margin-top: var(--space-4x);
}

cite {
  position: relative;
  display: inline-block;
  margin: 0;
  top: 0;
  font-size: var(--font-size-50);
  font-style: normal;
  line-height: 0;
}

sub,
sup {
  line-height: 0; /* prevent line height shift */
}

kbd {
  padding: 0 var(--space-1-2);
  background-color: rgba(var(--color-grey-50), 1);
  box-shadow: 
  0 0 0 1px rgba(var(--color-grey-300), 1),
  var(--box-shadow-m);
  border-radius: var(--space-1-2);

  /* type */
  color: rgba(var(--color-grey-700), 1);
  font-size: var(--font-size-40);
  line-height: var(--space-3x);
  white-space: nowrap;
  text-transform: uppercase;
  font-family: var(--font-mono);
  font-weight: 700;
}

q {
  font-style: italic;
}

cite {
  font-weight: var(--font-weight-700);
  font-style: normal;
}

p code,
p kbd,
p samp,
p small {
  line-height: 0;
}

mark {
  background-color: rgba(var(--color-yellow-200), 1);
  color: rgba(var(--color-yellow-600), 1);
}

details {
  display: block;
  background: rgba(var(--color-grey-35), 1);
  box-shadow: 0 0 0 1px rgba(var(--color-grey-50), 1) inset,
  var(--box-shadow-s);
  border-radius: var(--border-radius-m, 0);
  color: rgba(var(--color-grey-700), 1);
}

summary {
  outline: 0 none;
  padding: 6px var(--space-2x) 10px;
  cursor: pointer;

  &:focus {
    outline: 0 none;
    border: 0;
  }
}

details  p {
  margin-top: calc(var(--space) * 1);
  padding: 6px var(--space-2x) 18px;
}

p + details {
  margin-top: var(--space-3x);
}
/* components/alert.css */
[role="alert"] {
  display: flex;
  align-items: center;
  color: rgba(var(--color-grey-600), 1);
  background: rgba(var(--color-grey-50), 1);
  border-left: var(--space-1-2) solid  rgba(var(--color-grey-400), 1);
  border-radius: var(--border-radius-s, 0);
  box-shadow: var(--box-shadow-m);
  padding: calc(var(--space) * 1.5 ) var(--space-3x);
}

[role="alert"]:empty {
  display: none;
}

[role="alert"] a:any-link {
  color: inherit;
  text-decoration: underline;
}

[role="alert"] a:any-link:hover {
  color: rgba(var(--color-grey-800), 1);
}

[role="alert"] p {
  color: inherit;
  font-family: inherit;
  font-size: 1rem;
  padding: 0;
  max-width: none;
}

[role="alert"] + * {
  margin-top: var(--space-6x);
}

[role="alert"] > svg {
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-right: var(--space-3x);
  fill: none;
  stroke: currentColor;
  stroke-width: 2; 
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* style modifiers */

/* info */
[role="alert"].is-info {
  background: rgba(var(--color-blue-50), 1);
  color: rgba(var(--color-blue-600), 1);
  border-color: rgba(var(--color-blue-100), 1);
  border-left-color: rgba(var(--color-blue-400), 1);
}

[role="alert"].is-info :any-link:hover {
  color: rgba(var(--color-blue-700), 1);
}

[role="alert"].is-info > svg {
  stroke: rgba(var(--color-blue-500), 1);
}

/* success */
[role="alert"].is-success {
  background: rgba(var(--color-green-50), 1);
  color: rgba(var(--color-green-600), 1);
  border-color: rgba(var(--color-green-100), 1);
  border-left-color: rgba(var(--color-green-400), 1);
}

[role="alert"].is-success :any-link:hover {
  color: rgba(var(--color-green-700), 1);
}

[role="alert"].is-success > svg {
  stroke: rgba(var(--color-green-500), 1);
}

/* error */
[role="alert"].is-error {
  background: rgba(var(--color-red-50), 1);
  color: rgba(var(--color-red-600), 1);
  border-color: rgba(var(--color-red-100), 1);
  border-left-color: rgba(var(--color-red-400), 1);
}

[role="alert"].is-error  :any-link:hover {
  color: rgba(var(--color-red-700), 1);
}

[role="alert"].is-error > svg {
  stroke: rgba(var(--color-red-500), 1);
}

/* warning */
[role="alert"].is-warning {
  background: rgba(var(--color-yellow-50), 1);
  color: rgba(var(--color-yellow-600), 1);
  border-color: rgba(var(--color-yellow-100), 1);
  border-left-color: rgba(var(--color-yellow-400), 1);
}

[role="alert"].is-warning :any-link:hover {
  color: rgba(var(--color-yellow-700), 1);
}

[role="alert"].is-warning > svg {
  stroke: rgba(var(--color-yellow-500), 1);
}
  
/* flow */
* + [role="alert"] {
  margin-top: var(--space-3x);
}
/* components/badge.css */
.badge {
  display: inline-block;
  height: var(--space-2x);
  padding: 0 var(--space-1-2);
  position: relative;
  background: rgba(var(--color-grey-50), 1);
  border-radius: var(--border-radius-m, 0);
  box-shadow: var(--box-shadow-s);

  /* text */
  color: rgba(var(--color-grey-700), 1);
  font-size: var(--font-size-30);
  font-weight: var(--font-weight-400);
  line-height: var(--space-2x);
  text-decoration: none;
}

.badge > svg {
  width: 12px;
  height: 12px;
  min-width: 12px;
  margin: 2px;
  vertical-align: middle;
}

/* style modifiers */  
.badge.is-info {
  background: rgba(var(--color-blue-50), 1);
  color: rgba(var(--color-blue-700), 1);
}

.badge.is-success {
  background: rgba(var(--color-green-50), 1);
  color: rgba(var(--color-green-700), 1);
}

.badge.is-error {
  background: rgba(var(--color-red-50), 1);
  color: rgba(var(--color-red-700), 1);
}

.badge.is-warning {
  background: rgba(var(--color-yellow-50), 1);
  color: rgba(var(--color-yellow-700), 1);
}

body {
  padding: 0;
  margin: 0;
}

.width-limiter {
  max-width: 1312px;
  padding: 0 16px;
  margin: 0 auto;
}

body > [role="alert"] + header {
  margin-top: 0;
}

body > header {
  padding: 32px 0;
}

body > header .width-limiter {
  display: flex;
}

body > header nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}

body > header nav * {
  margin: 0 0 0 16px;
}

body > header nav .nav--desktop {
  display: none;
}

a:any-link.link,
a:any-link[target="_blank"].link {
  display: inline-block;
  font-size: var(--font-size-80);
  padding: calc(var(--space) - 4px) 0 calc(var(--space-3x) + 4px); /*  adjust baseline */
}

a:any-link[target="_blank"].link::before {
  content: none;
  position: relative;
}

a:any-link.link:after,
a:any-link[target="_blank"].link:after  {
  margin-left: 4px;
  display: inline-block;
  position: relative;
  content: "→";
  border: 0;
  transition: margin-left ease 0.3s;
}

a:any-link.link:hover:after,
a:any-link[target="_blank"]:hover:after {
  margin-left: 16px;
}

.logo {
  width: 64px;
  height: 64px;
  display: inline-block;
  fill: rgba(var(--color-grey-500), 1);
}

main {
  margin: var(--space-4x) auto 0;
  padding: 0;
}

article {
  max-width: 896px;
  background: rgba(var(--color-grey-00), 1);
  margin: 0 auto;
  padding: var(--space-12x) var(--space-2x);
  box-shadow: 0 0 0 1px rgba(var(--color-grey-50), 1);
}

article header time {
  font-size: var(--font-size-40);
  color: rgba(var(--color-grey-400), 1);
  font-style: normal;
  display: block;
  padding: calc(var(--space) + 2px) 0 calc(var(--space-3x) - 2px);
  margin-top: -32px;
}

article img {
  max-width: 100%;
  height: auto;
  margin: 32px 0;
}

body > footer {
  padding: 128px 0;
}

body > footer .width-limiter {
 display: flex;
 width: 100%
}

body > footer nav  {
  margin: 0 0 0 auto;
}

body > footer nav ul {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

body > footer nav ul li {
  padding: 0;
  margin: 0;
}

body > footer .icon-link {
  margin-left: 24px;
  color: rgba(var(--color-grey-400), 1);
}

body > footer .icon-link svg {
  width: 24px;
  height: 24px;
  fill: currentColor;
}

@media screen and (min-width: 720px) {
  body > header nav .nav--desktop {
    display: inline-block;
  }

  .width-limiter {
    padding: 0 32px;
  }

  article {
    padding: var(--space-12x) var(--space-8x);
  }
}
[role="alert"].is-centered p {
  margin: 0 auto;
}

.header-grid {
  padding: 64px 0 32px;
  hyphens: manual;
}

.header__text {
  padding: var(--space-4x) 0;
}

.header__text h2.is-large-p {
  margin: 0;
  color: inherit;
  letter-spacing: 0;
  font-size: var(--font-size-60);
  line-height: var(--space-4x);
  padding: var(--space) 0 var(--space-3x); /*  adjust baseline */ 
}

.header__text h2.is-large-p + h2.is-large-p {
  margin: -32px 0 64px;
}

@media screen and (min-width: 720px) {
  .bg-container {
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
   
  .bg-container .bg-col {
    box-shadow: 0 0 0 0.5px rgba(var(--color-grey-50), 1);
  }

  @media (prefers-color-scheme: dark) {
    .bg-container .bg-col {
      box-shadow: 0 0 0 0.5px rgba(var(--color-grey-50), 1);
    }
  }

  .header-grid {
    padding: 128px 0 96px;
    hyphens: none;
  }

  .header-grid .width-limiter {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 64px;
  }
}
.project {
  padding: 0;
  overflow: visible;
}

.project + .project {
  padding: 64px 0 0;
}

.project__screenshot { 
  padding: 0;
}

.project__screenshot img {
  box-shadow: var(--box-shadow-xl);
  width: 100%;
  height: auto;
}

.project__text {
  padding: 0 0 var(--space-12x);
  margin-top: 64px;
}

.project__icon {
  width: var(--space-12x);
  height: var(--space-12x);
  text-align: center;
  display: flex;
  padding: 0;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-4x);
  border-radius: 8px;
}

.project__icon svg {
  margin: 0;
  width: var(--space-6x);
  height: var(--space-6x);
  position: relative;
  background: transparent;
  fill: currentColor;
  vertical-align: center;
}

.project--rorvswild .project__icon {
  background: rgba(var(--color-grey-800), 1);
  color: rgba(var(--color-grey-100), 1);
}

.project--rorvswild .project__icon svg {
  background: rgba(var(--color-grey-800), 1);
  color: rgba(var(--color-grey-100), 1);
}

.project--sqily .project__icon {
  background: #2194d6;
  color: #fff;
}

.project--sqily .project__icon svg {
  background: #2194d6;
  color: #fff;
}

.project--heidi_news .project__icon svg {
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 720px) {
  .project__text {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 64px;
  }

  .project__icon {
    grid-column: 1 / span 1;
    grid-row: 1 / span 1;
  }

  .project__title {
    grid-column: 2 / span 1;
    grid-row: 1 / span 1;
  }
  
  .project__description {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
  }
}
.section--clients {
  background: rgba(var(--color-grey-50), 1);
  color:  rgba(var(--color-grey-700), 1);
  padding-top: var(--space-8x);
}

.section--clients .is-h1 {
  color: rgba(var(--color-grey-700), 1);
}

.section--clients p.is-large {
  margin-bottom: var(--space-8x);
}

.section--clients .header-grid {
  grid-row: 1 / span 1;
  grid-column: 1 / span 4;
}

.clients-list {
  grid-row: 2 / span 1;
  grid-column: 1 / span 4;
}

.clients-list__container {
  display: grid;
  grid-template-columns: repeat(auto-fill, 25%);
}

.client {
  text-align: center;
  padding: var(--space-2x);
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.client svg {
  width: var(--space-6x);
  height: var(--space-6x);
  vertical-align: center;
  text-align: center;
  margin: auto;
  display: block;
  fill: rgba(var(--color-grey-300), 1);
}

.client svg .text {
  fill: rgba(var(--color-grey-50), 1);
}

@media screen and (min-width: 720px) {
  .clients-list__container {
    grid-template-columns: repeat(auto-fill, 16.66%);
  }

  .client {
    padding: var(--space-4x);
  }

  .client svg {
    width: var(--space-8x);
    height: var(--space-8x);
  }
}
.section--opensource {
  padding-top: var(--space-8x);
  background-color:  rgba(var(--color-grey-20), 1);
  background-image: linear-gradient(rgba(var(--color-grey-50), 1) 1px, transparent 1px );
  background-size: 100% var(--space-4x);
  box-shadow: 0 -1px 0 0 rgba(var(--color-grey-100), 1);
}

.projects--opensource .project {
  box-shadow: 0 -1px 0 0 rgba(var(--color-grey-100), 1);
  margin: 0;
  padding: var(--space-4x) 0;
}

.projects--opensource .project p {
  padding: calc(var(--space) + 1px) 0 calc(var(--space-3x) - 1px);
}

.project--opensource__icon {
  margin-bottom: var(--space-4x);
}

.project--opensource__icon svg {
  padding: 0;
  width: var(--space-12x);
  height: var(--space-12x);
  fill: none;
  stroke: rgba(var(--color-grey-300), 1);
  stroke-width: 1;
}

@media screen and (min-width: 720px) {
  .projects--opensource .project {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 64px;
  }

  .project--opensource__title {
    grid-column: 1 / span 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 64px;
  }

  .projects--opensource .project--description {
    grid-column: 3 / span 2;
    grid-row: 1 / span 1;
  }

  .project--opensource__icon {
    grid-column: 1 / span 1;
  }
}

.section-about {
  padding:  var(--space-8x) 0 var(--space-12x);
  box-shadow: 0 1px 0 0 rgba(var(--color-grey-100), 1);
  background-color:  rgba(var(--color-grey-20), 1);
  background-image: linear-gradient(rgba(var(--color-grey-35), 1) 1px, transparent 1px );
  background-size: 100% var(--space-4x);
}

.section-about--team {
  box-shadow: 0 1px 0 0 rgba(var(--color-grey-100), 1);
  background-color:  rgba(var(--color-grey-50), 1);
  background-image: linear-gradient(rgba(var(--color-grey-100), 0.5) 1px, transparent 1px );
}

.team__member {
  padding:  var(--space-4x) 0;
}

.team__member .is-h4 {
  font-size:  var(--font-size-30);
  padding:  calc(var(--space-2x) - 5px) 0 calc(var(--space-2x) + 5px);
  margin-bottom: calc(var(--space-4x) * -1);
}

.about-card {
  box-shadow: 0 -1px 0 0 rgba(var(--color-grey-200), 1);
  margin: 0;
  padding: var(--space-4x) 0;
}

@media screen and (min-width: 720px) {
  .team {
    display: grid;
    grid-gap: 64px;
    grid-template-columns: 1fr  1fr;
  }

  .about-card {
    display: grid;
    grid-gap: 64px;
    grid-template-columns: 1fr  1fr;
  }
}