/* */
:root {
	--bgc: #fff;
	--bodyc: #444;
	--h1c: #000;
	--linkc: #444;
	--linkvc: #000;
	--linkhc: #ccc;
	--footerc: #000;
	--asidec: #000;
	--strongc: #000;
}
@media screen and (prefers-color-scheme: dark) {
	:root {
		--bgc: #000;
		--bodyc: #bbb;
		--h1c: #fff;
		--linkc: #bbb;
		--linkvc: #fff;
		--linkhc: #333;
		--footerc: #fff;
		--asidec: #fff;
		--strongc: #fff;
	}
}
body {
	margin: auto;
	max-width: 640px;
	line-height: 1.6;
	font-family: 'Roboto', sans-serif;
	font-size: 1em;
	background-color: var(--bgc);
	color: var(--bodyc);
	padding: 0 1em;
    text-align: left;
}
h1, h2, h3 {
	line-height: 1.2;
}
h1 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 3.375em;
	font-weight: bold;
	color: var(--h1c);
}
h2 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 2.25em;
	font-weight: 400;
}
.center {
	text-align: center;
}
h3 {
	font-family: 'Lexend Deca', sans-serif;
	font-size: 1.5em;
	font-weight: 400;
}
a:link {
	color: var(--linkc);
	transition: color 0.4s ease-in-out;
    text-decoration:
}
a:visited {
	color: var(--linkvc);
}
a:hover {
	color: var(--linkhc);
}
a.navlink {
	text-decoration: none;
}
footer {
	font-size: 8pt;
	font-family: 'Lexend Deca', sans-serif;
	color: var(--footerc);
	background-color: transparent;
	font-weight: 400;
	font-variant: normal;
	text-decoration: none;
    text-align: center;
	vertical-align: baseline;
	white-space: pre-wrap;
}
.footerimg {
	height: 1em;
	width: auto;
}
aside {
	font-size: 8pt;
	font-family: 'Roboto', sans-serif;
	color: var(--asidec);
	background-color: transparent;
	font-weight: 400;
	font-variant: normal;
	text-decoration: none;
	vertical-align: baseline;
	white-space: pre-wrap;
}
strong {
	color: var(--strongc);
	font-weight: 900;
}
ul {
	list-style: none;
	padding-left: 0;
	align-items: left;
    vertical-align: middle;
}
.iconimg {
    height: 1em;
    width: auto;
    vertical-align: text-top;
}


/* Navigation & layout begins here */

/* Nav:DefineElements */
#container>header {
	grid-area: header;
}
#container>nav {
	grid-area: nav;
}
#container>article {
	grid-area: article;
}
#container>footer {
	grid-area: footer;
}
#container>aside {
	grid-area: aside;
}

/* Nav:Implement */
#container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	display: grid;
	grid-template-columns: 52% auto%;
	grid-template-rows: auto;
	grid-column-gap: 0%;
	grid-template-areas:
        "header header"
        "article aside"
        "footer footer"
}

/* Nav:Mobile/Responsive */
@media (max-width: 640px) and (orientation: portrait) {
	nav ul {
		list-style: none;
		padding-left: 0;
		padding-right: 0;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: center;
	}
	#container {
		margin-left: auto;
		margin-right: auto;
		padding-left: 0;
		padding-right: 0;
		width: 100%;
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: auto;
		grid-template-areas: 
            "header" 
            "nav" 
            "aside"
			"article" 
            "footer"
	}
	img{
		align-content: center
	}
}