/*

  panphora.css

  make html look nice by default 

  rules:
  - no layout styles
  - nice buttons! (most important)
  - headings resize for tablet/mobile
  - use a nice font :)
  - no dark mode (for now)

*/


:root {
  --main-bg: #ffefd5;

  /* 

    grays: form controls, tables 

  */
  --color-primary-text: #111827;
  /* pre scrollbar dash */
  --color-secondary-border: #e1bd84;
  /* .e, .secondary-area */
  --color-light-bg: #f1f5f9;

  /* 

    tables

  */
  --table-border: #d3aa66;
  --table-header: #f8e0b8;

  /*

    highlights 

  */
  --highlight-bg: #fe8ae7;
  --highlight-border: #111827;
  --light-transparency: #f9dfb4;

  /*

    code

  */
  --code-bg: #ffe0af;
  --pre-scrollbar-thumb: #826E50;

  /* 

    links 

  */
  --color-anchor-primary: #eb25c4;
  --color-anchor-hover: #135DFC;

  /* 

    buttons 

  */
  --color-button-default-bg: #F3C1FF;
  --color-button-hover-default-bg: #EEABFE;
  --color-button-secondary-bg: #D6EBF7;
  --color-button-hover-secondary-bg: #BFE0F3;
  --button-border: #111827;

  /*

    inputs

  */

  --input-bg: #ffffff;
  --input-border: #988058;
  --input-active-outline: 2px solid #2563eb;

  /* 

    areas 

  */
  --area-bg: #ffeaaf;
  --area-code-bg: #FFE167;
  --area-highlight-bg: #e68dfc;
  --area-highlight-border: #111827;
  --area-button-code-bg: #e7a2f8;
  --area-input-bg: #fcf2d5;
  --area-u-background: #fcf2d5;

  --secondary-area-code-bg: #f4e3c7;
  --secondary-area-u-background: #fcf0de;

  /* 

    light bg

  */
  --light-bg-mark-bg: #f5afff;

  /*

    other / special

  */
  --details-bg: #ffe0af;
  --details-border: #c5a877;
  --u-background: #ffe0af;

  --placeholder-text: #5D4825;
  --helper-text: #0198a2;
}

.area {
  --light-transparency: #fffbdf;
}

@media (prefers-color-scheme: light) {
  .hide-in-light-mode {
    display: none !important;
  }
}

@media (prefers-color-scheme: dark) {
:root {
  --main-bg: #0e1823;

  /* 

    grays: form controls, tables 

  */
  --color-primary-text: #F5FAFF;
  /* pre scrollbar dash */
  --color-secondary-border: #273C53;
  /* .e, .secondary-area */
  --color-light-bg: #27384c;

  /* 

    tables

  */
  --table-border: #334a60;
  --table-header: #27384c;

  /*

    highlights 

  */
  --highlight-bg: #c21e52;
  --highlight-border: #c21e52;
  --light-transparency: #27384c;

  /*

    code

  */
  --code-bg: #334a60;
  --pre-scrollbar-thumb: #8ea3c2;

  /* 

    links 

  */
  --color-anchor-primary: #ff6cca;
  --color-anchor-hover: #53ff67;

  /* 

    buttons 

  */
  --color-button-default-bg: #1175FF;
  --color-button-hover-default-bg: #3389FF;
  --color-button-secondary-bg: #163254;
  --color-button-hover-secondary-bg: #1D416D;
  --button-border: #F5FAFF;

  /*

    inputs

  */

  --input-bg: #27384c;
  --input-border: transparent;
  --input-active-outline: 1px solid #8ea3c2;

  /* 

    areas 

  */
  --area-bg: #3A0EA3;
  --area-code-bg: #511dcc;
  --area-highlight-bg: #C91AE3;
  --area-highlight-border: #C91AE3;
  --area-button-code-bg: #418ef7;
  --area-input-bg: #481ab6;
  --area-u-background: #481ab6;

  --secondary-area-code-bg: #233549;
  --secondary-area-u-background: #3c4d62;

  /* 

    light bg

  */
  --light-bg-mark-bg: #C91AE3;

  /*

    other / special

  */
  --details-bg: #27384c;
  --details-border: #5b7895;
  --u-background: #27384c;

  --placeholder-text: #F5FAFF;
  --helper-text: #b86bf2;
}

 .area {
  --light-transparency: #5e29da;
}

 input,
 select,
 textarea,
 meter,
 progress {
  color-scheme: dark;
}

.hide-in-dark-mode {
  display: none !important;
}
}

/* fonts: Space Grotesk & IBM Plex Mono */

/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mDoQDjQSkFtoMM3T6r8E7mPb94C_k3HqUtEw.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/spacegrotesk/v15/V8mDoQDjQSkFtoMM3T6r8E7mPbF4C_k3HqU.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1iEq131nj-otFQ.woff2) format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/ibmplexmono/v19/-F63fjptAgt5VM-kVkqdyU8n1i8q131nj-o.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* GENERAL CSS RESET */

