/*stylesheet for game-boy-camera-gallery.html*/
:root {
	--base-dark: #555566;
	--base-light: #dddddd;
	--primary-med: #991144;
	--secondary-med: #441199;
	--tertiary-med: #449911;
}

body {
	margin: 0;
	padding: 0;
	font-family: verdana;
	line-height: 150%;
	color: var(--base-dark);
	background-color: var(--base-light);
}

h1 {
	text-align: center;
}

section {
	margin: 1em;
}

#banner {
	margin: 36px 0;
	height: 200px;
	background: url('../game-boy-camera/banner.png') center; /*image is nearly 10000 pixels wide because repeat-X didn't want to cooperate and thanks to PNG compression it only added 1.5 kbytes*/
	outline-width: 36px;
	outline-style: solid;
	outline-color: var(--base-dark);
	image-rendering: -webkit-optimize-contrast;
	image-rendering: pixelated;
	image-rendering: crisp-edges;
	background-size: auto 100%;
}

.gallery {
	list-style: none;
	display: grid;
	grid-auto-flow: row;
	align-items: start;
	grid-gap: 0.5em;
	gap: 0.5em;
	padding-left: 0; /*<ul> has padding-left but not right set by default*/
	clear: both;
	& img {
		max-width: 100%;
	}
	& figcaption {
		max-width: calc(100% - 1.5em);
		margin: 0;
	}
	& li {
		text-align: left;
	}
}

figcaption { 
	hyphens: auto;
	border-width: 0 0 0 0.25em;
	border-color: var(--primary-med);
	border-style: solid;
	padding-left: 1.25em;
	margin-left: 0.25em;
	background-color: #ffffff;
}

#intro {
	padding: 0.5em 15% 0;
}

hr {
	margin: 1em 0;
}

a {
	text-decoration: none;
	color: var(--primary-med);
	font-weight: bold;
	&:link {
		text-decoration: none;
		color: var(--primary-med);
		font-weight: bold;
	}
	&:hover, &:active {
		text-decoration: underline;
		color: var(--secondary-med);
	}
	&:hover img {
		outline: 0.5rem solid var(--secondary-med);
	}
	&:visited {
		color: var(--tertiary-med);
	}
}

/*fix banner on narrow displays*/
@media only screen and (max-width: 50em) {
	#banner {
		margin: calc(36px / var(--dpr)) 0;
		height: calc(200px / var(--dpr));
		outline-width: calc(36px / var(--dpr));
	}
}