* {
	box-sizing: border-box;
}

body {
	max-width: 65rem;
	margin: 0 auto;
	display: grid;
	grid-template-rows: 8rem 1fr 1.5rem;
	grid-template-columns: 15rem 1fr 12rem;
	grid-template-areas: "header header header" "left-nav main right-nav" "footer footer footer";
	font-family: sans-serif;
	background: #220044;
	line-height: 1.5em;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

img {
	border: 2px solid transparent;
}

a img:hover {
	border: 2px solid #ffff00;
}

div.header {
	grid-area: header;
	color: #ddddff;
	text-align: center;
}

div.header .title {
	font-size: 2.5rem;
	margin: 1.25rem 0 0 0;
	line-height: 2.5rem;
}

div.header .title a {
	color: white;
}

div.header .subtitle {
	font-size: 2rem;
	margin: 0.25rem 0 1rem 0;
	line-height: 2rem;
}

body > .header .nav-button {
	display: none;
}

div.header .border {
	background: #05793f;
	height: 1rem;
}

div.left.nav {
	grid-area: left-nav;
	background: #05793f;
	color: #ddddff;
	text-align: center;
}

div.right.nav {
	grid-area: right-nav;
	background: #05793f;
	color: #ddddff;
	text-align: center;
}

div.footer {
	grid-area: footer;
	background: #05793f;
	color: #aaaaaa;
	line-height: 1.5rem;
	text-align: right;
	padding-right: .5rem;
}

div.nav {
	padding: 0.75rem;
}

div.nav > .section {
	border-bottom: 1px solid;
	padding: 0 0 1.5rem 0;
	margin-bottom: 1.5rem;
	overflow: auto;
}

div.nav > .section a, div.nav > .section p {
	margin: 0;
}

div.nav .section a {
	color: #ffff00;
	display: block;
}

div.nav .section > a:not(:first-child), div.nav .section > p:not(:first-child) {
	margin-top: 1.5rem;
}

div.nav .section p.small {
	margin: 0;
	font-size: .75rem;
	line-height: 1em;
}

div.nav .section img {
	width: 100%;
}

div.nav .section > div {
	color: white;
	display: block;
	margin: 1rem 0 1.5rem 0;
}

div.nav .section > span {
	display: block;
	margin: .5rem 0 0 0;
}

div.main {
	grid-area: main;
	background: white;
	padding: 1rem;
}

div.main p {
	margin: 1rem 0 0 0;
	text-align: justify;
}

div.main p:first-child {
	margin: 0;
}

div.main p.center {
	text-align: center;
}

div.main ul {
	padding: 0 0 0 1rem;
}

div.main li {
	margin: 0.5rem 0;
}

div.main img, div.main iframe {
	width: 90%;
	border: 2px solid black;
}

div.main img.wide, div.main iframe.wide {
	width: 100%;
}

div.main iframe.yt169 {
	aspect-ratio: 16 / 9;
}

div.main iframe.yt43 {
	aspect-ratio: 4 / 3;
}

div.main .album {
	margin: 1rem 0 0 0;
	display: grid;
	grid-template-columns: 40% 1fr 20%;
	grid-template-rows: repeat(auto-fill, 1.5rem);
	row-gap: 0.25rem;
	column-gap: 0.5rem;
}

div.main .album .cover {
	grid-row: 1 / -1;
	width: 100%;
}

div.main .album span {
	grid-column: 2 / 2;
	display: block;
	font-size: 1rem;
	line-height: 1.5rem;
}

div.main .album button {
	grid-column: 3 / 3;
	display: block;
	font-size: 0.75rem;
	height: 1.5rem;
	border: 1px solid black;
	background: #3eb278;
}

div.main .album button:hover {
	background: #73c39b;
}

div.main .player {
	display: block;
	width: 100%;
	height: 2rem;
}

div.footer {
	color: white;
}

div.footer a {
	color: #ffff00;
}

@media only screen and (max-width: 65rem) {
	body {
		grid-template-rows: 8rem 1fr 1.5rem;
		grid-template-columns: 1fr;
		grid-template-areas: "header" "main" "footer";
		height: 100vh;
		overflow: hidden;
	}
	body > .header .nav-button {
		display: block;
		float: right;
		height: 7rem;
		padding: 1rem 2rem;
	}
	body > .header svg {
		display: inline-block;
		fill: white;
		height: 100%;
	}
	body > .main {
		overflow: auto;
	}
	body > .main img, body > .main iframe {
		width: 100%;
	}
	body > .nav {
		position: absolute;
		z-index: 10;
		top: 8rem;
		height: 100vh;
		overflow-y: auto;
		transition: left .25s;
	}
	body > .left.nav {
		grid-area: unset;
		left: -15rem;
		width: 15rem;
	}
	body > .right.nav {
		grid-area: unset;
		left: 100vw;
		width: 12rem;
	}
}

@media only screen and (max-width: 45rem) {
	body {
		grid-template-rows: 6rem 1fr 1.5rem;
	}
	body > .nav {
		top: 6rem;
	}
	body > .header .nav-button {
		height: 5.25rem;
		padding: 2rem 1rem;
	}
	body > .header .title {
		font-size: 1.25rem;
		line-height: 1.25rem;
	}
	body > .header .subtitle {
		font-size: 1.25rem;
		line-height: 1.25rem;
	}
}

@media only screen and (max-width: 28rem) {
	:root {
		font-size: 12px;
	}
	body {
		grid-template-rows: 6rem 1fr 1.5rem;
	}
	body > .nav {
		top: 6rem;
	}
	body > .header .nav-button {
		height: 5.25rem;
		padding: 2rem 1rem;
	}
	body > .header .title {
		font-size: 1.25rem;
		line-height: 1.25rem;
	}
	body > .header .subtitle {
		font-size: 1.25rem;
		line-height: 1.25rem;
	}
}