/*
 * Page Structure
 */

body { margin: 0; }

.content-wrapper {
	max-width: 40em;
    margin: 0 auto;
    padding: 0 1em;
}

nav { padding: 0.5em 0; }

main { padding: 1em 0; }

footer {
	padding: 0.5em 0;
	margin: 0 0 2em 0;
}

/*
 * Content Structure
 */

header .content-wrapper {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

h2 {
	clear: both;
}

#bookshelf {
	display: flex;
	flex-direction: column;
}

#bookshelf .book {
	display: grid;
	grid-template-columns: 3fr 7fr;
	margin: 0.5em 0;
}

/* Flex box alternative
#bookshelf .book {
	display: flex;
	flex-direction: row;
	margin: 0.5em 0;
}*/

#bookshelf .book .cover {
	display: flex;
	min-width: 30%;
	align-items: center;
	justify-content: center;
}

#carousel {
	display: flex;
	flex-direction: row;
	overflow: scroll;
	padding: 0.5em 0 1em 0;
	align-items: center;
}

#carousel img {
	margin: 0 0.5em;
	max-height: 8em;
}

.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: dense;
	gap: 0.5em;
}

.gallery .art {
	display: block;
	width: 100%;
	height: 100%;
}

.gallery .art img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: top;
}

.gallery .art.four-grid-cells {
    grid-row: span 2 / auto;
    grid-column: span 2 / auto;
}

.gallery .art.wide-image {
    grid-column: span 2 / auto;
}

.gallery .art.tall-image {
    grid-row: span 2 / auto;
}

img.inset-right {
	clear: both;
	float: right;
	margin: 0 0 1em 2em;
}

img.inset-left {
	clear: both;
	float: left;
	margin: 0 2em 1em 0;
}

table { width: 100%; }

/*
 * Content Style
 */

* {
	font-family: Helvetica, Arial, sans-serif;
}

h1 {
	font-family: "Lobster Two", sans-serif;
	font-weight: 400;
	font-style: italic;
	font-size: 300%;
}

h1 strong {
	font-style: normal;
}

h2 { border-bottom: 1px solid; }

h3 { margin: 0; }

p { line-height: 1.25em; }

#carousel { border-radius: 0.5em; }

#bookshelf .book { border-radius: 0.5em; }

#bookshelf .book .overview {
	border-left: 2px solid;
	padding: 1em;
}

img, .gallery .art { box-shadow: 2px 2px 8px #00000080; }

img.avatar, .gallery .art img { box-shadow: none; }

.new {
	border-radius: 0.5em;
	margin: 0 0.5em;
	padding: 0 0.5em;
	font-size: 60%;
}

.author, .date, .tags { font-size: 80%; }

.date { margin-left: 0.5em; }

table, table tr td, table tr th {
	border: 1px solid;
	border-collapse: collapse;
	padding: 0.5em;
}

table tr th {
	text-align: left;
}

blockquote {
	border-left: 2px solid;
	padding-left: 1em;
	font-style: italic;
	font-size: 120%;
}

p.centerquote {
	text-align: center;
	font-style: italic;
	font-size: 120%;
}

footer { text-align: center; }

/*
 * Responsive Design
 */
 
@media only screen and (max-width: 600px) {
	/* Layout */
	
	#bookshelf .book {
		display: grid;
		grid-template-columns: 1fr;
		margin: 0.5em 0;
	}
	
	#bookshelf .book .cover {
		padding: 1em 0 0 0;
	}

	/* Flex box alternative
	#bookshelf .book .cover {
		min-width: 40%;
	}*/
	
	.gallery {
		display: grid;
		grid-template-columns: 1fr;
	}
	
	.gallery .art.four-grid-cells {
		grid-row: auto;
		grid-column: auto;
	}
	
	.gallery .art.wide-image {
		grid-column: auto;
	}
	
	.gallery .art.tall-image {
		grid-row: auto;
	}
	
	img.inset-right, img.inset-left {
		float: none;
		display: block;
		margin: 0 auto 1em auto;
	}
	
	/* Style */
	
	#bookshelf .book {
		border: solid 1px #CCC;
	}
	
	#bookshelf .book .overview {
		border-left: none;
		padding: 1em;
	}
}

/*
 * Content Warning
 */

#cw {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: default;
	visibility: hidden;
	background: #00000080;
	backdrop-filter: blur(8px);
}

#cw div {
	max-width: 60%;
	padding: 1.5em;
	text-align: center;
	border: 1px solid #F9A900;
	border-top: 1em solid #F9A900;
	border-radius: 0.5em;
	box-shadow: 2px 2px 8px #00000080;
	background: #000;
	color: #FFF;
	cursor: auto;
}

#cw.fallback {
	position: static;
	visibility: visible;
	background: none;
}

#cw.fallback div {
	max-width: 100%;
	width: 100%;
}

/*
 * Content Colours
 */

main {
	color: #333;
	background: #FFF;
}

h2 { border-color: #333; }

#bookshelf .book:hover { background: #EEE; }

#bookshelf .book .overview { border-color: #CCC; }

#carousel a img, .gallery .art img { transition: transform 0.25s ease; }

#carousel a:hover img, .gallery .art:hover img { transform: scale(1.025); }

.gallery .art.trans {
	background-image: repeating-conic-gradient(#CCC 0 25%, #FFF 0 50%);
	background-size: 20px 20px;
}

.new {
	color: #000;
	background: #FFC800;
}

.author, .date, .tags { color: #666; }

table, table tr td, table tr th { border-color: #CCC; }

table tr td { background: #FFF; }

table tr th { background: #EEE; }

blockquote { border-color: #CCC; }

/* Dark Mode */

@media (prefers-color-scheme: dark) {
	main {
		color: #CCC;
		background: #1C1C1F;
	}
	
	h2 { border-color: #CCC; }

	#bookshelf .book:hover { background: #333; }
	
	#bookshelf .book .overview { border-color: #666; }
	
	.new {
		color: #000;
		background: #FFC800;
	}
	
	.author, .date, .tags { color: #999; }
	
	table, table tr td, table tr th { border-color: #666; }
	
	table tr td { background: #1C1C1F; }
	
	table tr th { background: #333; }
	
	blockquote { border-color: #666; }
	
	@media only screen and (max-width: 600px) {
		#bookshelf .book {
			border: solid 1px #666;
		}
	}
}