: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 {
/*
	background: url(/images/icon.svg);
	background-size: 40%;
	background-repeat: no-repeat;	
	background-attachment: fixed;
	background-position: center;	
*/
	
	
	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;
}



#footer a {
    text-decoration: none;
}

#splash {
	position: relative; 
	width: 100%; 
	height: 100%; 
	margin: auto; 
	display: flex; 
	align-items: center; 
	justify-content: center;
}	

#splash #icon {
	z-index: 1; position: absolute; width: 40%; opacity: 30%;
}	

#splash #website {
	z-index: 2; position: absolute; width: 60%;"
}