html {
	background-image: url("../images/background.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

body {
	margin: 0;
	height: 100vh;
}
body, .content, .content .window-body {
	display: flex;
	flex-direction: column;
}
.content, .content .window-body, .content article {
  flex: 1 0 auto;
}
/* most of the code below is to fix the issues caused by using flexbox to size the "window" */
:root {
	--w7-w-bg: #88c0d0;
	--w7-font: 10pt "Segoe UI", "SegoeUI", system-ui, sans-serif;
}
.content {
  width: 70%;
  margin: 8px auto;
  height: calc(100% - 16px);
}
@media only screen and (max-width: 800px) {
	.content {
	width: calc(100% - 16px);
	margin: 8px;
	}
}
.content .window-body {
  height: calc(100% - 86px);
}
article {
	height: calc(100% - 62px);
	overflow: auto;
}

/* Typesetting */
.content article {
	font-family: "EB Garamond", serif;
	font-size: 13pt;
	line-height: 1.6;
}
b {
	font-weight: 800;
}
i {
	font-style: italic;
}
h1, h2 {
	font-weight: normal;
	margin-bottom: 0;
}
h3, h4, h5, h6 {
	font-weight: 500;
	margin-bottom: 0;
}
pre, code {
	font-size: 10pt;
	line-height: 1.3;
}
.content table {
	font: 1rem/1.6 "EB Garamond", serif;
	table-layout: auto;
	width: 100%;
}

/* Images */
#main img {
	width: 60%;
	height: auto;
	margin: 0 20%;
}
@media only screen and (max-width: 800px) {
	#main img {
		width: 100%;
		margin: 0;
	}
}
.content footer {
  display: flex;
  justify-content: space-between;
}

/* K time for an ultra-basic super simple responsive grid */
/* ... Now with flexbox!! And no IE compat! */
.grid-container {
	width: 100%;
	gap: 8px;
	display: flex;
	flex-flow: row wrap;
}
/* There are 2 columns on desktop/laptop/tablet and 1 column on phone */
.grid-item {
	flex: 1 0 auto;
	max-width: 100%;
}
@media only screen and (min-width: 600px) {
	.grid-item {
		max-width: calc(50% - 8px); /* accounts for the gap between grid items */
	}
}
/* Fix images lol */
.grid-item img {
	width: 100% !important;
	margin: 0 !important;
}
.grid-item p, .masonry-item p {
	margin: 0;
}

/* Masonry grid for images */
.masonry-grid {
	columns: 2 364.5px;
	column-gap: 8px;
}

.masonry-item {
	text-align: center;
	padding-bottom: 8px;
}
/* Fix images lol */
.masonry-item img {
	width: 100% !important;
	margin: 0 !important;
}

pre {
	margin: 1em 0 !important;
	padding: var(--w7-w-space);
	background: var(--w7-surface);
	border: 1px solid var(--w7-el-bd);
	overflow: auto;
}
code {
	background: var(--w7-surface);
	font-size: 10pt;
}

/*****************************************************************************/
/* Lightbox */

.lightboxed {
  cursor: pointer; /* So that it's obvious that the image can be clicked */
}

@media only screen and (max-width: 600px) {
	#image-viewer {
		width: calc(100% - 16px);
		max-height: calc(100% - 16px) !important;
	}
}
/* Style fix for the image in the lightbox window */
#lightbox-img {
  margin: auto;
  max-width: 100%;
  height: calc(100% - 19px);
  aspect-ratio: auto;
}

figure {
  margin: 0;
}

/* Lightbox container */
#image-viewer {
  max-height: calc(100% - 16px);
}
#image-viewer > .window-body {
	overflow: auto;
	max-height: calc(100% - 33px);
}
/* Lightbox image caption */
#image-caption {
  text-align: center;
  margin: 0 0 0.5em 0;
  text-overflow: hidden;
}

/* Table of contents */
#toc ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
}
#toc {
	padding-left: 12px;
	margin: 1em 0;
}

/* Tables AHHHH */
table {
	margin-bottom: 1em;
}

/* post list */
ul.posts {
	list-style: none;
	padding: 0;
}

/*************************************************************/
/* Dark Mode                                                 */
/*************************************************************/

/* Fix tables */
table {
	border: 1px solid #d7d7d7;
}
table > tbody > tr > * {
	border-right: none !important;
	border: 1px solid #d7d7d7;
}
/* Hopefully everything can be in one query */
@media (prefers-color-scheme: dark) {
	html {
		background-image: url("../images/background-dark.jpg");
		color: #fff;
		background-color: #121212;
	}
	:root {
		--w7-w-bg: #81a1c1;
		--w7-surface: #202020;
		--w7-tab-bg: #121212;
		--w7-el-sd: inset 0 0 0 1px #222c;
		--w7-el-bd: #707171;
		--w7-el-bg: #454545;
		--w7-el-bg-s-1: #292929;
		--w7-el-bg-s-2: #222;
		--w7-el-grad-h: #a7d9f53b;
		--w7-link-c: #39f;
		--w7-link-c-h: #6bf;
	}
	.window footer::before {
		box-shadow: inset 0 1px #0000004d, inset 0 -1px #121212;
	}
	menu[role="tablist"] button {
		color: #f0f0f0;
	}
	div.info {
		background-color: #81a1c190;
	}
	table {
		background-color: var(--w7-surface);
		border: 1px solid var(--w7-el-bd);
	}
	table > thead > tr > * {
		background: linear-gradient(180deg, var(--w7-el-bg) 45%, var(--w7-el-bg-s-1) 0, var(--w7-el-bg-s-2));
		border: 1px solid var(--w7-el-bd);
	}
	table > tbody > tr > * {
		border: 1px solid var(--w7-el-bd);
	}
}