/*		Colour list		*/
:root {
    --black: #000;
	--oxfordNavy: #12355B;
    --midnightViolet: #420039;
    --saffron: #f8c630;
    --goldenRod: #D9A408;
    --oliveLeaf: #63602c;
    --chocolate: #D56E20;
}
/*		Setting up standard background and grid display		*/
body{
    background-color: black;
    display: grid;
    gap: 5px;
    grid-template-columns: 2fr 10fr;
    grid-template-rows: 2fr 1fr 15fr 1fr;
    grid-template-areas: 
        "header header"
        "nav nav"
        "aside main"
        "footer footer";
    color: var(--black);
    height: 100vh;
    width: 100vw;
    margin: 0;
}
header{
    background-color: var(--oxfordNavy);
    grid-area: header;
    display: flex;
    align-items: center;
}
#headerImage{
    width: 50px;
    height: 50px;
}
header h1{
    background-color: var(--saffron);
    font-size: 3em;
}
nav{
    background-color: var(--oliveLeaf);
    /*		Grid display for the navigator list		*/
    grid-area: nav;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas: 
        "nav1 nav2 nav3 nav4";
}
#nav1{
    grid-area: nav1;
}
#nav2{
    grid-area: nav2;
}
#nav2{
    grid-area: nav3;
}
#nav4{
    grid-area: nav4;
}
.navButton{
    margin: 10px;
    background-color: var(--saffron);
    padding-block: 1px;
    padding-inline: 6px;
    border-width: 2px;
    border-style: outset;
    border-color: buttonborder;
    text-align: center;
}
.navButton:hover{
    background-color: var(--goldenRod);
}
aside{
    background-color: var(--saffron);
    grid-area: aside;
    padding: 22px;
}
main{
    background-color: var(--chocolate);
    grid-area: main;
}
footer{
    background-color: var(--midnightViolet);
    grid-area: footer;
}
footer p {
    background-color: var(--chocolate);
    max-width: fit-content;
}