/* @link https://utopia.fyi/type/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

:root {
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vi, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vi, 1.9531rem);
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vi, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vi, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vi, 3.8147rem);
}

/* @link https://utopia.fyi/space/calculator?c=320,18,1.2,1240,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-3xl|s-2xl|s-xl&g=s,l,xl,12 */

:root {
  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vi, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5408rem + 0.1087vi, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8533rem + 0.1087vi, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0815rem + 0.2174vi, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6223rem + 0.3261vi, 1.875rem);
  --space-l: clamp(2.25rem, 2.163rem + 0.4348vi, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2446rem + 0.6522vi, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.3261rem + 0.8696vi, 5rem);
  --space-3xl: clamp(6.75rem, 6.4891rem + 1.3043vi, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.2038rem + 0.5435vi, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4321rem + 0.6522vi, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7446rem + 0.6522vi, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8641rem + 1.3043vi, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.4049rem + 1.413vi, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.7283rem + 2.6087vi, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.8098rem + 2.8261vi, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.4565rem + 5.2174vi, 7.5rem);

  /* Custom pairs */
  --space-s-3xl: clamp(1.125rem, -1.0924rem + 11.087vi, 7.5rem);
  --space-s-2xl: clamp(1.125rem, -0.2228rem + 6.7391vi, 5rem);
  --space-s-xl: clamp(1.125rem, 0.212rem + 4.5652vi, 3.75rem);
}

:root {
  --background: #333;
  --foreground: #000;
  
  --container-width: max(100%, 80rem);
  
}

::selection{
    background-color: #b8b8b8;
    color: rgb(22, 22, 22);
}

@font-face {
  font-family: "MD IO";
  font-weight: normal;
  font-style: normal;
  src: url("/assets/MDIO-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "MD IO";
  font-weight: bold;
  font-style: normal;
  src: url("/assets/MDIO-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "MD IO";
  font-weight: 700;
  font-style: normal;
  src: url("/assets/MDIO-Bold.woff2") format("woff2");
}

@font-face {
  font-family: "MD IO";
  font-weight: 900;
  font-style: normal;
  src: url("/assets/MDIO-Bold.woff2") format("woff2");
}

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

html {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

body {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  font-family: "MD IO", serif;
  font-size: var(--step-1);
  line-height: 1.5;
  background-color: var(--background);
  max-width: 80rem;
  margin: auto;
  padding: var(--space-s-3xl);
  padding-top: var(--space-s-xl);
  background: #eeeeee;
  color: #000;
}

img {
  max-width: 100%;
}

p img {
  max-width: 100%;
}

h1 {
  font-family: "MD IO", sans-serif;
  font-weight: 900;
  margin: 0 0 1rem 0;
  line-height: 1.15;
  color: #111111;
}

h1 small {
  font-size: 60%;
  color: #888;
  margin-left: .5em;
}

h2, h3, h4, h5, h6 {
  font-family: "MD IO", sans-serif;
  font-weight: 600;
  margin: 3rem 0 .5rem 0;
  line-height: 1.15;
  color: #111111;
}

p {
  margin: 1.5rem 0;
}

h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-3); }

h1 img {
  width: 1.5em;
  vertical-align: middle;
}

h1 a:link,
h1 a:visited,
h1 a:hover,
h1 a:active {
  text-decoration: none;
  color: inherit;
}

.party {
  color: #862e9c;
}

.people {
  text-wrap: nowrap;
}

.important {
  font-size: 110%;
}

.fa-solid {
  margin-right: .5rem;
}

h2 .fa-solid {
  margin-right: .8rem;
}

#badges {
  background: #ffd8a8;
  border-radius: var(--step-0);
  padding: var(--space-m);
  margin: var(--space-m) calc((var(--space-m) / 2) * -1);
  font-size: 80%;
}

#badges p:first-child {
  margin-top: 0;
}

#comparison {
  display: inline-block;
  background: #ffd8a8;
  border-radius: var(--step-0);
  margin: 1rem 0 1rem 0;
  padding: 2rem;
  padding-top: 0;
}

#comparison h2 {
  color: inherit;
  margin-top: 2rem;
  margin-bottom: 0;
}

#comparison p {
  margin: .5rem 0 2rem 0;
  font-size: 80%;
}

#comparison ul {
  margin: .5rem 0 .5rem 3.5rem;
}

header h1, header h2 {
  margin: 0;
}

header h2 {
  color: #087f5b;
}

.flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0 var(--space-xl);
}

.box {
  flex-grow: 0;
}

a:link, a:visited, a:hover, a:active {
  color: #3a3a3a;
}

button, .button {
  all: unset;
  -webkit-appearance: none;
  background: #38d9a9;
  color: #000 !important;
  text-decoration: none;
  font-weight: 700;
  padding: var(--space-2xs) var(--space-s);
  border-radius: var(--space-2xs);
  display: inline-block;
  margin: 1rem 0;
}

button:hover, .button:hover {
  background: #63e6be;
  cursor: pointer;
}

.red {
  background: #fa5252;
}

.red:hover {
  background: #ff6b6b;
}

.yellow {
  background: #ffd43b;
}

.yellow:hover {
  background: #ffe066;
}

.yellow-note {
  color: #ffe066;
}

.orange {
  background: #ffa94d;
}

.orange:hover {
  background: #ffc078;
}

.lime {
  background: #a9e34b;
}

.lime:hover {
  background: #c0eb75;
}

.teal {
  color: #38d9a9;
}

.indigo {
  background: #91a7ff;
}

.indigo:hover {
  background: #bac8ff;
}

.pink {
  background: #faa2c1;
}

.pink-fg {
  color: #faa2c1;
}

.pink:hover {
  background: #fcc2d7;
}

.icon-left {
  margin-right: .7rem;
}

#status {
  background: #1b2904;
  color: #73e619;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--space-3xs);
  margin-top: var(--space-s);
}

#record, #stop {
  display: none;
  width: 5em;
}

.audio {
  margin-top: var(--space-l);
}

audio {
  width: 100%;
}

article {
  width: 100%;
  background: #212529;
  padding: var(--space-s);
  border-radius: var(--space-2xs);
  margin-bottom: var(--space-m);
}

article button {
  margin-bottom: var(--space-3xs);
}

input, textarea {
  font-family: inherit;
  font-size: inherit;
  background: #343a40;
  color: inherit;
  padding: var(--space-xs);
  border-radius: var(--space-2xs);
  border: 0;
  width: 100%;
}

textarea {
  height: 4em;
}

article button {
  margin-right: var(--space-s);
}

#buttons {
  display: inline-block;
}

#recordings {
  margin-top: var(--space-l);
}

.buttons-p {
  margin: 0;
}

nav button, nav .button {
  font-size: 80%;
  padding: var(--space-3xs) var(--space-xs);
  margin: var(--space-3xs);
}

#top {
  height: 30em;
  /*width: 80vw;
  margin-left: calc(-1 * ((80vw - var(--container-width)) / 2));*/
}

#bottom {
  height: 10em;
}

.done {
  color: #999;
}

.done:after {
  content: " Complete!";
  font-size: 80%;
  color: #e25970;
  font-weight: bold;
}

footer {
  margin-top: var(--space-2xl);
  font-size: 80%;
  color: #999999;
}