:root, body {
    /* Spacings */
    --spacing--xs: 4px;
    --spacing--s: 8px;
    --spacing--base: 16px;
    --spacing--m: 24px;
    --spacing--l: 32px;
    --spacing--xl: 40px;
    --spacing--2xl: 48px;
    --spacing--3xl: 64px;
    
    /* Font-Sizes */
    --font--size--body-s: 14px;
    --font--size--body: 18px;
    --font-size--h5: 24px;
    --font-size--h4: 32px;
    --font-size--h3: 40px;
    --font-size--h2: 48px;
    --font-size--h1: 64px;

    /* Font-families */
    --font-family--heading: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --font-family--body: ui-sans-serif, system-ui, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

    /* Border-radius */
    --radius--xs: 2px;
    --radius--s: 4px;
    --radius--base: 8px;
    --radius--m: 16px;

    /* Colors */
    --color--background: #111;
    --color--primary: #60241E;
    --color--secondary: #95271D;
    --color--tertiary: #B34A44;
    --color--highlight: #E77B49;

    --color--text--primary: rgb(228, 228, 228);
    --color--text--secondary: rgb(155, 156, 157);
    --color--text--tertiary: rgb(100, 100, 100);
    --color--text--content: rgb(204, 204, 204);
    --color--text--highlight: rgb(243, 243, 243);


    /* Header */
    --header--max-width: 100%;
    --header--height: 60px;
    --header--content--max-width: 100%;
    --header--z-index: 10;

    /* Footer */
    --footer--max-width: 100%;
    --footer--content--max-width: 1024px;

    /* Banner */
    --banner--height: 100vh;
    --banner--content--max-width: 1024px;

    /* Entry */
    --entry--height: 250px;

    /* Main - Content */
    --main--max-width: 768px;

    /* Elements */
    --hr--max-width: 20rem;
    --hr--background-color: var(--color--text--secondary);
}

@media screen and (max-width:768px) { 
    :root, body {
        /* Font-Sizes */
        --font-size--h5: 20px;
        --font-size--h4: 24px;
        --font-size--h3: 32px;
        --font-size--h2: 40px;
        --font-size--h1: 48px;
    }
}