:root {
    --color-dark: #050505;
    --color-light: #fafafa;
    --color-accent: orange;

    --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);
    --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);

    --border-thin: var(--s-5);
    --border-thick: var(--s-2);
    
    --measure: 65ch;
}

html {
    box-sizing: border-box;
}

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

 /* Exception-based styling ----------------------- */
blockquote, body, dd, dl, figure, h1, h2, h3, h4, p {
    margin-block: 0;
}

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

    min-height: 100vh;
    margin-inline: 0;
    /* padding: var(--s1); */
}


.box {
    padding: var(--s1);
    border: var(--border-thin) solid;

    background-color: var(--color-dark);
    color: var(--color-light);
} 
    
.box * {
    /* ↓ Force colors to inherit from the parent and honor inversion (below) */
    /* Changing the background-color often requires you to change the color to ensure the content is still legible. 
    This can be made easier by applying color:inherit to any elements inside that Box.
    By forcing inheritance, you can change the color—along with the background-color—in one place: on the Box itself. 
    */
    color: inherit;
    background-color: var(--color-dark)
} 

.box.invert {
    filter: invert(100%);
}