* {
	box-sizing: border-box;
	margin: 0;
	padding: 0; 
	background-color: #141c21;
	color: #bfbaac;
	font-family: 'Consolas', monospace;
}

.page {
    max-width: 64rem; 
    margin: 1rem auto;
    display: grid;
    grid-template-areas:
        "header"
        "body"
        "aside"
        "footer";
    grid-template-columns: minmax(0, 1fr);
    grid-row-gap: 2rem;
}

.page__logo {
    margin: 0;
    font-size: 2rem;
}


.page__nav {
    padding: 1rem;
}

.main-nav ul {
    display: flex;
    justify-content: space-between;
    list-style-type: none;
    align-items: center;
}

.main-nav__item {
    margin-left: 0;
}

.page__header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.page__body {
    grid-area: body;
    background-color: #14211c;
    padding: 1rem;
    box-shadow: 0 0 0 1rem #14211c;
}

.page__aside {
    grid-area: aside;
    text-align: center;
}

.page__aside ul {
    list-style-type: none;
}

.aside__logo {
    margin-bottom: 1rem;
}

.aside__logo img {
    max-width: 100%;
    height: auto;
    max-height: 6rem;
}

.page__footer {
    grid-area: footer;
    text-align: center;
}

@media (min-width: 45rem) {
    .page {
        grid-template-areas:
            "header header"
            "body aside"
            "footer footer";
        grid-template-columns: minmax(0, 1fr) 15rem;
        grid-column-gap: 2rem;
    }

    .main-nav__item {
        margin-left: 2rem;
    }
}

@media (max-width: 44.9rem) {
    .main-nav ul {
        flex-direction: column;
        align-items: flex-start; 
    }

    .main-nav__item {
        margin-left: 0;
        margin-top: 1rem;
    }
}

a {
    color: #b08500;
}