/* will be replaced with `body` for unscoped */
/* the :not pseudo selector is just for the css processor to be able to find */
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-size: 19px;
  line-height: 1.84;
  background-color: var(--main-bg);
  font-family: "Space Grotesk", system-ui, sans-serif;
  color: var(--color-primary-text);
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

/* will be replaced with `body` for unscoped */
/* the :not pseudo selector is just for the css processor to be able to find */
body,  *,  *::before,  *::after {
  box-sizing: border-box;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 dl,
 dt,
 dd,
 blockquote,
 figure,
 fieldset,
 legend,
 textarea,
 pre,
 iframe,
 hr,
 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
  margin: 0;
  padding: 0;
}

 form {
  width: 100%;
}

 fieldset {
  border: 0;
  min-width: 0;
  width: 100%;
}

 b,
 strong,
.font-weight-bold {
  font-weight: bolder;
}

 h1,
 h2,
 h3,
 h4,
 h5,
 h6,
 .h1,
 .h2,
 .h3,
 .h4,
 .h5,
 .h6 {
  text-wrap: balance;
  font-size: 100%;
  font-weight: bold;
}

 a {
  color: var(--color-anchor-primary);
}

 a:hover {
  color: var(--color-anchor-hover);
}

 button,
 input,
 select,
 textarea {
  margin: 0;
  font: inherit;
  color: inherit;
}

 button,
 input:not([type="color"], [type="button"], [type="submit"], [type="radio"], [type="checkbox"]),
 select,
 textarea {
  width: 100%;
}

 img,
 video,
 canvas,
 audio,
 iframe,
 embed,
 object {
  display: block;
  vertical-align: middle;
}

 svg {
  display: inline-block;
}

 img,
 video {
  height: auto;
  width: 100%;
}

 iframe {
  border: 0;
}

 table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

 td,
 th {
  padding: 0;
  border: 1px solid var(--table-border);
  padding: .25rem .75rem;
}

 th {
  background-color: var(--table-header);
}

 caption {
  margin: 1em 0;
}

 hr {
  margin: 1rem 0;
  height: 0;
  border-width: 0;
  border-top: 1px solid;
}

 blockquote {
  padding: .5rem .5rem .5rem 2rem;
  margin-bottom: 1.5rem;
  border-left: 10px solid var(--color-secondary-border);
}

 blockquote > * {
  margin: 1em 0;
}

 code,
 kbd,
 samp,
 pre {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 95%;
}

 code,
 pre {
  border-radius: 4px;
  background-color: var(--code-bg);
}

 code {
  padding: 1px 4px 3px;
  line-height: 1.3;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

 pre,
 .pre {
  display: block;
  margin-bottom: 1.5em;
  padding: 8px 16px 10px;
  line-height: 1.6;
  white-space: pre;
  overflow-x: scroll;
}

 pre::-webkit-scrollbar {
  width: 1em;
}
 
 pre::-webkit-scrollbar-track {
  background-color: var(--color-secondary-border);
  opacity: 0.8;
  background-image: linear-gradient(to right, var(--color-secondary-border), var(--color-secondary-border) 5px, var(--code-bg) 5px, var(--code-bg) );
  background-size: 10px 100%;
}
 
 pre::-webkit-scrollbar-thumb {
  height: 80%;
  border-radius: 9999px;
  background-color: var(--pre-scrollbar-thumb);
}

 mark {
  display: inline-block;
  padding: 1px 6px 2px;
  color: inherit;
  background-color: var(--highlight-bg);
  border: 1px solid var(--highlight-border);
  border-radius: 4px;
  line-height: 1.3;
}

 details {
  padding: 8px 16px 10px;
  background-color: var(--details-bg);
  border: 1px solid var(--details-border);
  border-radius: 4px;
}

 summary {
  cursor: pointer;
}

 small,
 .small {
  font-size: 85%;
}

 .smaller {
  font-size: 75%;
}

 sub,
 sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

 sub {
  bottom: -0.25em;
}

 sup {
  top: -0.5em;
}

 *:-moz-focusring {
  outline: auto;
}

 progress,  meter {
  vertical-align: middle;
}

 input::-webkit-input-placeholder,
 input::placeholder {
  color: var(--placeholder-text);
}

 :target {
  scroll-margin-block: 5ex;
}

/* progress {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 10px;
  background-color: #eee;
}

progress::-webkit-progress-bar {
  background-color: #eee;
}

progress::-webkit-progress-value {
  background-color: #007bff;
}

meter {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 10px;
  background-color: #eee;
}

meter::-webkit-meter-bar {
  background-color: #eee;
}

meter::-webkit-meter-optimum-value {
  background-color: #007bff;
}

input[type='range'] {
  -webkit-appearance: none;
  appearance: none;
  border: none;
  width: 100%;
  height: 10px;
  background: transparent;
  outline: none;
}

input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  background: #007bff;
  cursor: pointer;
  border-radius: 50%;
}

input[type='range']::-webkit-slider-runnable-track {
  background: #eee;
  height: 10px;
  cursor: pointer;
}

input[type='range']:focus {
  outline: none;
}

input[type='range']:focus::-webkit-slider-runnable-track {
  background: #ccc;
} */


/*

  BUTTON RESET & CUSTOM BUTTON

*/

 .plain-button {
  white-space: nowrap;
  display: inline-block;
  margin: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  font-weight: normal;
  text-decoration: none;
  background-color: transparent;
  font-family: inherit;
  padding: 0;
  border-width: 0;
  cursor: pointer;
}

/* defaults for all buttons */
 .button:not(input[type="file"]),
 .secondary-button:not(input[type="file"]),
 .large-button:not(input[type="file"]),
 button:not(.plain-button),
 input[type='button'],
 input[type='reset'],
 input[type='submit'],
 input[type="file"].button::file-selector-button,
 input[type="file"].secondary-button::file-selector-button,
 input[type="file"].large-button::file-selector-button {
  white-space: nowrap;
  display: inline-block;
  margin: 0;
  width: auto;
  overflow: visible;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: normal;
  -webkit-font-smoothing: inherit;
  -moz-osx-font-smoothing: inherit;
  -webkit-appearance: none;
  text-decoration: none;
  background-color: var(--color-button-default-bg);
  font-family: inherit;
  padding: 6px 16px 7px;
  font-weight: 900;
  border: 3px solid var(--button-border);
  border-radius: 0.4em;
  box-shadow: 0.15em 0.15em 0 var(--button-border);
  cursor: pointer;
}

 input[type="file"].button::file-selector-button,
 input[type="file"].secondary-button::file-selector-button,
 input[type="file"].large-button::file-selector-button {
  margin-right: 1rem;
  margin-bottom: .25rem;
}

/* large button */
 .large-button:not(input[type="file"]),
 button.large-button,
 input[type='button'].large-button,
 input[type='reset'].large-button,
 input[type='submit'].large-button,
 input[type="file"].large-button::file-selector-button {
  padding: 10px 23px 11px;
  font-size: 19px;
}

/* hover defaults for all buttons */
 .button:not(input[type="file"]):hover,
 .secondary-button:not(input[type="file"]):hover,
 .large-button:not(input[type="file"]):hover,
 button:not(.plain-button):hover,
 input[type='button']:hover,
 input[type='reset']:hover,
 input[type='submit']:hover,
 input[type="file"].button::file-selector-button:hover,
 input[type="file"].secondary-button::file-selector-button:hover,
 input[type="file"].large-button::file-selector-button:hover {
  background: var(--color-button-hover-default-bg);
}

/* secondary button */
 .secondary-button:not(input[type="file"]),
 button.secondary-button,
 input[type='button'].secondary-button,
 input[type='reset'].secondary-button,
 input[type='submit'].secondary-button,
 input[type="file"].secondary-button::file-selector-button {
  background-color: var(--color-button-secondary-bg);
}

/* :hover secondary button */
 .secondary-button:not(input[type="file"]):hover,
 button.secondary-button:hover,
 [type='button'].secondary-button:hover,
 [type='reset'].secondary-button:hover,
 [type='submit'].secondary-button:hover,
 input[type="file"].secondary-button::file-selector-button:hover {
  background-color: var(--color-button-hover-secondary-bg);
}

/* active defaults for all buttons */
 .button:not(input[type="file"]):active,
 .secondary-button:not(input[type="file"]):active,
 .large-button:not(input[type="file"]):active,
 button:not(.plain-button):active,
 input[type='button']:active,
 input[type='reset']:active,
 input[type='submit']:active,
 input[type="file"].button::file-selector-button:active,
 input[type="file"].secondary-button::file-selector-button:active,
 input[type="file"].large-button::file-selector-button:active {
  transform: translate(0.05em, 0.05em);
  box-shadow: 0.15em 0.15em 0 var(--button-border);
}

 .plain-button,
 .button:not(input[type="file"])::-moz-focus-inner,
 .secondary-button:not(input[type="file"])::-moz-focus-inner,
 .large-button:not(input[type="file"])::-moz-focus-inner,
 button::-moz-focus-inner,
 input[type='button']::-moz-focus-inner,
 input[type='reset']::-moz-focus-inner,
 input[type='submit']::-moz-focus-inner,
 input[type="file"].button::file-selector-button::-moz-focus-inner,
 input[type="file"].secondary-button::file-selector-button::-moz-focus-inner,
 input[type="file"].large-button::file-selector-button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
  
  Spacing between LARGE headings and the next element is LARGE

*/

 .h1,
 h1 {
  margin-bottom: .5em;
}

 .h2,
 h2 {
  margin-bottom: .5em;
}

 .h3,
 h3 {
  margin-bottom: .5em;
}

 .h4,
 h4 {
  margin-bottom: .5em;
}

 .h5,
 h5 {
  margin-bottom: .5em;
}

 .h6,
 h6 {
  margin-bottom: .5em;
}

/* TYPOGRAPHY */

/* 

   section: headings 

   they have default font size and line height, but they can be
   overwritten by using heading classes like .h1, .h2, .h3

*/

 h1 {
  font-size: 38px;
  line-height: 1.15;
}

 h2 {
  font-size: 33px;
  line-height: 1.18;
}

 h3 {
  font-size: 29px;
  line-height: 1.22;
}

 h4 {
  font-size: 25px;
  line-height: 1.27;
}

 h5 {
  font-size: 22px;
  line-height: 1.29;
}

 h6 {
  font-size: 19px;
  line-height: 1.35;
}

 .h1 {
  font-size: 38px;
  line-height: 1.15;
}

 .h2 {
  font-size: 33px;
  line-height: 1.18;
}

 .h3 {
  font-size: 29px;
  line-height: 1.22;
}

 .h4 {
  font-size: 25px;
  line-height: 1.27;
}

 .h5 {
  font-size: 22px;
  line-height: 1.29;
}

 .h6 {
  font-size: 19px;
  line-height: 1.35;
}


@media (min-width: 640px) {

   h1 {
    font-size: 52px;
    line-height: 1.05;
  }

   h2 {
    font-size: 44px;
    line-height: 1.1;
  }

   h3 {
    font-size: 34px;
    line-height: 1.2;
  }

   h4 {
    font-size: 28px;
    line-height: 1.25;
  }

   h5 {
    font-size: 24px;
    line-height: 1.3;
  }

   h6 {
    font-size: 21px;
    line-height: 1.3;
  }

   .h1 {
    font-size: 52px;
    line-height: 1.05;
  }

   .h2 {
    font-size: 44px;
    line-height: 1.1;
  }

   .h3 {
    font-size: 34px;
    line-height: 1.2;
  }

   .h4 {
    font-size: 28px;
    line-height: 1.25;
  }

   .h5 {
    font-size: 24px;
    line-height: 1.3;
  }

   .h6 {
    font-size: 21px;
    line-height: 1.3;
  }

}



/* 

  section: INPUTS

*/

 input[disabled],
 input[readonly] {
  opacity: .5;
  color: var(--placeholder-text);
  cursor: not-allowed;
}

 input[disabled]:is(:active, :focus),
 input[readonly]:is(:active, :focus) {
  outline: none !important;
  border: 1px solid var(--input-border) !important;
}

/* common */
 textarea:not(.e__input, .u),
 select:not(.e__input, .u),
 input:not([type]):not(.e__input, .u),
 input[type="email"]:not(.e__input, .u),
 input[type="number"]:not(.e__input, .u),
 input[type="password"]:not(.e__input, .u),
 input[type="search"]:not(.e__input, .u),
 input[type="tel"]:not(.e__input, .u),
 input[type="text"]:not(.e__input, .u),
 input[type="url"]:not(.e__input, .u),
 input[type="date"]:not(.e__input, .u),
 input[type="datetime"]:not(.e__input, .u),
 input[type="datetime-local"]:not(.e__input, .u),
 input[type="month"]:not(.e__input, .u),
 input[type="week"]:not(.e__input, .u),
 input[type="time"]:not(.e__input, .u) {
  border: 1px solid var(--input-border);
  background-color: var(--input-bg);
}

 textarea:not(.e__input, .u):is(:active, :focus),
 select:not(.e__input, .u):is(:active, :focus),
 input:not([type]):not(.e__input, .u):is(:active, :focus),
 input[type="email"]:not(.e__input, .u):is(:active, :focus),
 input[type="number"]:not(.e__input, .u):is(:active, :focus),
 input[type="password"]:not(.e__input, .u):is(:active, :focus),
 input[type="search"]:not(.e__input, .u):is(:active, :focus),
 input[type="tel"]:not(.e__input, .u):is(:active, :focus),
 input[type="text"]:not(.e__input, .u):is(:active, :focus),
 input[type="url"]:not(.e__input, .u):is(:active, :focus),
 input[type="date"]:not(.e__input, .u):is(:active, :focus),
 input[type="datetime"]:not(.e__input, .u):is(:active, :focus),
 input[type="datetime-local"]:not(.e__input, .u):is(:active, :focus),
 input[type="month"]:not(.e__input, .u):is(:active, :focus),
 input[type="week"]:not(.e__input, .u):is(:active, :focus),
 input[type="time"]:not(.e__input, .u):is(:active, :focus) {
  outline: var(--input-active-outline);
  border-color: transparent;
}


 textarea {
  display: block;
  width: 100%;
  padding: 8px 12px;
  resize: vertical;
}

 input:not([type]):not(.e__input),
 input[type="email"]:not(.e__input),
 input[type="number"]:not(.e__input),
 input[type="password"]:not(.e__input),
 input[type="search"]:not(.e__input),
 input[type="tel"]:not(.e__input),
 input[type="text"]:not(.e__input),
 input[type="url"]:not(.e__input),
 input[type="date"]:not(.e__input),
 input[type="datetime"]:not(.e__input),
 input[type="datetime-local"]:not(.e__input),
 input[type="month"]:not(.e__input),
 input[type="week"]:not(.e__input),
 input[type="time"]:not(.e__input) {
  padding: 4px 10px;
}

 select {
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
}

 select:not([multiple]):not([size]) {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  line-height: 1.5rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
}

@media (prefers-color-scheme: dark) {
  /* different dropdown arrow for dark mode */
   select:not([multiple]):not([size]) {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  }
}

/************************************************
 *                                              *
 *                                              *
 *                  EXTRAS                      *
 *                                              *
 *                                              *
 ************************************************/

 .nowrap { white-space: nowrap; }
 .overflow-x-scroll { overflow-x: scroll; }
 .overflow-y-scroll { overflow-y: scroll; }

 .width-10 { width: 10%; }
 .width-20 { width: 20%; }
 .width-30 { width: 30%; }
 .width-40 { width: 40%; }
 .width-50 { width: 50%; }
 .width-60 { width: 60%; }
 .width-70 { width: 70%; }
 .width-80 { width: 80%; }
 .width-90 { width: 90%; }
 .width-100 { width: 100%; }

 .opacity-0 { opacity: 0; }
 .opacity-5 { opacity: 0.05; }
 .opacity-10 { opacity: 0.1; }
 .opacity-20 { opacity: 0.2; }
 .opacity-25 { opacity: 0.25; }
 .opacity-30 { opacity: 0.3; }
 .opacity-40 { opacity: 0.4; }
 .opacity-50 { opacity: 0.5; }
 .opacity-60 { opacity: 0.6; }
 .opacity-65 { opacity: 0.65; }
 .opacity-70 { opacity: 0.7; }
 .opacity-75 { opacity: 0.75; }
 .opacity-80 { opacity: 0.8; }
 .opacity-90 { opacity: 0.9; }
 .opacity-95 { opacity: 0.95; }
 .opacity-100 { opacity: 1; }

 .line-height-1 {line-height: 1;}
 .line-height-1\.1 {line-height: 1.1;}
 .line-height-1\.2 {line-height: 1.2;}
 .line-height-1\.3 {line-height: 1.3;}
 .line-height-1\.4 {line-height: 1.4;}
 .line-height-1\.5 {line-height: 1.5;}
 .line-height-1\.6 {line-height: 1.6;}
 .line-height-1\.7 {line-height: 1.7;}
 .line-height-1\.8 {line-height: 1.8;}
 .line-height-1\.9 {line-height: 1.9;}


/* repeating margin classes to overrule CSS specificity, specifically of buttons */
 .mb-0.mb-0.mb-0 {
  margin-bottom: 0rem;
}

 .mb-\.1.mb-\.1.mb-\.1 {
  margin-bottom: .1rem;
}

 .mb-\.2.mb-\.2.mb-\.2 {
  margin-bottom: .2rem;
}

 .mb-\.3.mb-\.3.mb-\.3 {
  margin-bottom: .3rem;
}

 .mb-\.4.mb-\.4.mb-\.4 {
  margin-bottom: .4rem;
}

 .mb-\.5.mb-\.5.mb-\.5 {
  margin-bottom: .5rem;
}

 .mb-\.6.mb-\.6.mb-\.6 {
  margin-bottom: .6rem;
}

 .mb-\.7.mb-\.7.mb-\.7 {
  margin-bottom: .7rem;
}

 .mb-\.8.mb-\.8.mb-\.8 {
  margin-bottom: .8rem;
}

 .mb-\.9.mb-\.9.mb-\.9 {
  margin-bottom: .9rem;
}

 .mb-1.mb-1.mb-1 {
  margin-bottom: 1rem;
}

 .mb-1\.1.mb-1\.1.mb-1\.1 {
  margin-bottom: 1.1rem;
}

 .mb-1\.2.mb-1\.2.mb-1\.2 {
  margin-bottom: 1.2rem;
}

 .mb-1\.3.mb-1\.3.mb-1\.3 {
  margin-bottom: 1.3rem;
}

 .mb-1\.4.mb-1\.4.mb-1\.4 {
  margin-bottom: 1.4rem;
}

 .mb-1\.5.mb-1\.5.mb-1\.5 {
  margin-bottom: 1.5rem;
}

 .mb-1\.6.mb-1\.6.mb-1\.6 {
  margin-bottom: 1.6rem;
}

 .mb-1\.7.mb-1\.7.mb-1\.7 {
  margin-bottom: 1.7rem;
}

 .mb-1\.8.mb-1\.8.mb-1\.8 {
  margin-bottom: 1.8rem;
}

 .mb-1\.9.mb-1\.9.mb-1\.9 {
  margin-bottom: 1.9rem;
}

 .mb-2.mb-2.mb-2 {
  margin-bottom: 2rem;
}

 .mb-2\.1.mb-2\.1.mb-2\.1 {
  margin-bottom: 2.1rem;
}

 .mb-2\.2.mb-2\.2.mb-2\.2 {
  margin-bottom: 2.2rem;
}

 .mb-2\.3.mb-2\.3.mb-2\.3 {
  margin-bottom: 2.3rem;
}

 .mb-2\.4.mb-2\.4.mb-2\.4 {
  margin-bottom: 2.4rem;
}

 .mb-2\.5.mb-2\.5.mb-2\.5 {
  margin-bottom: 2.5rem;
}

 .mb-2\.6.mb-2\.6.mb-2\.6 {
  margin-bottom: 2.6rem;
}

 .mb-2\.7.mb-2\.7.mb-2\.7 {
  margin-bottom: 2.7rem;
}

 .mb-2\.8.mb-2\.8.mb-2\.8 {
  margin-bottom: 2.8rem;
}

 .mb-2\.9.mb-2\.9.mb-2\.9 {
  margin-bottom: 2.9rem;
}

 .mb-3.mb-3.mb-3 {
  margin-bottom: 3rem;
}

 .mb-3\.5.mb-3\.5.mb-3\.5 {
  margin-bottom: 3.5rem;
}

 .mb-4.mb-4.mb-4 {
  margin-bottom: 4rem;
}

 .mb-4\.5.mb-4\.5.mb-4\.5 {
  margin-bottom: 4.5rem;
}

 .mb-5.mb-5.mb-5 {
  margin-bottom: 5rem;
}

 .mb-5\.5.mb-5\.5.mb-5\.5 {
  margin-bottom: 5.5rem;
}

 .mb-6.mb-6.mb-6 {
  margin-bottom: 6rem;
}

 .mb-6\.5.mb-6\.5.mb-6\.5 {
  margin-bottom: 6.5rem;
}

 .mb-7.mb-7.mb-7 {
  margin-bottom: 7rem;
}

 .mb-7\.5.mb-7\.5.mb-7\.5 {
  margin-bottom: 7.5rem;
}

 .mb-8.mb-8.mb-8 {
  margin-bottom: 8rem;
}

 .mb-8\.5.mb-8\.5.mb-8\.5 {
  margin-bottom: 8.5rem;
}


/* position */

.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }

