body {
	background: var(--blue);
}

main {
	> .left, > .right {
		background-image: url('../images/garfield_bg_blue_2x.jpg');
	}
}

main > .center > .wrapper {
	position: relative;
	background: var(--white);
	border: 3px var(--black) solid;
	padding-bottom: 2.5rem;
	@media screen and (width >= 800px) { min-height: min(550px,55vw); }
	@media screen and (width < 800px) { min-height: min(550px,65vw); }
	
	height: fit-content;
	width: min(700px,100%);
	max-width: 100%;
	margin: max(1rem,5vh) auto;
	
	> header {
		h1 { margin-bottom: 0; }
		p {
			margin-top: -.25em; margin-bottom: 1.5rem;
			font-family: 'Ad Lib','Garfield',sans-serif;
			text-transform: uppercase;
			font-size: min(2rem, 5vw);
			color: var(--yellow);
			--text-shadow-color: var(--black);
			text-shadow:
				-1px -1px 0 var(--text-shadow-color), 1px -1px 0 var(--text-shadow-color), -1px 1px 0 var(--text-shadow-color), 1px 1px 0 var(--text-shadow-color),
				-2px 0 0 var(--text-shadow-color), 2px 0 0 var(--text-shadow-color), -2px 0 0 var(--text-shadow-color), 2px 0 0 var(--text-shadow-color),
				0 -2px 0 var(--text-shadow-color), 0 -2px 0 var(--text-shadow-color), 0 2px 0 var(--text-shadow-color), 0 2px 0 var(--text-shadow-color),
				-2px -1px 0 var(--text-shadow-color), 2px -1px 0 var(--text-shadow-color), -2px 1px 0 var(--text-shadow-color), 2px 1px 0 var(--text-shadow-color),
				-1px -2px 0 var(--text-shadow-color), 1px -2px 0 var(--text-shadow-color), -1px 2px 0 var(--text-shadow-color), 1px 2px 0 var(--text-shadow-color),
				-2px -2px 0 var(--text-shadow-color), 2px -2px 0 var(--text-shadow-color), -2px 2px 0 var(--text-shadow-color), 2px 2px 0 var(--text-shadow-color)
		}
	}
}

#comic-insert {
	position: relative;
	z-index: 1;
	display: block;
	margin: 0 auto 1rem auto;
	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
	max-width: min(600px,100%);
}
#comic-wrapper {
	position: relative;
	min-height: min(220px,25vw);
	width: 94%;
  margin: 0 auto;
	
	figcaption { margin-bottom: .5em; }
	
	&:before {
		content: 'Loading...';
		position: absolute;
		left: 0; top: 0;
		line-height: min(200px,20vw);
		width: 100%;
		height: 100%;
	}
}

#comic-nav {
	position: absolute;
	left: 0;
	bottom: 0;
	transform: translateY(50%);
	z-index: 3;
	width: 100%;
	display: flex;
	justify-content: space-between;
}

#prev, #next {
	display: block;
	font-family:'Ad Lib','Garfield',sans-serif;
	text-transform: uppercase;
	img { display: block; }
}
@media screen and (width < 1100px) {
	#next { transform: translateX(6%); }
	#prev { transform: translateX(-6%); }
}
@media screen and (width >= 1100px) {
	#prev, #next {
		display: block;
		position: relative;
		font-family:'Ad Lib','Garfield',sans-serif;
		span {
			position: absolute;
			bottom: 40%;
			text-transform: uppercase;
		}
	}
	#next {
		transform: translateX(48%);
		span { left: 65%; }
	}
	#prev {
		transform: translateX(-48%);
		span { right: 65%; }
	}
}