@import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);

.spicy {
  font-family: "Bungee Spice";
  font-size: 3em;
  font-palette: --colorized;
  color: #e67900;
}

@font-palette-values --colorized {
  font-family: "Bungee Spice";
  base-palette: 0;
  override-colors: 0 #00ffbb, 1 #007744, 2 #004433;
}

body {
  color: black;
  background-color: transparent;
  font-family: Arial, sans-serif;
  text-align: center;
}
li {
  text-align: left;
  margin-bottom: 0.5em;
}
main {
  width: 100%;
  max-width: 60em;
  margin: 0 auto;
  text-align: left;
}
main p {
  font-size: 1rem;
  line-height: 1.5;
}
main h3 {
  font-size: 1.2rem;
  font-weight: bold;
  color: black;
  text-align: left;
  margin-top: 1.5em;
  border-top: 6px double black;
  padding-top: 1em;
}
main li {
  font-size: 1rem;
  margin-bottom: 0.7em;
  line-height: 1.5;
}
main kbd {
  display: inline-block;
  font-size: 0.9rem;
  background-color: rgb(240 240 240);
}
main code {
  display: block;
  font-size: 0.9rem;
  background-color: rgb(240 240 240);
  margin-bottom: 1em;
  padding-left: 1em;
  padding-right: 1em;
  white-space: pre-wrap;
}
.demo-header {
  font-size: 2rem;
  line-height: 1.15;
  border: 0;
  margin: 0;
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  min-height: 1em;
  caret-color: rgba(0 0 0 / 1);
  background-color: rgba(0 0 0 / 0);
}
@media (min-width: 30em) {
  .demo-header {
    font-size: 3rem;
  }
}
@media (min-width: 40em) {
  .demo-header {
    font-size: 4rem;
  }
}
@media (min-width: 50em) {
  .demo-header {
    font-size: 5rem;
  }
}
.example-code {
  border-top: 3px black solid;
  margin-top: 3em;
}
@media (prefers-color-scheme: dark) {
  body {
    color: white;
    background-color: black;
  }
  a {
    color: lightblue;
  }
  main h3 {
    color: white;
    border-top: 6px double white;
  }
  main kbd {
    background-color: rgb(80 80 80);
  }
  main code {
    background-color: rgb(80 80 80);
  }
  .demo-header {
    caret-color: rgba(255 255 255 / 1);
  }
  .example-code {
    border-top: 3px white solid;
  }
  .testinfo {
    background-color: darkred;
  }
}
.justify-center-test {
  text-align: center;
}
.justify-right-test {
  text-align: right;
}
.letter-space-px-test {
  letter-spacing: 4px;
}
.letter-space-em-test {
  letter-spacing: 0.2em;
}
.no-bold {
  font-weight: normal;
}
.header-font-sans {
  font-family: "Open Sans", "Fira Sans", "Lucida Sans", "Lucida Sans Unicode",
    "Trebuchet MS", "Liberation Sans", "Nimbus Sans L", sans-serif;
  --data-y-offset: 0.11;
  --data-lineheight-adjuster: 0.875;
  --data-underline-position: 0.75;
  --data-underline-width: 0.09;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-serif {
  font-family: "Lucida Bright", "Lucida Fax", Palatino, "Palatino Linotype",
    Palladio, "URW Palladio", serif;
  --data-y-offset: 0.1;
  --data-lineheight-adjuster: 0.84;
  --data-underline-position: 0.67;
  --data-underline-width: 0.09;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-mono {
  font-family: "Fira Mono", "DejaVu Sans Mono", Menlo, Consolas,
    "Liberation Mono", Monaco, "Lucida Console", monospace;
  --data-y-offset: 0.15;
  --data-lineheight-adjuster: 0.85;
  --data-underline-position: 0.72;
  --data-underline-width: 0.08;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-cursive {
  font-family: "Brush Script MT", "Brush Script Std", "Lucida Calligraphy",
    "Lucida Handwriting", "Apple Chancery", cursive;
  --data-y-offset: 0.15;
  --data-lineheight-adjuster: 0.83;
  --data-underline-position: 0.65;
  --data-underline-width: 0.08;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-fantasy {
  font-family: Papyrus, Herculanum, "Party LET", "Curlz MT", Harrington, fantasy;
}
.header-font-acme {
  font-family: acme;
  --data-y-offset: 0.14;
  --data-lineheight-adjuster: 0.82;
  --data-underline-position: 0.67;
  --data-underline-width: 0.09;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-aleo {
  font-family: aleo;
  --data-y-offset: 0.08;
  --data-lineheight-adjuster: 0.9;
  --data-underline-position: 0.79;
  --data-underline-width: 0.08;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-amita {
  font-family: amita;
  --data-y-offset: 0.23;
  --data-lineheight-adjuster: 0.74;
  --data-underline-position: 0.53;
  --data-underline-width: 0.08;
  --data-no-underline-glyphs:gjpqy;
}
.header-font-diplomata-sc {
  font-family: "diplomata sc";
  --data-y-offset: 0.13;
  --data-lineheight-adjuster: 0.852;
  --data-underline-position: 0.71;
  --data-underline-width: 0.1;
}
.header-font-bungee {
  font-family: Bungee;
  --data-y-offset: 0.09;
  --data-lineheight-adjuster: 0.86;
  --data-underline-position: 0.79;
  --data-underline-width: 0.08;
}
.header-font-carter-one {
  font-family: "Carter One";
  --data-y-offset: 0.17;
  --data-lineheight-adjuster: 0.73;
  --data-underline-position: 0.57;
  --data-underline-width: 0.08;
  --data-no-underline-glyphs:gjpqy;
}
.risograph-v1 {
  --data-random-radius: 0.15;
  --data-outline-width: 0.08;
  --data-top-color: red;
  --data-bottom-color: black;
  --data-outline-color: gold;
  --data-dark-top-color: red;
  --data-dark-bottom-color: white;
  --data-dark-outline-color: gold;
}
.worley-v1 {
  --data-highlight-color: red;
  --data-shadow-color: slategray;
  --data-dark-highlight-color: red;
  --data-dark-shadow-color: lightslategray;
  --data-shadow-offset-x: 0.05;
  --data-shadow-offset-y: 0.05;
  --data-shadow-blur: 0.03;
  --data-noise-scale: 40;
  --data-noise-sum-function:none;
}
.worley-v2 {
  --data-base-color: white;
  --data-dark-base-color: white;
  --data-highlight-color: #0760f7;
  --data-dark-highlight-color: #74c0f2;
  --data-noise-sum-function: none;
  --data-noise-output:YminusX;
  --data-noise-scale: 45;
  --data-contrast-color: darkred;
  --data-dark-contrast-color: pink;
}
.highlight-gradient-v1 {
  --data-main-color: lch(29.2345% 44.2 27);
  --data-dark-main-color: #5eadd1;
  --data-highlight-color: lab(52.2345% 40.1645 59.9971);
  --data-dark-highlight-color: #c5d6fc;
  --data-gradient-skew-x: -1;
  --data-gradient-easing:easeOutIn;
  --data-is-animated: true;
}
.bubbles-text-v1 {
  --data-text-color: white;
  --data-outline-color: black;
  --data-bubble-color: green;
  --data-bubble-outline-color: gold;
  --data-dark-text-color: black;
  --data-dark-outline-color: white;
  --data-dark-bubble-color: lightgreen;
  --data-dark-bubble-outline-color: gold;
  --data-bubble-density: 100;
  --data-contrast-color: darkred;
  --data-dark-contrast-color: pink;
  --data-is-animated: true;
}

@media (min-width: 30em) {
  main p,
  main li {
    font-size: 1rem;
  }
  main code,
  main kbd {
    font-size: 0.9rem;
  }
  main h3 {
    font-size: 1.3rem;
  }
}
@media (min-width: 40em) {
  main p,
  main li {
    font-size: 1.1rem;
  }
  main code,
  main kbd {
    font-size: 1rem;
  }
  main h3 {
    font-size: 1.5rem;
  }
}
@media (min-width: 50em) {
  main p,
  main li {
    font-size: 1.2rem;
  }
  main code,
  main kbd {
    font-size: 1.1rem;
  }
  main h3 {
    font-size: 1.7rem;
  }
}