/* display */

 .hidden,  hidden { display: none !important; }
 .block { display: block; }
 .flex { display: flex; }
 .flex-wrap { flex-wrap: wrap; }


/* responsive spacer */

 .spacer {
  height: .25rem;
  width: .25rem;
}

@media (min-width: 640px) {
   .spacer {
    height: .4rem;
    width: .4rem;
  }
}


/* space  */

 .space-y-1 > :not(:last-child) {
  margin-bottom: 1rem;
}

 .space-y-1\.5 > :not(:last-child) {
  margin-bottom: 1.5rem;
}

 .space-y-1\.75 > :not(:last-child) {
  margin-bottom: 1.75rem;
}

 .space-y-2 > :not(:last-child) {
  margin-bottom: 2rem;
}

 .space-y-2.25 > :not(:last-child) {
  margin-bottom: 2.25rem;
}

 .space-y-2\.5 > :not(:last-child) {
  margin-bottom: 2.5rem;
}

 .space-y-3 > :not(:last-child) {
  margin-bottom: 3rem;
}

/* specific uses */

 .pb-0 {
  padding-bottom: 0; /* useful for .area, which is why it comes after .area is defined */
}

 .no-mb-last > *:last-child {
  margin-bottom: 0;
}

 .border-radius-1 {
  border-radius: 1px;
}
 .border-radius-2 {
  border-radius: 2px;
}
 .border-radius-3 {
  border-radius: 3px;
}
 .border-radius-4 {
  border-radius: 4px;
}
 .border-radius-5 {
  border-radius: 5px;
}
 .border-radius-6 {
  border-radius: 6px;
}
 .border-radius-7 {
  border-radius: 7px;
}
 .border-radius-8 {
  border-radius: 8px;
}
 .border-radius-9 {
  border-radius: 9px;
}
 .border-radius-10 {
  border-radius: 10px;
}
 .border-radius-11 {
  border-radius: 11px;
}
 .border-radius-12 {
  border-radius: 12px;
}
 .border-radius-13 {
  border-radius: 13px;
}
 .border-radius-14 {
  border-radius: 14px;
}
 .border-radius-15 {
  border-radius: 15px;
}
 .border-radius-16 {
  border-radius: 16px;
}

