/* defining the general look all in one page */

:root{
    --color-light-text:  rgb(214, 216, 253);
    --color-light-text-2:rgb(167, 154, 255);
    /* --color-light-text: rgb(157, 229, 255);
    --color-light-text-2: rgb(255, 255, 255); */
    --color-background: rgb(0, 0, 0);
    --color-dark-text: rgb(54, 54, 54);
    --color-link: rgb(128, 156, 255);
    --color-h1: rgb(62, 70, 84);
    --color-h2: var(--color-background);
    --color-h3: rgb(23, 11, 84);

    --font-body-family: "Quantico", sans-serif;
    --font-body-weight: 400;
    --font-header-family: "Orbitron", sans-serif;

    --nav-spacing: 10px;
    --nav-logo-font-size: 20px;
    --nav-other-font-size: 14px;

    --padding: 17px;
    --grid-spacing: 20px;
    --flex-spacing: 10px;
}

body.dark-mode{
    --color-light-text:  rgb(28, 0, 59);
    --color-light-text-2:rgb(59, 59, 59);
    /* --color-light-text: rgb(157, 229, 255);
    --color-light-text-2: rgb(255, 255, 255); */
    --color-background: rgb(255, 255, 255);
    --color-dark-text: rgb(214, 216, 253);
    --color-link: rgb(55, 82, 178);
    --color-h1: rgb(125, 125, 125);
    --color-h2: var(--color-background);
    --color-h3: rgb(182, 168, 255);
}

/*  default colors: 
        cool asthetic to replicate the stars (world builder)

    default fonts: 
        headers - anta
        body - iceland 

    default navigation bar:
        mainly selecting the spacing and the font size

    default grid:
        determining the grid spacing and separation between elements 

*/