/* LAYOUT */

body {
  color: #ffe;
  background-color: #111;
  font-family: sans-serif;
  font-size: 1.1em;
  line-height: 1.5;
  max-width: 50em;
  padding: 0.5em;
  margin: auto;
  width: 90%;
}

.content {
	
}

/* Headers */
h1, h2, h3, h4, h5 {
  color: #ffd;
  font-family: serif;
  font-weight: bolder;
  line-height: 1.3;
}

h1 {
  font-size: 2em;
  text-align: center;
  padding: 0;
  margin-top: 0;
}

h2 {
  font-size: 1.75em;
}

h3 {
  font-size: 1.4em;
}

/* Horizontal Divider */
hr { 
	border: 1px dashed #444;
	margin-top: 2em;
	margin-bottom: 2em;
}

/* Links */
a {
  color: #f55;
  text-decoration-style: dotted;
  display: inline-block;
}
a:hover {
	color: #ffe;
	background-color: #f00;
	text-decoration: none;
}

/* CODE */

code {
    background-color: #303030;
    border: 1px solid #999;
    border-radius: 2px;
    font-family: 'Courier New', Courier, monospace; 
	word-wrap: break-word; /* allow long code to break */
    white-space: pre-wrap; /* respect whitespace */
    overflow-x: auto; /* add scrollbar if necessary */
}

code:hover {
	border: 1px solid #f55;
}

/* inline code */
p code {
	color: #ddd;
}

/* block code */
pre code {
	display: block; 
	padding: 10px;
    margin: 10px 0;
	font-size: 1em;
}

/* NAVIGATION */

.site-nav 
{
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 0.666em;
  margin-bottom: 0.666em;=
}

.site-nav .logo { 
  color: #fff;
  text-decoration: none;
  font-weight: bolder;
  padding-left: 0.1em;
}

.site-nav .logo:hover {
	background-color: #f00;
}

.main-menu {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-menu li {
  margin-right: 1em;
}

/* TABLES */
table {
    width: 100%;
    border-collapse: collapse; /* no double borders */
    margin-bottom: 16px;
}

/* headers */
th {
	background-color: #333;
	font-style: italic;
    padding: 8px 12px; 
    border: 1px solid #999; 
}

/* alternating row color */
tr:nth-child(even) {
    background-color: #242424; 
}

/* cells */
td { 
    padding: 8px 12px; 
    border: 1px solid #999; 
    text-align: left; 
}

tr:hover {
    background-color: #333;
}

/* STYLING */ 
/* Pagination styling */

.pagination {
	display: auto;
	align-items: center;
	justify-content: space-between;
	font-weight: bold;
	text-align: center;
	padding: 0em 2em;
}

.pagination a {
	/* Style paging links */ 
}

.pagination ul {
	padding: 0;
	list-style: inside;
	list-style-type: square;
}

.pagination .pagination__buttons {
	display: auto;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

details h3 {
	display: inline-block;
	margin: 0;
}

/* Table of Contents */
.table-of-contents {

	details {
		font-size: 1em;
		border-top: 2px dashed #333;
		border-bottom: 2px dashed #333;
		background-color: #282828;
		width: auto;
		padding-left: 2em;
	}
}

/* Post meta */
.post-meta {
	color: #aaa;
	font-size: 1em;
}
.post-date {
}
.post-description {
	color: #ddd;
}

/* Tags */
.tags a {
	
}
.tags a:hover {
	
}

/* Read More */
.readmore {
	font-weight: bold;
}

/* Post list/summaries */
.post-snippet {

}

.post-snippet h3 {
  margin-bottom: 0.2em;
}

/* Block quotes */
blockquote {
  border-left: 4px solid #c00;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  font-style: italic;
  background-color: #333;
}

.boxedtext {
	border: 2px dashed #555;
	margin: 1em;
	padding: 1em;
}	  

.spoiler {
	color: #ffe; /* normal text color */ 
	background-color: #ffe; /* change background to match text color */
}	

.spoiler:hover {
	color: #111; /* text becomes background color on hover */
}


/* For light mode */
@media (prefers-color-scheme: light) {
	body {
		background-color: #ffe;
		color: #222;
	}
	
	h1, h2, h3, h4, h5 {
		color: #222;
	}
	
	a {
		color: #f00;
	}
	
	blockquote {
		background-color: #ddd;
		border-left: 4px solid #f00;
	}
	
	details {
		background-color: #ddd;
	}
	
	.site-nav .logo { 
		color: #222;
	}
	
	.post-meta {
		color: #666;
	}
	
	.post-description {
		color: #222;
	}
	
	.spoiler {
		color: #222; /* normal text color */ 
		background-color: #222; /* change background to match text color */
	}	

	.spoiler:hover {
		color: #ffe; /* text becomes background color on hover */
	}
	
	/* lightmode tables */
	th {
		background-color: #ddc;
	}
	
	tr:nth-child(even) {
		background-color: #eed; 
	}
	
	tr:hover {
		background-color: #ddc;
	}
}





/* Double overlay image, ie before/after, night/day etc */
.image-fade-base {
	z-index: 1;
	position: relative;
	display: block;
	width: 100%;
}
.image-fade-overlay {
	position: absolute;
	top: 0;
	left: 0;
	transition: opacity 0.666s;
	z-index: 2;
	opacity: 0;
	display: block;
	width: 100%;
}
.image-fade-container {
	position: relative;
	width: 100%;
	max-width: 640px;
}
.image-fade-container:hover .image-fade-overlay {
	opacity: 1;
}




/* MAKES LIST META STUFF ON THE SAME LINE! */
/* TODO: FIND A BETTER HOME FOR THIS */
.post-meta {
	display: inline-block;
}

.post-date,
.post-tags {
	display: inline-block;
}

/* Caption text for 'figure' images */
figcaption {
	text-align: center;
	font-size: 1em;
	font-style: italic;
}


/* Two column nav for medium/small */
@media screen and (max-width: 45rem) {
	.site-nav, .main-menu {
		display: grid;
		grid-template-columns: 4fr 1fr;
		gap: 0.2em;
	}
	.site-nav a, .main-menu a {
		padding: 0.25em;
		padding-left: 0;
	}

	body {
		font-size: 1em;
		padding: 4px;
		width: 96%;
	}

	img {
		max-width: 100%;
		display: block;
	}
}

/* One column for tiny screens */
@media screen and (max-width: 30rem) {
	.site-nav, .main-menu {
		grid-template-columns: 1fr;
	}

	body {
		font-size: 1em;
		padding: 2px;
		width: 100%;
	}
}