/* container */

.container,  .container {
  max-width: 690px;
  margin: 20px auto;
  padding: 1.5rem;
}

@media (min-width: 640px) {
  .container,  .container {
    margin: 60px auto;
  }
}

/* .choice-label
   larger radio and checkbox
*/

 .choice-label {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  line-height: 1.6;
  cursor: pointer;
}

 .choice-label input[type="checkbox"],
 .choice-label input[type="radio"] {
  margin-right: 9px;
}

 input[type="checkbox"] {
  width: 20px;
  height: 20px;
}

 input[type="radio"] {
  width: 22px;
  height: 22px;
}

/* 

  FLOATING LABEL TECHNIQUE 

  <div class=".floating-label-container">
    <input id="email" type="email" name="email" placeholder="Enter your email address">
    <label for="email">Enter your email address</label>
  </div>

  from: https://csslayout.io/floating-label/ 

*/

 .floating-label-container {
  position: relative;
}

 .floating-label-container input:not([type]):not(:placeholder-shown) + label,
 .floating-label-container input[type="email"]:not(:placeholder-shown) + label,
 .floating-label-container input[type="number"]:not(:placeholder-shown) + label,
 .floating-label-container input[type="password"]:not(:placeholder-shown) + label,
 .floating-label-container input[type="search"]:not(:placeholder-shown) + label,
 .floating-label-container input[type="tel"]:not(:placeholder-shown) + label,
 .floating-label-container input[type="text"]:not(:placeholder-shown) + label,
 .floating-label-container input[type="url"]:not(:placeholder-shown) + label,
 .floating-label-container textarea:not(:placeholder-shown) + label {
  opacity: 1;
  transform: translate(-9px, -100%);
  font-size: 15px;
  font-weight: bold;
}

 .floating-label-container label {
  pointer-events: none;
  position: absolute;
  left: 9px;
  top: 0;
  opacity: 0;
  transition: transform 200ms;
  color: var(--placeholder-text);
}


