:root {
    --dark: hsl(243, 76%, 5%);
    --light: hsl(0, 0%, 95%);
    --accent: hsl(60, 70%, 65%);
    --primary: hsl(210, 59%, 70%);
    --secondary: hsl(210, 71%, 80%);

    --text: var(--dark); 
    --foreground: var(--dark);
    --background: var(--light)
}

.darkMode {
    --dark: hsl(243, 76%, 5%);
    --light: hsl(243, 76%, 95%);
    --primary: hsl(210, 59%, 30%);
    --secondary: hsl(210, 71%, 80%);
    --accent: hsl(60, 70%, 65%);

    --text: var(--light); 
    --foreground: var(--light);
    --background: var(--dark);
}

#btnDarkMode {
    position: relative;
    z-index: 10;
    /* top: 0.5em; */
    right: 0.25em;
    color: var(--light);
    /* background-color: var(--background); */
    border: 2px solid currentColor;
    padding: 4px;
    background: transparent;
    cursor: pointer;
    border-radius: 5px;
    width: 2em;
    height: 2em;    
}

body {
    font-family: Verdana, Geneva, Tahoma, sans-serif;

    background-color: var(--background);    
    display: grid;
    height: 100%;
    width: 100%;
    margin: 0;
    place-items: center;
    grid-template-rows: 3em 1fr 3em;
    grid-template-areas: 
    'navigation'
    'main'
    'footer';
}

#nav {
    grid-area: navigation;
    background-color: var(--dark);
    border-radius: 10px;
    width: 80%;



    position: fixed;
    top: 5px;
    /* margin: 10px 20px 30px 40px; */

    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.75em;

    /* margin: 0 auto;  */
    /* margin-top: 1em; */

}

#main {
    display: flex;
    background-color: var(--background);
    grid-area: main;

    width: 100%;
    height: 100%;
}

#footer {
    grid-area: footer;
    background-color: var(--primary);    
    color: var(--secondary);
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: center;
}


#logo {
    height: 2em;
    margin-right: auto;
}

#logo img {
    stroke: var(--light);
}


#footer a {
    text-decoration: none;
}

.splash {
    margin: auto;
    width: 25%; 
}

.splash svg {
    fill: var(--foreground);
    stroke: var(--secondary);
}