*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-default);
    font-size: var(--font-size-base);
    color: var(--color-secondary);
    line-height: 1.5;
}

:root {
    --color-primary: #ee2222;
    --color-secondary: #757575;
    --color-accent: #f00;
    --color-neutral-light: #eee;
    --color-neutral-lighter: whitesmoke;
    --color-neutral-border: #d1d1d1;
    --color-neutral-border-light: #ccc;
    --color-neutral-border-dark: #757575;
    --color-footer-text: #a0a0a0;

    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 10px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-xxl: 50px;

    --font-default: arial, verdana, sans-serif;
    --font-size-base: 0.8125rem; /* 13px */
    --font-size-small: 0.75rem; /* 12px */
}

.container {
    margin: 0 var(--spacing-xl);
}