:root {
	--bg-color:#3F4739;
	--lite-color:#717568;
	--text-color:#E1F4CB;
	--accent-color:#F1BF98;
}

@font-face {
	font-family: 'Libre Baskerville';
	src: url('../fonts/libre-baskerville-latin-500-normal.woff2') format('woff2'),
	     url('..fonts/libre-baskerville-latin-500-normal.woff') format('woff');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

body {
	font-family: "Libre Baskerville", serif;
	padding-top: 64px;
	padding-bottom: 128px;
	background-color: var(--bg-color);
}

h1 {
	color: var(--text-color);
	font-size: 32px;
	text-align: center;
	padding-bottom: 24px;
}

h3 {
	color: var(--text-color);
	font-size: 24px;
	text-align: center;
	padding-bottom: 24px;
}

p {
	color: var(--text-color);
	font-size: 12px;
	text-align: center;
	padding-bottom: 24px;
}

img {
	width: auto;
	max-width: 100%;
	max-height: 800px;
}


a:link {
	color: var(--accent-color);
}

a:visited {
	color: var(--accent-color);
}

ul {
	list-style-type: none;
	display: flex;
	justify-content: center;
	margin: 0;
	padding: 0;
	text-align: center;
}

#blog {
	display: grid;
	padding: 12px;
}

#blog a:hover {
	background-color: var(--lite-color);
}

ul li a {
	display: block;
	color: var(--text-color);
	padding: 14px 16px;
	text-decoration: none;
}

ul li a:hover {
	background-color: var(--bg-color);
}

ul li a:active {
	background-color: var(--bg-color);
}

header {
	background-color: var(--lite-color);
	width: 100%;
	position: fixed;
	top: 0px;
	left: 0px;
}

nav {
	color: var(--text-color);
}

nav a.current {
	background-color: var(--bg-color);
	font-weight: bold;
	color: var(--text-color);
}

figcaption { 
	color: var(--text-color);
	font-style: italic;
	font-size: 12px;
	font-family: monospace;
}

hr {
	color: var(--text-color)}

footer {
	position: fixed;
	bottom: 0px;
	left: 0px;
	width: 100%;
	height: 42px;
	background-color: var(--lite-color);
	padding-bottom: 8px;
	font-size: 10px;
}

footer p {
	vertical-align: middle;
}

.desc {
}

.img-container {
	max-width: 100%;
	text-align: center;
	padding-bottom:42px;
}

.responsive {
	max-height: 800px;
	width: auto;
	max-width: 100%;
}

/* MASONRY GRID */

.masonry-grid {
	column-count: 3;
	column-gap: 15px;
}

.grid-item {
	break-inside: avoid;
	margin-bottom: 15px;
	overflow: hidden;
}

.grid-item img {
	width: 100%;
	height: auto;
	display: block;
}

.grid-item .caption {
	padding: 2px;
	color: var(--text-color);
	font-size: 10px;
	font-style: italic;
	text-align: center;
	background-color: var(--bg-color);
	font-family: monospace;
}

@media (max-width: 768px) {
	.masonry-grid {
		column-count: 2;
	}
}


@media (max-width: 480px) {
	.masonry-grid {
		column-count: 1;
	}
}