/*  nice form input */

 .e {
  display: block;
  align-items: center;
  border: 1px solid var(--color-primary-text);
  color: var(--color-primary-text);
  background-image: linear-gradient(135deg, var(--color-light-bg) 12.50%, transparent 12.50%, transparent 50%, var(--color-light-bg) 50%, var(--color-light-bg) 62.50%, transparent 62.50%, transparent 100%);
  background-size: 5.66px 5.66px;
  border-radius: 5px;
  cursor: pointer;
}
 .e:hover {
  border: 1px solid var(--color-anchor-primary);
}
 .e:focus-within {
  outline: 1px solid var(--color-anchor-primary);
  border: 1px solid var(--color-anchor-primary);
  background-image: linear-gradient(135deg, var(--color-button-secondary-bg) 12.50%, transparent 12.50%, transparent 50%, var(--color-button-secondary-bg) 50%, var(--color-button-secondary-bg) 62.50%, transparent 62.50%, transparent 100%);
}
 .e:focus-within .e__input {
  border-top: 1px solid var(--color-button-secondary-bg);
}
 .e__label {
  display: block;
  padding: 5px 0 5px 9px;
  font-size: 16px;
  line-height: 1;
  font-weight: bold;
}
 .e__input {
  display: block;
  width: 100%;
  padding: 2px 9px 3px;
  color: var(--color-primary-text);
  border: none;
  border-top: 1px solid var(--color-light-bg);
  background-color: var(--main-bg);
  outline: none;
  border-radius: 0 0 5px 5px;
}

