html {
	background-color: #209AC7;
	font-size: 100%;
	font-size: clamp(130%, 1.75vw, 605%);
}

body {
	font-family: 'Nimbus Mono PS', 'Courier New', monospace; 
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	line-height: 1.3;
	color: #ffffff;
	margin: 0;
}

::selection {
	background: #000000;
	text-shadow: none;
	color: #ffffff;
}

h1, h2, h3, h4, h5, h6 {
	font-size: 2em;
	line-height: 1;
	font-weight: 400;
	margin: 0 0 .5em 0;
}

p {
	margin: 0 0 1.5em 0;
}

a,
a:visited {
	color: #ffffff;
	text-decoration: underline;
}

a:active,
a:hover {
	color: #ffffff;
	outline: 0;
	text-decoration: none;
}

ul,
ol {
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	list-style: none;
}

abbr {
	text-decoration: none;
}

img {
	width: 100%;
	border: 0;
	-ms-interpolation-mode: bicubic;
	vertical-align: middle;
	margin: 0;
}

.invisible-text {
	/* hidden for sited people but keeps it there for screen readers */
	clip: rect(0 0 0 0); 
	clip-path: inset(50%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap; 
	width: 1px;
}

#peak-fun {
	padding: 1em;
	display: grid;
	grid-column-gap: 5%;
	grid-row-gap: 0%;
	grid-template-columns: [gap1] 1fr [gap2] 1fr [gap3] 1fr [gap4] 1fr [gap5];
}

#hello {
	font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	grid-row: 1;
	grid-column: gap1/gap5;
}

#terry {
	grid-row: 2;
	grid-column: gap1/gap3;
}

#terry figure {
	transform: rotate(-0.003turn);
}

#max {
	grid-row: 2;
	grid-column: gap3/gap5;
}

#max figure {
	transform: rotate(0.006turn);
}

#justin {
	grid-row: 3;
	grid-column: gap1/gap3;
}

#justin figure {
	transform: rotate(-0.003turn);
	margin-top: -1em;
}

#tristan {
	grid-row: 3;
	grid-column: gap3/gap5;
}

#tristan figure {
	transform: rotate(0.006turn);
	margin-top: -1em;
}

.peak-fun-member {
	padding: .30em .30em .30em .30em;
	margin: 0 0 2em 0;
	background: #ffffff;
	box-shadow: 0.063em 0.063em 0.125em 0em rgba(0, 0, 0, 0.4);
	text-align: center;
}

.peak-fun-member figcaption {
	font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; 
	color: #000000;
}

#connect {
	font-family: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive; 
	grid-row: 4;
	grid-column: gap1/gap5;
}

@media (min-width: 52em) {

	#peak-fun {
		position: relative;
		z-index: 100;
		margin-top: -3em;
	}

	#hello {
		grid-row: 1;
		grid-column: gap3/gap5;
	}

	#terry {
		grid-row: 1;
		grid-column: gap1/gap2;
	}

	#max {
		grid-row: 1;
		grid-column: gap2/gap3;
	}

	#max figure {
		margin-top: 3em;
	}

	#justin {
		grid-row: 2;
		grid-column: gap3/gap4;
	}

	#justin figure {
		margin-top: -2em;
	}

	#tristan {
		grid-row: 2;
		grid-column: gap4/gap5;
	}

	#connect {
		grid-row: 2;
		grid-column: gap1/gap3;
	}

}

@media (min-width: 55em) {

	#justin figure {
		margin-top: -3em;
	}

}

@media (min-width: 65em) {

	#justin figure {
		margin-top: -5em;
	}

	#tristan figure {
		margin-top: -2em;
	}

}

@media (min-width: 68em) {

	#justin figure {
		margin-top: -7em;
	}

}

#shows-upcoming,
#shows-previous {
	padding: 0 1em 1em 1em;
}

#shows-previous {
	display: none;
}

.show-listings h2 {
	font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
	text-decoration-line: underline;
	text-decoration-style: wavy;
	text-decoration-color: #ffffff;
	font-style: italic;
	text-transform: uppercase;
}

.shows-list__item {
	margin: 0 0 2em 0;
}

.shows-list__item span {
	display: block;
}

@media (min-width: 50em) {

	#shows-upcoming {
		position: relative;
		z-index: 200;
		margin: -4em 0 0 0;
	}

	#shows-previous {
		margin: 2em 0 0 0;
	}

	.shows-list {
		display: grid;
		grid-column-gap: 5%;
		grid-template-columns: 1fr 1fr;
	}

}