* {
  box-sizing: border-box;
  text-size-adjust: none;
}

@media (max-width: 63.5rem) {
    :root {
	--space-multiplier: 2;
	--font-multiplier: 1.5;
	--font-base: 0.6rem;
    }
}

@media (min-width: 63.5rem) {
    :root {
	--space-multiplier: 1;
	--font-multiplier: 1;
	--font-base: 0rem;
    }
}

:root {
    --space-1: calc(var(--space-multiplier) * 0.5rem);
    --space-2: calc(var(--space-multiplier) * 1.0rem);
    --space-3: calc(var(--space-multiplier) * 1.6rem);
    --space-4: calc(var(--space-multiplier) * 2.3rem);
    --space-5: calc(var(--space-multiplier) * 3.1rem);
    --space-6: calc(var(--space-multiplier) * 4.0rem);
    --space-7: calc(var(--space-multiplier) * 5.0rem);
    
    --font-size-1: calc(var(--font-multiplier) * 0.9rem + var(--font-base));
    --font-size-2minus: calc(var(--font-multiplier) * 1.1rem + var(--font-base));
    --font-size-2: calc(var(--font-multiplier) * 1.2rem + var(--font-base));
    --font-size-3: calc(var(--font-multiplier) * 1.3rem + var(--font-base));
    --font-size-4: calc(var(--font-multiplier) * 1.7rem + var(--font-base));
    --font-size-5: calc(var(--font-multiplier) * 2.0rem + var(--font-base));
    --font-size-6: calc(var(--font-multiplier) * 2.5rem + var(--font-base));
    --font-size-7: calc(var(--font-multiplier) * 3.0rem + var(--font-base));

    --color-neutral-light: hsl(1, 0%, 70%);
    --color-neutral-lighter: hsl(1, 0%, 85%);
    --color-neutral-lightest: hsl(1, 0%, 95%);
    
    --color-neutral-dark: hsl(1, 0%, 20%);
    --color-neutral-darkish: hsl(1, 0%, 35%);
    --color-neutral-darkishish: hsl(1, 0%, 50%);

    /* sun */
    --color-1: #fe7658;
    /* mountains */
    --color-2: #558278;
    /* trees */
    --color-3: #5d3c57;
    /* sky */
    --color-4: #e7dda7;
    /* water */
    --color-5: hsl(180,26%,76%);
}