/* pill and expandable pill  form inputs */

 .e--pill, 
 .e--expandable-pill {
  display: flex;
}
 .e--pill .e__label, 
 .e--expandable-pill .e__label {
  padding: 12px 10px 12px 14px;
  font-size: 17px;
}
 .e--pill .e__label::after, 
 .e--expandable-pill .e__label::after {
  content: " \2192";
}
 .e--pill .e__input, 
 .e--expandable-pill .e__input {
  flex-grow: 1;
  align-self: stretch;
  width: auto;
  padding: 0px 8px 0px 8px;
  border: none;
  border-left: 1px solid var(--color-light-bg);
  outline: none;
  border-radius: 0 5px 5px 0;
}
 .e--pill:focus-within .e__input {
  border-top: none;
  border-left: 1px solid var(--color-button-secondary-bg);
}

/* expandable pill form input */

 .e--expandable-pill:focus-within, 
 .e--expandable-pill.e--has-content {
  display: block;
}

 .e--expandable-pill:focus-within .e__label, 
 .e--expandable-pill.e--has-content .e__label {
  padding: 5px 0 5px 9px;
  font-size: 16px;
}

 .e--expandable-pill:focus-within .e__label::after, 
 .e--expandable-pill.e--has-content .e__label::after {
  content: "";
}

 .e--expandable-pill:focus-within .e__input, 
 .e--expandable-pill.e--has-content .e__input {
  width: 100%;
  padding: 2px 9px 3px;
  border: none;
  border-left: none;
  border-top: 1px solid var(--color-button-secondary-bg);
  border-radius: 0px 0px 5px 5px;
}

