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

:root {
  /* Step -2: 12.5px → 12.8px */
  --step--2: clamp(0.7813rem, 0.7747rem + 0.0326vw, 0.8rem);
  /* Step -1: 15px → 16px */
  --step--1: clamp(0.9375rem, 0.9158rem + 0.1087vw, 1rem);
  /* Step 0: 18px → 20px */
  --step-0: clamp(1.125rem, 1.0815rem + 0.2174vw, 1.25rem);
  /* Step 1: 21.6px → 25px */
  --step-1: clamp(1.35rem, 1.2761rem + 0.3696vw, 1.5625rem);
  /* Step 2: 25.92px → 31.25px */
  --step-2: clamp(1.62rem, 1.5041rem + 0.5793vw, 1.9531rem);
  /* Step 3: 31.104px → 39.0625px */
  --step-3: clamp(1.944rem, 1.771rem + 0.8651vw, 2.4414rem);
  /* Step 4: 37.3248px → 48.8281px */
  --step-4: clamp(2.3328rem, 2.0827rem + 1.2504vw, 3.0518rem);
  /* Step 5: 44.7898px → 61.0352px */
  --step-5: clamp(2.7994rem, 2.4462rem + 1.7658vw, 3.8147rem);
  /* Step 6: 53.7477px → 76.2939px */
  --step-6: clamp(3.3592rem, 2.8691rem + 2.4507vw, 4.7684rem);
  /* Step 7: 64.4973px → 95.3674px */
  --step-7: clamp(4.0311rem, 3.36rem + 3.3555vw, 5.9605rem);
  /* Step 8: 77.3967px → 119.2093px */
  --step-8: clamp(4.8373rem, 3.9283rem + 4.5448vw, 7.4506rem);
}

/* @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-l&g=s,l,xl,12 */

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

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

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.6467rem + 2.3913vw, 2.5rem);
}

/* Global Variables */

:root {
  --main-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --date-font: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
  --body-background-color: #fafafa;

  --h1-font-color: #263238;
  --h1-font-size: var(--step-7);
  --h1-font-weight: 800;

  --date-font-color: indianred;
  --date-font-weight: 600;
  --date-font-size: var(--step-1);

  --list-font-color: #455a64;
  --list-font-weight: 400;
  --list-font-size: var(--step-1);
  --flow-space: var(--space-m-l);

  --paragraph-margin-block-end: var(--space-xs-s);

  --body-min-width: 330px;
  --body-max-width: 100ch;
}

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

body {
  font-family: var(--main-font);
  font-optical-sizing: auto;
  background-color: var(--body-background-color);
  min-width: var(--body-min-width);
  max-width: var(--body-max-width);
  text-align: center;
  margin: 0 auto;
  padding: var(--space-s-m);
}

h1 {
  color: var(--h1-font-color);
  font-weight: var(--h1-font-weight);
  font-size: var(--h1-font-size);
}

.date-heading {
  color: var(--date-font-color);
  font-family: var(--date-font);
  font-weight: var(--date-font-weight);
  font-size: var(--date-font-size);
}

li {
  color: var(--list-font-color);
  font-weight: var(--list-font-weight);
  font-size: var(--list-font-size);
  list-style-type: none;
  text-align: center;
}

p {
  margin-block-end: var(--paragraph-margin-block-end);
  border: 1px solid lightblue;
  border-radius: 8px;
  padding: var(--space-3xs-2xs) var(--space-2xs-xs);
}

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