nav,
footer {
	font-size: var(--default-font-size);
	color: var(--dark-font);
}

nav {
	background-image: none;
	height: auto;
	padding: 60rem 0 30rem;
}

nav .aStyle1 {
	border: 2rem solid var(--accent-color-varient);
	color: var(--accent-color-varient);
}

nav p {
	display: none;
}

.aLogo {
    background: url(/media/logoBlue.svg) no-repeat;
    background-position: center;
    background-size: contain;
    height: 20rem;
    width: 200rem;
}

footer {
	background-image: url(/media/textureBackground.png);
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	border-top: 4rem solid var(--accent-color-varient);
	padding-top: 20rem;
	width: 100%;
}

.footerBackground {
	background: url(/media/grandRapidsSkyline.png) no-repeat;
	background-size: cover;
	background-position: center;
	height: 500rem;
	margin-top: 60rem;
	width: 100%;
}

footer .aLogo {
    background: url(/media/logo.svg) no-repeat;
    background-position: center;
    background-size: contain;
}

/* Desktop portrait layout. */
@media (min-width: 742px) and (max-width: 1330px) {
	nav {
		background-attachment: local;
		background-position: center;
		background-size: cover;
	}
}

/* Mobile portrait layout. We do not implement a mobile landscape layout because we do not see value in it. */
@media (max-width: 742px) {
	.aLogo {
		height: 30rem;
		margin-bottom: 20rem;
		order: 1;
		width: 100%;
	}

	nav,
	footer {
		font-size: 18rem;
	}

	nav,
	nav.navInterior {
		padding: 20rem 0 0;
	}

	nav a {
		text-align: center;
		width: 100%;
	}

	nav .flex,
	footer .flex div:first-child {
		order: 2;
	}

	footer .flexOneThird {
		order: 1;
	}

	footer .flexTwoThirds {
		order: 2;
	}

	.footerBackground {
		background-size: cover;
    	height: 100rem;
    	margin-top: 40rem;
	}
}