@media (prefers-color-scheme: dark) {
   .e:hover {
    color: #ffffff;
  }

   .e:focus-within {
    color: #ffffff;
    background-image: linear-gradient(135deg, #1E2D3E 12.50%, transparent 12.50%, transparent 50%, #1E2D3E 50%, #1E2D3E 62.50%, transparent 62.50%, transparent 100%);
  }

   .e:focus-within .e__input {
    border-top: 1px solid #1E2D3E;
  }

   .e--pill:focus-within .e__input {
    border-left: 1px solid #1E2D3E;
  }

   .e--expandable-pill:focus-within .e__input, 
   .e--expandable-pill.e--has-content .e__input {
    border-top: 1px solid #1E2D3E;
  }
}

/* underline input and textarea */

 .u.u.u {
  background-color: var(--u-background);
  border-width: 0;
  border-bottom: 2px solid var(--color-primary-text);
  border-radius: 0;
}

 .u.u.u:focus,
 .u.u.u:active {
  outline: 3px solid var(--color-primary-text);
  outline-offset: -3px;
}

/* typography */

 .whitespace-nowrap {
  white-space: nowrap;
}

 .whitespace-pre-wrap {
  white-space: pre-wrap;
}

 .helper-text {
  color: var(--helper-text);
}

/* area */

 .area {
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem 1.2rem;
  border: 3px solid var(--color-primary-text);
  border-radius: 15px;
  background-color: var(--area-bg);
  box-shadow: 0.15em 0.15em 0 var(--color-primary-text);
}

 .secondary-area {
  margin-bottom: 1.5rem;
  padding: 1rem 1.5rem 1.2rem;
  border: 3px solid var(--color-primary-text);
  border-radius: 15px;
  background-color: var(--color-light-bg);
  box-shadow: 0.15em 0.15em 0 var(--color-primary-text);
}

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

 .area mark {
  background-color: var(--area-highlight-bg);
  border-color: var(--area-highlight-border);
}

 .area .button:not(input[type="file"]) code,
 .area .secondary-button:not(input[type="file"]) code,
 .area .large-button:not(input[type="file"]) code,
 .area button code,
 .area [type='button'] code,
 .area [type='reset'] code,
 .area [type='submit'] code {
  background-color: var(--area-button-code-bg);
}

/* todo: fix this HOWWWWWW */
 .area textarea,
 .area select,
 .area input:not([type]):not(.e__input),
 .area input[type="email"]:not(.e__input),
 .area input[type="number"]:not(.e__input),
 .area input[type="password"]:not(.e__input),
 .area input[type="search"]:not(.e__input),
 .area input[type="tel"]:not(.e__input),
 .area input[type="text"]:not(.e__input),
 .area input[type="url"]:not(.e__input),
 .area input[type="date"]:not(.e__input),
 .area input[type="datetime"]:not(.e__input),
 .area input[type="datetime-local"]:not(.e__input),
 .area input[type="month"]:not(.e__input),
 .area input[type="week"]:not(.e__input),
 .area input[type="time"]:not(.e__input) {
  background-color: var(--area-input-bg);
}
 .area .u.u.u {
  background-color: var(--area-u-background);
}

 .secondary-area code,
 details code {
  background-color: var(--secondary-area-code-bg);
}

 .secondary-area .u.u.u,
 details .u.u.u {
  background-color: var(--secondary-area-u-background);
}

 :is(.secondary-area, details) textarea,
 :is(.secondary-area, details) select,
 :is(.secondary-area, details) input:not([type]):not(.e__input),
 :is(.secondary-area, details) input[type="email"]:not(.e__input),
 :is(.secondary-area, details) input[type="number"]:not(.e__input),
 :is(.secondary-area, details) input[type="password"]:not(.e__input),
 :is(.secondary-area, details) input[type="search"]:not(.e__input),
 :is(.secondary-area, details) input[type="tel"]:not(.e__input),
 :is(.secondary-area, details) input[type="text"]:not(.e__input),
 :is(.secondary-area, details) input[type="url"]:not(.e__input),
 :is(.secondary-area, details) input[type="date"]:not(.e__input),
 :is(.secondary-area, details) input[type="datetime"]:not(.e__input),
 :is(.secondary-area, details) input[type="datetime-local"]:not(.e__input),
 :is(.secondary-area, details) input[type="month"]:not(.e__input),
 :is(.secondary-area, details) input[type="week"]:not(.e__input),
 :is(.secondary-area, details) input[type="time"]:not(.e__input) {
  background-color: var(--secondary-area-u-background);
}

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


/* two items side by side stack vertically on mobile, centered on both */

 .separate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

 .separate > * + * {
  margin-top: 1rem !important;
}

@media (min-width: 640px) {
   .separate {
    flex-direction: row;
  }

   .separate > * + * {
    margin-top: 0 !important;
    margin-left: 1rem !important;
  }
}

/* many items stack vertically on mobile, side by side on desktop in columns of 3 */
@media (min-width: 640px) {
   .side-by-side {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3%;
  }
}


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

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