:root{
	--comic-font: 'Comic Sans MS', 'Comic Neue', sans-serif;
	--body-bg: var(--bg);
	--main-bg: var(--bg);
	--section-bg: var(--bg);
	--comic-bg: white;
}

/* banner image */
header .banner {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0 0 0 0;
  margin-block-start: 0;
  object-fit: cover;
  grid-column: 1 / -1;
}

body > header > img.banner:first-child {
  display: block;
  width: 100%;
  height: auto;
  margin-block-start: 0 !important; /* no gap above the banner */
  margin-block-end: 0;   /* no gap below the banner */
}

/* to add a custom background on a page */
body	{ background: var(--body-bg); }
main    { background: var(--main-bg); }
section { background: var(--section-bg); }

/* comics description - add extra padding */
#comic-description {
	padding-top: 1em;
	padding-bottom: 1em;
}
/* comic image - make sure there's no spacing between images */
#comic-container img {
  display: block;
  width: 100%;
}

/* Testing 'splash' panel */
#comic-container img.full-bleed {
  width: 100vw;
  max-width: none;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

#comic-container img.half-bleed {
  display: block;
  width: 120%;
  max-width: none;
  margin-left: -10%;
  height: auto;
}

/* comic navigation links */
.comic-navigation {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.comic-navigation .nav-left   { text-align: left; }
.comic-navigation .nav-center { text-align: center; flex: 1; }
.comic-navigation .nav-right  { text-align: right; }
.comic-navigation select      { margin-top: 0.5em; }

/* cyoa comic choice buttons */
#comic-buttons {
	padding: 0.5rem 0.5rem;
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	flex-wrap: wrap;
	/* background-color: white; */
	background: var(--comic-bg);
	width: 100%;
	max-width: none;
}

#comic-buttons:empty { 
	background: none; 
}

#comic-buttons button {
	font-family: var(--comic-font);
	font-size: 1.25rem;
	color: black;
	background-color: #ffb300;
	background-image: radial-gradient(circle, rgba(0,0,0,0.07) 1px, transparent 1px);
	background-size: 4px 4px;
	border: 4px solid #000;
	border-radius:4% 95% 6% 95%/95% 4% 92% 5%; 
	box-shadow: 0.2em 0.2em;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
	transition: transform 0.1s ease-in-out;
}

@media only screen and (max-width: 720px) {
	#comic-buttons button {
		font-size: 0.75rem;
		border: 3px solid #000;
	}
}

#comic-buttons button:hover {
	transform: scale(1.05);
	background-color: #FDD835;
}

/* series archive */
.series-entry {
	--thumb: clamp(8rem, 20vw, 12rem);
	display: grid;
	grid-template-columns: var(--thumb) 1fr;
	gap: 0 1rem;
}

.series-entry h2 {
	margin: 0;
}

.series-entry img {
	grid-row: 1 / span 2;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.series-entry ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.series-entry ul.short-list {
	display: block;
}

.series-entry ul.short-list li + li {
	margin-top: 0.25rem;
}

.series-entry ul.long-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.series-entry:nth-of-type(even) {
	grid-template-columns: 1fr var(--thumb);
}

.series-entry:nth-of-type(even) img {
	grid-column: 2;
}

.series-entry:nth-of-type(even) h2,
.series-entry:nth-of-type(even) ul {
	grid-column: 1;
}