body {
    /* ---COLOR DEFINITIONS--- */
    --light-bg-color: #a6c4a5;
    --light-primary-color: #400016;
    --light-secondary-color: #E5DCBD;
    --light-tertiary-color: #547271;
    --light-visited-color: #685075;

    --dark-primary-color: #dbb780;
    --dark-secondary-color: #271820;
    --dark-tertiary-color: #9c676e;
    --dark-visited-color: #869189;
    /* ----------------------- */

    --bg-color: var(--light-bg-color);
    --primary-color: var(--light-primary-color);
    --secondary-color: var(--light-secondary-color);
    --tertiary-color: var(--light-tertiary-color);
    --visited-color: var(--light-visited-color);

    background-color: var(--bg-color);
    color:var(--primary-color);
}

main {
    & div, 
    & article {
        background-color: var(--secondary-color);
        outline-color: var(--primary-color);
        color: var(--primary-color);
    }
}


/* ---TEXT--- */
h2 {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

em,
mark  {
    background-color: var(--primary-color);
    color: var(--secondary-color);
}

a {
    color: var(--tertiary-color);

    &:visited {
        color: var(--visited-color);
    }
}

hr {
    background-color: var(--primary-color);
}
/* ---------- */


article > p:has(time) {
    background-color: var(--primary-color);
    color: var(--secondary-color);

    & time {
        color: var(--secondary-color);
    }
}


blockquote {
    background-color: var(--primary-color);

    & p {
        color: var(--secondary-color);
    }
}


header nav a {
    background-color: var(--primary-color);

    & > div {
        background-color: var(--primary-color);

        & > div {
            background-color: var(--secondary-color);
        }
    }

    & .dark-mode {
        background-color: var(--tertiary-color);
    }
}


footer {
    background-color: var(--primary-color);
    color: var(--primary-color);

    & * {
        color: var(--secondary-color);
    }

    & p mark {
        color: var(--primary-color);
        background-color: var(--secondary-color);
    }

    & a {
        color: var(--secondary-color);
        &:visited {
            color: var(--secondary-color);
        }
    }
}