:root {
    --color-dark: #050505;
    --color-darkish: #404040;
    --color-lightish: #e6e6e6;
    --color-light: #fafafa;
    --color-mid: grey;

    --s-5: clamp(0.33rem,0.39rem + -0.29vw,0.18rem);
    --s-4: clamp(0.41rem,0.47rem + -0.31vw,0.25rem);
    --s-3: clamp(0.51rem,0.57rem + -0.31vw,0.35rem);
    --s-2: clamp(0.64rem,0.69rem + -0.27vw,0.5rem);
    --s-1: clamp(0.8rem,0.84rem + -0.18vw,0.71rem);
    /* define a range; minimum, scaling factor (+vw(1vw=1%))for dynamic adjustment, maximum */
    --s0: clamp(1rem,1rem + 0vw,1rem);
    --s1: clamp(1.25rem,1.19rem + 0.32vw,1.41rem);
    --s2: clamp(1.56rem,1.39rem + 0.85vw,2rem);
    --s3: clamp(1.95rem,1.61rem + 1.7vw,2.83rem);
    --s4: clamp(2.44rem,1.83rem + 3.04vw,4rem);
    --s5: clamp(3.05rem,2.04rem + 5.07vw,5.65rem);

    --space-xs: clamp(0.4375rem, 0.42rem + 0.10vw, 0.5rem);
    --space-s: clamp(0.875rem, 0.83rem + 0.20vw, 1rem);
    --space-m: clamp(1.3125rem, 1.25rem + 0.29vw, 1.5rem);
    --space-l: clamp(2.1875rem, 2.09rem + 0.49vw, 2.5rem);
    --space-xl: clamp(3.0625rem, 2.92rem + 0.69vw, 3.5rem);
    --space-2xl: clamp(3.5rem, 3.34rem + 0.78vw, 4rem);
    --space-3xl: clamp(4.375rem, 4.17rem + 0.98vw, 5rem);
    --space-4xl: clamp(6.5625rem, 6.26rem + 1.47vw, 7.5rem);
    --space-xs-l: clamp(0.4375rem, -0.23rem + 3.24vw, 2.5rem);
    --space-m-l: clamp(1.3125rem, 0.93rem + 1.86vw, 2.5rem);
    --space-2xl-4xl: clamp(3.5rem, 2.21rem + 6.27vw, 7.5rem);

    --gutter: var(--space-m-l);
}

body {
    background-color: var(--color-dark);
    color: var(--color-light);

    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;

    padding: 1rem;
}
/*
CLUSTER
A layout that lets you distribute items with consitent
spacing, regardless of their size

CUSTOM PROPERTIES AND CONFIGURATION
--gutter (var(--space-m)): This defines the space
between each item.

--cluster-horizontal-alignment (flex-start) How items should align
horizontally. Can be any acceptable flexbox aligmnent value.

--cluster-vertical-alignment How items should align vertically.
Can be any acceptable flexbox alignment value.
*/


.cluster {
    /* ↓ Set the Flexbox context */
    display: flex;

    /* not necessary */
    /* flex-direction: column; */

    /* ↓ Enable wrapping */
    flex-wrap: wrap;

    /* ↓ Set the space/gap */
    /* gap: var(--space, 1rem); */ /* org */
    gap: var(--gutter, var(--space-m));

    /* ↓ Choose your justification (flex-start is default) */
    justify-content: var(--cluster-horizontal-alignment, center);
    /* ↓ Choose your alignment (flex-start is default) */
    align-items: var(--cluster-vertical-alignment, center);
}

li {
    padding: 5rem 1rem;
    text-align: center;
    list-style-type: none;

    color: var(--color-dark);
    background-color: var(--color-light);
  }