:root {
	--colorA: #000;
	--colorB: #444;
	--colorC: #888;
	--colorD: #ccc;
	--colorE: #f8f8f8;
	--colorF: #fff;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html,
body,
.container {
	width: 100%;
	height: 100%;
	font-family: sans-serif;
}

table {
	border-collapse: collapse;
}

.container {
    display: grid;
    grid-template-areas:
        "nav nav"
        "aside main"
        "footer footer";
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
}

@media (min-width: 600px) {
	.container {
		grid-template-areas:
			"nav nav"
			"aside main"
			"footer footer";
		grid-template-columns: auto 1fr;
		grid-template-rows: auto 1fr auto;
	}
}

nav {
	grid-area: nav;
}

nav img {
	max-height: 4rem;
}

nav li {
    list-style: none;
    display: inline-block;
    padding: 0.5rem;
}

aside {
	grid-area: aside;
}

main {
	grid-area: main;
}

footer {
	grid-area: footer;
	display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-items: start;
    padding-block: 1rem;
    box-shadow: 0px 0px 3px #0008;
    background: var(--colorF);
	color: var(--colorB);
}

@media (min-width: 600px) {
	footer {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

footer a {
	color: var(--colorB);
	text-decoration: none;
    display: inline-block;
    padding: 0.25rem;
}

footer i {
	color: var(--colorB);
	padding-right: 0.25rem;
}

footer a:hover,
footer a:hover i {
	color: var(--colorC);
}