/*This sets a single-column layout when the width is below 800px wide.*/
@media (max-width: 800px) {
    .container  {
        grid-template: 
        "header"
        "aside"
        "main"
        "footer";
    }
    /*This hides 'aside' elements, aka the sidebar, when the above activates.*/
    aside {
        display: none;
    }
}

/*This sets .container to a grid display, defines the grid layout, and the width of each column.*/
.container {
    display: grid;
    grid-gap: 10px;
    grid-template:
    "header header"
    "sidebar main"
    "footer footer"
    / 1fr 3fr;
}

/*This assigns each listed HTML element to a part of the grid defined above.*/
header {grid-area: header;}
aside {grid-area: sidebar;}
main {grid-area: main;}
footer {grid-area: footer;}

/*Testing application of the code from Flight Rising's navbar.*/
.navbar{
    display: block;
    margin-left: 30px;
}

.navbar-glow-hover:hover {
    text-shadow: 0 0 5px #fff, 0 0 5px hotpink, 0 0 5px #fff;
}