:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
}
@supports (font-variation-settings: normal) {
  :root { font-family: InterVariable, sans-serif; }
}

:root {
  --fontSize: 16px;
  --lineHeight: calc(var(--fontSize) * 1.2);
  --borderColor: #2E2E2E;
  --background-color: #000;
  --foreground-color-rgb: 241, 255, 255;
  --foreground-color-a: 0.9;
/* 
  --foreground-color-rgb: 255, 255, 255;
  --foreground-color-a: 1; */
  --hrThickness: 1px;
  --h4-size: 1.2rem;
  --columnGap: calc(var(--lineHeight) * 0.5);

  --listMarkerColor: #666;

  /* --rowGap: calc(var(--lineHeight) * 2); */
  /* filter: hue-rotate(180deg) hue-rotate(180deg); */
}

* {
  font-weight: 200;
  letter-spacing: 0 !important;
}

html{scroll-behavior:smooth}


body {
  padding: calc(var(--lineHeight) * 1);
}

@media only screen and (max-width: 719px) { /* window width <= 719 */
  :root { --fontSize: 14px; }
  body {
    padding: calc(var(--lineHeight) / 2);
  }
}



  b {
    font-weight: 300;
  }

  h1,
  h2 {
    font-weight: 200 !important;
  }

  h1.large {
    font-weight: 170 !important;
  }

  h2 {
    letter-spacing: 0.02em !important;
  }

  h3,
  h4,
  h5,
  h6 {
    font-weight: 200 !important;
  }

  h1.xlarge {
    font-weight: 200 !important;
    letter-spacing: -0 !important;
  }

  .underline { border-bottom: 1px solid var(--borderColor); }

  a {
    text-decoration: none;
    border-bottom: 1px solid var(--foreground-color);
  }

  h1 a,
  h2 a,
  h3 a,
  h4 a {
    text-decoration: none;
    border-bottom: none;
  }

  video,
  video:first-child,
  video:last-child {
    display: block;
    margin-top: var(--baseline);
    margin-bottom: var(--baseline);
  }

  video:only-child {
    margin: 0;
  }

  *+video {
    margin-top: calc(var(--baseline) * -1);
  }

  video.fill {
    -o-object-fit: fill;
    object-fit: fill;

  }
  video.cover {
    -o-object-fit: cover;
    object-fit: cover;
  }


  hr {
    background: var(--borderColor);
  }

  img {
    display:block;
    object-fit: contain;
    max-width: 100%;
  }


  img.fill { 
    -o-object-fit: fill; 
    object-fit: fill;
  }
  img.cover { -o-object-fit: cover; object-fit: cover }

  video.top {
    -o-object-position: center top;
    object-position: center top;
    align-self: center
  }

  video.center {
    -o-object-position: center center;
    object-position: center center;
    align-self: center
  }

  video.bottom {
    -o-object-position: center bottom;
    object-position: center bottom;
    align-self: center
  }

  video.left.top {
    -o-object-position: left top;
    object-position: left top;
    align-self: flex-start
  }

  video.left.center {
    -o-object-position: left center;
    object-position: left center;
    align-self: flex-start
  }

  video.left.bottom {
    -o-object-position: left bottom;
    object-position: left bottom;
    align-self: flex-start
  }

  video.right.top {
    -o-object-position: right top;
    object-position: right top;
    align-self: flex-end
  }

  video.right.center {
    -o-object-position: right center;
    object-position: right center;
    align-self: flex-end
  }

  video.right.bottom {
    -o-object-position: right bottom;
    object-position: right bottom;
    align-self: flex-end
  }

  .column-gap-0 { column-gap: 0; }
  .column-gap-1 { column-gap: calc(var(--columnGap)); }
  .column-gap-2 { column-gap: calc(var(--columnGap) / 2); }
  .column-gap-4 { column-gap: calc(var(--columnGap) / 4); }
  .column-gap-8 { column-gap: calc(var(--columnGap) / 8); }
  .column-gap-16 { column-gap: calc(var(--columnGap) / 16); }

  
  .column-gap-x2 { column-gap: calc(var(--columnGap) * 2); }
  .column-gap-x3 { column-gap: calc(var(--columnGap) * 3); }
  .column-gap-x4 { column-gap: calc(var(--columnGap) * 4); }
  .column-gap-x8 { column-gap: calc(var(--columnGap) * 8); }
  .column-gap-x16 { column-gap: calc(var(--columnGap) * 16); }


  .row-gap-0 { row-gap: 0; }
  .row-gap-1 { row-gap: calc(var(--rowGap)); }
  .row-gap-2 { row-gap: calc(var(--rowGap) / 2); }
  .row-gap-4 { row-gap: calc(var(--rowGap) / 4); }
  .row-gap-8 { row-gap: calc(var(--rowGap) / 8); }
  .row-gap-16 { row-gap: calc(var(--rowGap) / 16); }


  .row-gap-x2 { row-gap: calc(var(--rowGap) * 2); }
  .row-gap-x3 { row-gap: calc(var(--rowGap) * 3); }
  .row-gap-x4 { row-gap: calc(var(--rowGap) * 4); }
  .row-gap-x5 { row-gap: calc(var(--rowGap) * 5); }
  .row-gap-x6 { row-gap: calc(var(--rowGap) * 6); }
  .row-gap-x7 { row-gap: calc(var(--rowGap) * 7); }
  .row-gap-x8 { row-gap: calc(var(--rowGap) * 8); }
  .row-gap-x16 { row-gap: calc(var(--rowGap) * 16); }

  
  .gap-0 { gap: 0; }
  .gap-1 { gap: calc(var(--columnGap)); }
  .gap-2 { gap: calc(var(--columnGap) / 2); }
  .gap-4 { gap: calc(var(--columnGap) / 4); }
  .gap-8 { gap: calc(var(--columnGap) / 8); }
  .gap-16 { gap: calc(var(--columnGap) / 16); }

  .gap-x2 { gap: calc(var(--rowGap) * 2); }
  .gap-x3 { gap: calc(var(--rowGap) * 3); }
  .gap-x4 { gap: calc(var(--rowGap) * 4); }
  .gap-x5 { gap: calc(var(--rowGap) * 5); }
  .gap-x6 { gap: calc(var(--rowGap) * 6); }
  .gap-x7 { gap: calc(var(--rowGap) * 7); }
  .gap-x8 { gap: calc(var(--rowGap) * 8); }
  .gap-x16 { gap: calc(var(--rowGap) * 16); }


  .w-auto {
    width: auto;
  }

  .min-w-1 { min-width: calc(var(--lineHeight) * 1) }
  .min-w-2 { min-width: calc(var(--lineHeight) * 2) }
  .min-w-3 { min-width: calc(var(--lineHeight) * 3) }
  .min-w-4 { min-width: calc(var(--lineHeight) * 4) }
  .min-w-5 { min-width: calc(var(--lineHeight) * 5) }
  .min-w-6 { min-width: calc(var(--lineHeight) * 6) }
  .min-w-7 { min-width: calc(var(--lineHeight) * 7) }
  .min-w-8 { min-width: calc(var(--lineHeight) * 8) }
  .min-w-9 { min-width: calc(var(--lineHeight) * 9) }
  .min-w-10 { min-width: calc(var(--lineHeight) * 10) }
  .min-w-11 { min-width: calc(var(--lineHeight) * 11) }
  .min-w-12 { min-width: calc(var(--lineHeight) * 12) }
  .min-w-13 { min-width: calc(var(--lineHeight) * 13) }
  .min-w-14 { min-width: calc(var(--lineHeight) * 14) }
  .min-w-15 { min-width: calc(var(--lineHeight) * 15) }
  .min-w-16 { min-width: calc(var(--lineHeight) * 16) }
  .min-w-17 { min-width: calc(var(--lineHeight) * 17) }
  .min-w-18 { min-width: calc(var(--lineHeight) * 18) }
  .min-w-19 { min-width: calc(var(--lineHeight) * 19) }
  .min-w-20 { min-width: calc(var(--lineHeight) * 20) }
  .min-w-21 { min-width: calc(var(--lineHeight) * 21) }
  .min-w-22 { min-width: calc(var(--lineHeight) * 22) }
  .min-w-23 { min-width: calc(var(--lineHeight) * 23) }
  .min-w-24 { min-width: calc(var(--lineHeight) * 24) }
  .min-w-25 { min-width: calc(var(--lineHeight) * 25) }
  .min-w-26 { min-width: calc(var(--lineHeight) * 26) }
  .min-w-27 { min-width: calc(var(--lineHeight) * 27) }
  .min-w-28 { min-width: calc(var(--lineHeight) * 28) }
  .min-w-29 { min-width: calc(var(--lineHeight) * 29) }
  .min-w-30 { min-width: calc(var(--lineHeight) * 30) }
  .min-w-31 { min-width: calc(var(--lineHeight) * 31) }
  .min-w-32 { min-width: calc(var(--lineHeight) * 32) }
  .min-w-33 { min-width: calc(var(--lineHeight) * 33) }
  .min-w-34 { min-width: calc(var(--lineHeight) * 34) }
  .min-w-35 { min-width: calc(var(--lineHeight) * 35) }
  .min-w-36 { min-width: calc(var(--lineHeight) * 36) }
  .min-w-37 { min-width: calc(var(--lineHeight) * 37) }
  .min-w-38 { min-width: calc(var(--lineHeight) * 38) }
  .min-w-39 { min-width: calc(var(--lineHeight) * 39) }
  .min-w-40 { min-width: calc(var(--lineHeight) * 40) }
  .min-w-full { min-width: 100%; }

  .max-w-1 { max-width: calc(var(--lineHeight) * 1) }
  .max-w-2 { max-width: calc(var(--lineHeight) * 2) }
  .max-w-3 { max-width: calc(var(--lineHeight) * 3) }
  .max-w-4 { max-width: calc(var(--lineHeight) * 4) }
  .max-w-5 { max-width: calc(var(--lineHeight) * 5) }
  .max-w-6 { max-width: calc(var(--lineHeight) * 6) }
  .max-w-7 { max-width: calc(var(--lineHeight) * 7) }
  .max-w-8 { max-width: calc(var(--lineHeight) * 8) }
  .max-w-9 { max-width: calc(var(--lineHeight) * 9) }
  .max-w-10 { max-width: calc(var(--lineHeight) * 10) }
  .max-w-11 { max-width: calc(var(--lineHeight) * 11) }
  .max-w-12 { max-width: calc(var(--lineHeight) * 12) }
  .max-w-13 { max-width: calc(var(--lineHeight) * 13) }
  .max-w-14 { max-width: calc(var(--lineHeight) * 14) }
  .max-w-15 { max-width: calc(var(--lineHeight) * 15) }
  .max-w-16 { max-width: calc(var(--lineHeight) * 16) }
  .max-w-17 { max-width: calc(var(--lineHeight) * 17) }
  .max-w-18 { max-width: calc(var(--lineHeight) * 18) }
  .max-w-19 { max-width: calc(var(--lineHeight) * 19) }
  .max-w-20 { max-width: calc(var(--lineHeight) * 20) }
  .max-w-21 { max-width: calc(var(--lineHeight) * 21) }
  .max-w-22 { max-width: calc(var(--lineHeight) * 22) }
  .max-w-23 { max-width: calc(var(--lineHeight) * 23) }
  .max-w-24 { max-width: calc(var(--lineHeight) * 24) }
  .max-w-25 { max-width: calc(var(--lineHeight) * 25) }
  .max-w-26 { max-width: calc(var(--lineHeight) * 26) }
  .max-w-27 { max-width: calc(var(--lineHeight) * 27) }
  .max-w-28 { max-width: calc(var(--lineHeight) * 28) }
  .max-w-29 { max-width: calc(var(--lineHeight) * 29) }
  .max-w-30 { max-width: calc(var(--lineHeight) * 30) }
  .max-w-31 { max-width: calc(var(--lineHeight) * 31) }
  .max-w-32 { max-width: calc(var(--lineHeight) * 32) }
  .max-w-33 { max-width: calc(var(--lineHeight) * 33) }
  .max-w-34 { max-width: calc(var(--lineHeight) * 34) }
  .max-w-35 { max-width: calc(var(--lineHeight) * 35) }
  .max-w-36 { max-width: calc(var(--lineHeight) * 36) }
  .max-w-37 { max-width: calc(var(--lineHeight) * 37) }
  .max-w-38 { max-width: calc(var(--lineHeight) * 38) }
  .max-w-39 { max-width: calc(var(--lineHeight) * 39) }
  .max-w-40 { max-width: calc(var(--lineHeight) * 40) }
  .max-w-full { max-width: 100%; }


  .h-auto {
    height: auto;
  }
  .h-full {
    height: 100%;
  }


  .h-10dvh { height: 10dvh; }
  .h-20dvh { height: 20dvh; }
  .h-30dvh { height: 30dvh; }
  .h-40dvh { height: 40dvh; }
  .h-50dvh { height: 50dvh; }
  .h-60dvh { height: 60dvh; }
  .h-70dvh { height: 70dvh; }
  .h-80dvh { height: 80dvh; }
  .h-90dvh { height: 90dvh; }
  .h-100dvh { height: 100dvh; }

  .min-h-1 { min-height: calc(var(--lineHeight) * 1) }
  .min-h-2 { min-height: calc(var(--lineHeight) * 2) }
  .min-h-3 { min-height: calc(var(--lineHeight) * 3) }
  .min-h-4 { min-height: calc(var(--lineHeight) * 4) }
  .min-h-5 { min-height: calc(var(--lineHeight) * 5) }
  .min-h-6 { min-height: calc(var(--lineHeight) * 6) }
  .min-h-7 { min-height: calc(var(--lineHeight) * 7) }
  .min-h-8 { min-height: calc(var(--lineHeight) * 8) }
  .min-h-9 { min-height: calc(var(--lineHeight) * 9) }
  .min-h-10 { min-height: calc(var(--lineHeight) * 10) }
  .min-h-11 { min-height: calc(var(--lineHeight) * 11) }
  .min-h-12 { min-height: calc(var(--lineHeight) * 12) }
  .min-h-13 { min-height: calc(var(--lineHeight) * 13) }
  .min-h-14 { min-height: calc(var(--lineHeight) * 14) }
  .min-h-15 { min-height: calc(var(--lineHeight) * 15) }
  .min-h-16 { min-height: calc(var(--lineHeight) * 16) }
  .min-h-17 { min-height: calc(var(--lineHeight) * 17) }
  .min-h-18 { min-height: calc(var(--lineHeight) * 18) }
  .min-h-19 { min-height: calc(var(--lineHeight) * 19) }
  .min-h-20 { min-height: calc(var(--lineHeight) * 20) }
  .min-h-21 { min-height: calc(var(--lineHeight) * 21) }
  .min-h-22 { min-height: calc(var(--lineHeight) * 22) }
  .min-h-23 { min-height: calc(var(--lineHeight) * 23) }
  .min-h-24 { min-height: calc(var(--lineHeight) * 24) }
  .min-h-25 { min-height: calc(var(--lineHeight) * 25) }
  .min-h-26 { min-height: calc(var(--lineHeight) * 26) }
  .min-h-27 { min-height: calc(var(--lineHeight) * 27) }
  .min-h-28 { min-height: calc(var(--lineHeight) * 28) }
  .min-h-29 { min-height: calc(var(--lineHeight) * 29) }
  .min-h-30 { min-height: calc(var(--lineHeight) * 30) }
  .min-h-31 { min-height: calc(var(--lineHeight) * 31) }
  .min-h-32 { min-height: calc(var(--lineHeight) * 32) }
  .min-h-33 { min-height: calc(var(--lineHeight) * 33) }
  .min-h-34 { min-height: calc(var(--lineHeight) * 34) }
  .min-h-35 { min-height: calc(var(--lineHeight) * 35) }
  .min-h-36 { min-height: calc(var(--lineHeight) * 36) }
  .min-h-37 { min-height: calc(var(--lineHeight) * 37) }
  .min-h-38 { min-height: calc(var(--lineHeight) * 38) }
  .min-h-39 { min-height: calc(var(--lineHeight) * 39) }
  .min-h-40 { min-height: calc(var(--lineHeight) * 40) }
  .min-h-full { min-height: 100%; }

  .min-h-20dvh { min-height: 100dvh; }
  .min-h-30dvh { min-height: 30dvh; }
  .min-h-40dvh { min-height: 100dvh; }
  .min-h-50dvh { min-height: 100dvh; }
  .min-h-80dvh { min-height: 80dvh; }
  .min-h-100dvh { min-height: 100dvh; }

  .max-h-1 { max-height: calc(var(--lineHeight) * 1) }
  .max-h-2 { max-height: calc(var(--lineHeight) * 2) }
  .max-h-3 { max-height: calc(var(--lineHeight) * 3) }
  .max-h-4 { max-height: calc(var(--lineHeight) * 4) }
  .max-h-5 { max-height: calc(var(--lineHeight) * 5) }
  .max-h-6 { max-height: calc(var(--lineHeight) * 6) }
  .max-h-7 { max-height: calc(var(--lineHeight) * 7) }
  .max-h-8 { max-height: calc(var(--lineHeight) * 8) }
  .max-h-9 { max-height: calc(var(--lineHeight) * 9) }
  .max-h-10 { max-height: calc(var(--lineHeight) * 10) }
  .max-h-11 { max-height: calc(var(--lineHeight) * 11) }
  .max-h-12 { max-height: calc(var(--lineHeight) * 12) }
  .max-h-13 { max-height: calc(var(--lineHeight) * 13) }
  .max-h-14 { max-height: calc(var(--lineHeight) * 14) }
  .max-h-15 { max-height: calc(var(--lineHeight) * 15) }
  .max-h-16 { max-height: calc(var(--lineHeight) * 16) }
  .max-h-17 { max-height: calc(var(--lineHeight) * 17) }
  .max-h-18 { max-height: calc(var(--lineHeight) * 18) }
  .max-h-19 { max-height: calc(var(--lineHeight) * 19) }
  .max-h-20 { max-height: calc(var(--lineHeight) * 20) }
  .max-h-21 { max-height: calc(var(--lineHeight) * 21) }
  .max-h-22 { max-height: calc(var(--lineHeight) * 22) }
  .max-h-23 { max-height: calc(var(--lineHeight) * 23) }
  .max-h-24 { max-height: calc(var(--lineHeight) * 24) }
  .max-h-25 { max-height: calc(var(--lineHeight) * 25) }
  .max-h-26 { max-height: calc(var(--lineHeight) * 26) }
  .max-h-27 { max-height: calc(var(--lineHeight) * 27) }
  .max-h-28 { max-height: calc(var(--lineHeight) * 28) }
  .max-h-29 { max-height: calc(var(--lineHeight) * 29) }
  .max-h-30 { max-height: calc(var(--lineHeight) * 30) }
  .max-h-31 { max-height: calc(var(--lineHeight) * 31) }
  .max-h-32 { max-height: calc(var(--lineHeight) * 32) }
  .max-h-33 { max-height: calc(var(--lineHeight) * 33) }
  .max-h-34 { max-height: calc(var(--lineHeight) * 34) }
  .max-h-35 { max-height: calc(var(--lineHeight) * 35) }
  .max-h-36 { max-height: calc(var(--lineHeight) * 36) }
  .max-h-37 { max-height: calc(var(--lineHeight) * 37) }
  .max-h-38 { max-height: calc(var(--lineHeight) * 38) }
  .max-h-39 { max-height: calc(var(--lineHeight) * 39) }
  .max-h-40 { max-height: calc(var(--lineHeight) * 40) }
  .max-h-full { max-height: 100%; }

  input,
  button,
  select,
  textarea {
    border: 1px solid var(--borderColor);
    border-radius: 0;
    height: var(--lineHeight);
    width: 100%;
    background-color: inherit;
    color: inherit;
    outline: none;
  }

  input[type=button], input[type=submit], button:hover { 
    cursor: pointer;
  }

  button:active { 
    opacity: 0.3;
  }

  input:hover, select:hover {
    border: 1px solid var(--foreground-color);
  }

  input:active, select:active { 
    border: 1px solid var(--borderColor);
  } 

  form input,
  form select {
    margin-bottom: var(--lineHeight);
  }

  
  select:invalid { 
    color: color-mix(in srgb, var(--foreground-color) 20%, transparent);
  }

  form:last-child {
    margin-bottom: 0;
  }

  form.compact input,
  form.compact select {
    margin-bottom: calc(var(--lineHeight) * 0.5);
  }

  form textarea {
    display: block;
    width: 100%;
    height: auto;
  }

  ul.on-margin,
  ol.on-margin {
    margin-left: calc(-1 * var(--list-indentation));
  }

  ul.on-margin li,
  ol.on-margin li {
    margin-left: 0;
  }

  @media only screen and (max-width: 600px) {
    ul.on-margin,
    ol.on-margin {
      margin-left: var(--lineHeight);
    }

    ul.on-margin li,
    ol.on-margin li {
      margin-left: 0;
    }
  }

  /*overwrite raster*/
  /* ol:not([start])>li::before {
    content: counter(ol-counter) ". ";
    font-weight: inherit;
    font-variant-numeric: tabular-nums;
    position: absolute;
    --space: 0.5em;
    --width: calc(var(--list-indentation) - var(--space));
    left: calc(-1 * calc(var(--width) + var(--space)));
    width: var(--width);
    height: var(--lineHeight);
    text-align: right;
    color: var(--foreground-color);
    opacity: 0.35;
  } */

  ul.unstyled, ol.unstyled {
    list-style-type: none;
    padding-left: 0;
  }

  .unstyled > li, .unstyled > li {
    margin-left: 0;
  }

  /* pre, */
  code,
  tt,
  .code,
  .monospace {
    font-family: var(--monoFont), monospace;
    border: 1px solid var(--borderColor);
    font-weight: inherit;
    padding-left: calc(var(--fontSize) * 0.125);
    padding-right: calc(var(--fontSize) * 0.125);
  }

  .border {
    box-shadow: inset 0 0 0 1px var(--borderColor);
  }

  .borderless {
    box-shadow: none;
    border: none;
  }


  .padding5 { padding: calc(var(--lineHeight) * 5) }
  .padding6 { padding: calc(var(--lineHeight) * 6) }
  .padding7 { padding: calc(var(--lineHeight) * 7) }
  .padding8 { padding: calc(var(--lineHeight) * 8) }

  
  .p-1 { padding: calc(var(--lineHeight)); }
  .p-2 { padding: calc(var(--lineHeight) / 2); }
  .p-4 { padding: calc(var(--lineHeight) / 4); }
  .p-8 { padding: calc(var(--lineHeight) / 8); }
  .p-16 { padding: calc(var(--lineHeight) / 16); }
  
  .p-1px { padding: 1px; }
  .p-2px { padding: 2px; }

  .p-h-0 { padding: 0 0 }
  .p-h-2 { padding: 0 calc(var(--lineHeight) / 2); }
  .p-h-4 { padding: 0 calc(var(--lineHeight) / 4); }
  .p-h-8 { padding: 0 calc(var(--lineHeight) / 8); }
  .p-h-16 { padding: 0 calc(var(--lineHeight) / 16); }

  
  .p-h-1px { padding: 0 1px; }

  
  .p-v-0 { padding: 0 0 }
  .p-v-2 { padding: calc(var(--lineHeight) / 2) 0; }
  .p-v-4 { padding: calc(var(--lineHeight) / 4) 0; }
  .p-v-8 { padding: calc(var(--lineHeight) / 8) 0; }
  .p-v-16 { padding: calc(var(--lineHeight) / 16) 0; }

  .p-b-0 { padding-bottom: 0; }
  .p-b-2 { padding-bottom: calc(var(--lineHeight) / 2); }
  .p-b-4 { padding-bottom: calc(var(--lineHeight) / 4); }
  .p-b-8 { padding-bottom: calc(var(--lineHeight) / 8); }
  .p-b-16 { padding-bottom: calc(var(--lineHeight) / 16); }


  .p-t-0 { padding-top: 0; }
  .p-t-1 { padding-top: calc(var(--lineHeight)) !important; }

  
  .m-0 { margin: 0px !important; }
  .m-1px { margin: 1px !important; }
  .m-2px { margin: 2px !important; }

  
  .m-h-1 { margin: 0px calc(var(--lineHeight)) !important; }
  
  .m-t-0 { margin-top: 0px !important; }

  .m-t-1 { margin-top: calc(var(--lineHeight)) !important; }


  .m-t-2 { margin-top: calc(var(--lineHeight) / 2) !important; }
  .m-t-3 { margin-top: calc(var(--lineHeight) / 3) !important; }
  .m-t-4 { margin-top: calc(var(--lineHeight) / 4) !important; }
  .m-t-5 { margin-top: calc(var(--lineHeight) / 5) !important; }
  .m-t-6 { margin-top: calc(var(--lineHeight) / 6) !important; }
  .m-t-7 { margin-top: calc(var(--lineHeight) / 7) !important; }
  .m-t-8 { margin-top: calc(var(--lineHeight) / 8) !important; }
  .m-t-9 { margin-top: calc(var(--lineHeight) / 9) !important; }
  .m-t-10 { margin-top: calc(var(--lineHeight) / 10) !important; }
  .m-t-11 { margin-top: calc(var(--lineHeight) / 11) !important; }
  .m-t-12 { margin-top: calc(var(--lineHeight) / 12) !important; }
  .m-t-13 { margin-top: calc(var(--lineHeight) / 13) !important; }
  .m-t-14 { margin-top: calc(var(--lineHeight) / 14) !important; }

  .m-t-x2 { margin-top: calc(var(--lineHeight) * 2) !important; }
  .m-t-x3 { margin-top: calc(var(--lineHeight) * 3) !important; }
  .m-t-x4 { margin-top: calc(var(--lineHeight) * 4) !important; }
  .m-t-x5 { margin-top: calc(var(--lineHeight) * 5) !important; }
  .m-t-x6 { margin-top: calc(var(--lineHeight) * 6) !important; }
  .m-t-x7 { margin-top: calc(var(--lineHeight) * 7) !important; }
  .m-t-x8 { margin-top: calc(var(--lineHeight) * 8) !important; }
  .m-t-x9 { margin-top: calc(var(--lineHeight) * 9) !important; }
  .m-t-x10 { margin-top: calc(var(--lineHeight) * 10) !important; }
  .m-t-x11 { margin-top: calc(var(--lineHeight) * 11) !important; }
  .m-t-x12 { margin-top: calc(var(--lineHeight) * 12) !important; }
  .m-t-x13 { margin-top: calc(var(--lineHeight) * 13) !important; }
  .m-t-x14 { margin-top: calc(var(--lineHeight) * 14) !important; }

  .m-t-x20 { margin-top: calc(var(--lineHeight) * 20) !important; }

  
  .m-t-1px { margin: 1px !important; }


  .m-v-0 { margin: 0 0 !important; }
  .m-v-1 { margin: calc(var(--lineHeight)) 0 !important; }
  .m-v-2 { margin: calc(var(--lineHeight) / 2) 0 !important; }
  .m-v-4 { margin: calc(var(--lineHeight) / 4) 0 !important; }
  .m-v-8 { margin: calc(var(--lineHeight) / 8) 0 !important; }
  .m-v-16 { margin: calc(var(--lineHeight) / 16) 0 !important; }


  .m-v-x1 { margin: calc(var(--lineHeight)) 0 !important; }
  .m-v-x2 { margin: calc(var(--lineHeight) * 2) 0 !important; }
  .m-v-x3 { margin: calc(var(--lineHeight) * 3) 0 !important; }
  .m-v-x4 { margin: calc(var(--lineHeight) * 4) 0 !important; }
  .m-v-x5 { margin: calc(var(--lineHeight) * 5) 0 !important; }
  .m-v-x6 { margin: calc(var(--lineHeight) * 6) 0 !important; }
  .m-v-x7 { margin: calc(var(--lineHeight) * 7) 0 !important; }
  .m-v-x8 { margin: calc(var(--lineHeight) * 8) 0 !important; }
  .m-v-x9 { margin: calc(var(--lineHeight) * 9) 0 !important; }
  .m-v-x10 { margin: calc(var(--lineHeight) * 10) 0 !important; }
  .m-v-x11 { margin: calc(var(--lineHeight) * 11) 0 !important; }
  .m-v-x12 { margin: calc(var(--lineHeight) * 12) 0 !important; }

  .m-b-0 { margin-bottom: 0 !important; }
  .m-b-1 { margin-bottom: calc(var(--lineHeight)) !important; }
  .m-b-2 { margin-bottom: calc(var(--lineHeight) / 2) !important; }
  .m-b-4 { margin-bottom: calc(var(--lineHeight) / 4) !important; }
  .m-b-8 { margin-bottom: calc(var(--lineHeight) / 8) !important; }
  .m-b-16 { margin-bottom: calc(var(--lineHeight) / 16) !important; }

  .m-b-x2 { margin-bottom: calc(var(--lineHeight) * 2) !important; }
  .m-b-x3 { margin-bottom: calc(var(--lineHeight) * 3) !important; }
  .m-b-x4 { margin-bottom: calc(var(--lineHeight) * 4) !important; }
  .m-b-x5 { margin-bottom: calc(var(--lineHeight) * 5) !important; }
  .m-b-x6 { margin-bottom: calc(var(--lineHeight) * 6) !important; }
  .m-b-x7 { margin-bottom: calc(var(--lineHeight) * 7) !important; }
  .m-b-x8 { margin-bottom: calc(var(--lineHeight) * 8) !important; }


  .m-b-10dvh { margin-bottom: 10dvh !important; }
  .m-b-20dvh { margin-bottom: 20dvh !important; }
  .m-b-30dvh { margin-bottom: 30dvh !important; }
  .m-b-40dvh { margin-bottom: 40dvh !important; }
  

  .bg-red {
    background-color: #D32D1F;
  }

  .bg {
    background-color: var(--background-color);
  }

  .color-foreground {
    color: var(--foreground-color);
  }

  .color-background {
    color: var(--background-color);
  }

  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-center {
    text-align: center;
  }

  .vertical-center {
    vertical-align:middle;
  }

  .hidden { 
    display: none !important;
  }

  .hyphenated-word-break {
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .svg-stretch {
    object-fit: fill;
    min-width: 100%;
    min-height: 100%;
    max-width: 100%;
    max-height: 100%;
  }
  

.column-flow-dense {
    grid-auto-flow: column dense;
}


.row-flow-dense {
    grid-auto-flow: row dense;
}


.float-right {
  float:right;
}

.invert {
  filter: invert(1);
}

.contrast1 {
  filter: contrast(1);
}

.sticky {
  position: sticky;
  top:0;
}

nav a {
  border: none;
}

.undecorated { 
  border: none;
  text-decoration: none;
}

.flex-h > .center-items, 
.flex-h.center-items,
.flex-v > .center-items, 
.flex-v.center-items {
  align-items: center;
}

.flex-grow {
  flex-grow: 1;
}



.align-end {
  align-content: end;
}
.align-items-center {
  align-items: center;
}
.align-items-end {
  align-items: end;
}

.align-self-center {
  align-self: center;
}
.align-self-end {
  align-self: end;
}


summary::before {
  content: "+";
  margin-right: calc(var(--lineHeight));
  font-family: var(--monoFont);
  /* font-size: var(--lineHeight); */
}

summary[-data-marker-closed]::before {
  content: attr(-data-marker-closed);
}

summary:hover {
  background-color: blue;
  color: var(--foreground-color);
  cursor:pointer;
}



details[open] > summary::before {
  content: "–";
  margin-right: calc(var(--lineHeight));
  font-family: var(--monoFont);
  /* font-size: var(--lineHeight); */
}

details[open] > summary[-data-marker-open]::before {
  content: attr(-data-marker-open);
}

details > * {
  display: inline-block;
}

button:hover {
  background-color: blue;
  color: var(--foreground-color);
}

a:hover {
  background-color: blue;
  color: var(--foreground-color);
}
a {
  border: none;
  text-decoration: none;
}

code {
  font-weight: 100;
}

.font-thin	      {font-weight: 100 !important;}
.font-extralight	{font-weight: 200 !important;}
.font-light	      {font-weight: 300 !important;}
.font-normal	    {font-weight: 400 !important;}
.font-medium	    {font-weight: 500 !important;}
.font-semibold	  {font-weight: 600 !important;}
.font-bold	      {font-weight: 700 !important;}
.font-extrabold	  {font-weight: 800 !important;}
.font-black	      {font-weight: 900 !important;}

form.compact input,
form.compact select {
  margin-bottom: calc(var(--lineHeight) * 0.5);
}

input, button, select {
  border: 1px solid var(--borderColor);
  border-radius: 0;
  height: calc(var(--lineHeight) * 1.5);
  width: 100%;
  background-color: inherit;
  color: inherit;
  outline: none;
}



form.compact input,
form.compact select {
margin-bottom: calc(var(--lineHeight) * 0.5);
}

input, button, select {
border: 1px solid var(--borderColor);
border-radius: 0;
height: calc(var(--lineHeight) * 1.5);
width: 100%;
background-color: inherit;
color: inherit;
outline: none;
box-sizing: border-box;
}
/* 
li {
  margin-bottom: var(--lineHeight);
} */

button.small {
  height: var(--lineHeight);
}



a.disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.5;
}

header.sticky nav {
  background: var(--background-color);  
}
header {
  z-index: 999;
}

.overflow-clip {
  overflow: clip;
}

.overflow-x-clip {
  overflow-x: clip;
}

.overflow-y-clip {
  overflow-y: clip;
}

.items-align-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.uppercase {
  text-transform: uppercase;
}


.sticky.bottom {
  position:sticky;
  bottom:0;
  background-color: var(--background-color);
}

.greyscale {
  filter: grayscale();
}


.greyscale80 {
  filter: grayscale(0.8);
}

.flex {
  display: flex;
}


ol > li::marker {
  font-size: 0.85rem;
}

.text-black {
  color: black;
}