/* @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 {
    /* Fluid fonts */
    --step--2: clamp(0.80rem, calc(0.83rem + -0.04vw), 0.82rem);
    --step--1: clamp(0.99rem, calc(0.99rem + 0.02vw), 1.00rem);
    --step-0: clamp(1.19rem, calc(1.17rem + 0.11vw), 1.25rem);
    --step-1: clamp(1.43rem, calc(1.38rem + 0.24vw), 1.56rem);
    --step-2: clamp(1.71rem, calc(1.63rem + 0.42vw), 1.95rem);
    --step-3: clamp(2.05rem, calc(1.92rem + 0.68vw), 2.44rem);
    --step-4: clamp(2.46rem, calc(2.26rem + 1.03vw), 3.05rem);
    --step-5: clamp(2.96rem, calc(2.66rem + 1.50vw), 3.82rem);
    
    /* Spacing */
    --space-3xs: clamp(0.31rem, calc(0.31rem + 0.00vw), 0.31rem);
    --space-2xs: clamp(0.63rem, calc(0.63rem + 0.00vw), 0.63rem);
    --space-xs: clamp(0.88rem, calc(0.85rem + 0.11vw), 0.94rem);
    --space-s: clamp(1.19rem, calc(1.17rem + 0.11vw), 1.25rem);
    --space-m: clamp(1.81rem, calc(1.79rem + 0.11vw), 1.88rem);
    --space-l: clamp(2.38rem, calc(2.33rem + 0.22vw), 2.50rem);
    --space-xl: clamp(3.56rem, calc(3.50rem + 0.33vw), 3.75rem);
    --space-2xl: clamp(4.75rem, calc(4.66rem + 0.43vw), 5.00rem);
    --space-3xl: clamp(7.13rem, calc(6.99rem + 0.65vw), 7.50rem);
  
    /* One-up pairs */
    --space-3xs-2xs: clamp(0.31rem, calc(0.20rem + 0.54vw), 0.63rem);
    --space-2xs-xs: clamp(0.63rem, calc(0.52rem + 0.54vw), 0.94rem);
    --space-xs-s: clamp(0.88rem, calc(0.74rem + 0.65vw), 1.25rem);
    --space-s-m: clamp(1.19rem, calc(0.95rem + 1.20vw), 1.88rem);
    --space-m-l: clamp(1.81rem, calc(1.57rem + 1.20vw), 2.50rem);
    --space-l-xl: clamp(2.38rem, calc(1.90rem + 2.39vw), 3.75rem);
    --space-xl-2xl: clamp(3.56rem, calc(3.06rem + 2.50vw), 5.00rem);
    --space-2xl-3xl: clamp(4.75rem, calc(3.79rem + 4.78vw), 7.50rem);
    
    /* Columns */
    --grid-max-width: 77.50rem;
    --grid-gutter: var(--space-s-l, clamp(1.13rem, calc(0.65rem + 2.39vw), 2.50rem));
    --grid-columns: 12;
    
    /* Default color scheme: */
    --rosewater: #dc8a78;
      --flamingo: #dd7878;
      --pink: #ea76cb;
      --mauve: #8839ef;
      --red: #d20f39;
      --maroon: #e64553;
      --peach: #fe640b;
      --yellow:	#df8e1d;
      --green: #40a02b;
      --teal: #179299;
      --sky: #04a5e5;
      --sapphire: #209fb5;
      --blue: #1e66f5;
      --lavender: #7287fd;
      --text: #4c4f69;
      --subtext-1: #5c5f77;
      --subtext-0: #6c6f85;
      --overlay-2: #7c7f93;
      --overlay-1: #8c8fa1;
      --overlay-0: #9ca0b0;
      --surface-2: #acb0be;
      --surface-1: #bcc0cc;
      --surface-0: #ccd0da;
      --base: #eff1f5;
      --mantle: #e6e9ef;
      --crust: #dce0e8;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      color-scheme: dark;
      --rosewater: #f2d5cf;
      --flamingo: #eebebe;
      --pink: #f4b8e4;
      --mauve: #ca9ee6;
      --red: #e78284;
      --maroon: #ea999c;
      --peach: #ef9f76;
      --yellow: #e5c890;
      --green: #a6d189;
      --teal: #81c8be;
      --sky: #99d1db;
      --sapphire: #85c1dc;
      --blue: #8caaee;
      --lavender: #babbf1;
      --text: #c6d0f5;
      --subtext1: #b5bfe2;
      --subtext0: #a5adce;
      --overlay2: #949cbb;
      --overlay1: #838ba7;
      --overlay0: #737994;
      --surface2: #626880;
      --surface1: #51576d;
      --surface0: #414559;
      --base: #303446;
      --mantle: #292c3c;
      --crust: #232634;
    }
  }
  html 
  {
      height:100%;
      box-sizing: border-box;
  }
  body {
      height:100%;
      font-family: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
      font-size: var(--step-0);
      font-weight: 300;
      padding: 0;
      margin: 0;
      min-height: 100%;
  }
  * 
  {
      box-sizing: inherit;
  }
  .u-container {
    max-width: var(--grid-max-width);
    padding-inline: var(--grid-gutter);
    margin-inline: auto;
  }
  
  .u-grid {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
  }