:root
{
	--primary-background: #FFFFE6;
	--primary-color: black;
	--primary-faded-color: dimGrey;
	--primary-contrast-color: #3b56c3;
	--primary-faded-contrast-color: #3f386e;
}

@media (prefers-color-scheme: dark)
{
	:root
	{
		--primary-background: #181818;
		--primary-color: #dbdbdb;
		--primary-faded-color: grey;
		--primary-contrast-color: #ffdc11;
		--primary-faded-contrast-color: #d7b512;
	}
}
:root
{
	--heavy-border: 2px solid var(--primary-color);
	--light-border: 1px dotted var(--primary-faded-color);
	--hatched-background: var(--hatching-image) top left / 12px repeat;
	font-family: 'Recoleta', Georgia, serif;
	background: var(--primary-background);
	color: var(--primary-color);
}

a
{
	color: var(--primary-contrast-color);
	text-decoration: none;
}
a:visited
{
	color: var(--primary-faded-contrast-color);
}
body
{
	font-family: 'Recoleta', Georgia, serif;
	background-color: var(--primary-background);
	color: var(--primary-color);
	color-scheme: light dark;
	margin:10px auto;
	max-width:1028px;
	line-height:1.6;
	font-size:18px;
	padding:0 10px;
}
h1,h2,h3
{
	line-height:1.2;
}
/* .crop
{
	width: 150px;
	height: 150px;
	overflow: hidden;
}
.crop img
{
	width: 300px;
	height: 300px;
	margin: -75 px 0 0 -75 px;
} */
.gallery
{
	margin:0;
	line-height:1;
	padding:0;
	max-width:1028px;
}
.centered-and-cropped
{
	object-fit: cover;
	width: 192px;
	height: 192px;
	margin: 2px;
	border-radius: 20px;
	border-width: 3px;
	border-color: #181818;
	border-style: solid;
}

img.featured
{
	max-width: 1028px;
	width: 100%;
	height: auto;
}
.thumbnail
{
	object-fit: cover;
	width: 192px;
	height: 192px;
	overflow: hidden;
	margin: 2px;
	line-height: 1;
	border-radius: 20px;
	border-width: 3px;
	border-color: #181818;
	border-style: solid;
}

footer
{
	font-size: small;
	text-align: center;
}

table
{
	border-collapse: collapse;
}
th, td
{
	padding-left: 10px;
	padding-right: 10px;
}
td.text, th.text
{
	text-align: left;
}
td.number, th.number
{
	text-align: right;
}
tr:hover
{
	background-color: #6b6570;
}
.intro {
    text-align: center;
    text-decoration: underline;
}
.section {
	text-align: center;
}
.grid-container{
	display: grid;
	grid-template-columns: auto auto auto auto;
	padding: 10px;
}
.grid-item {
	background-color: #333;
	padding: 20px;
	text-align: center;
	color: white;
	display: block;
	margin: 5px;
	border-radius: 10px;
}

#class-icon {
	display: inline-block;
	width: 25px;
	height: 25px
}

#job-list {
	display: inline-block;
	text-align: left;
}

/* Navbar */
#sitenav {
    background-color: #333;
}
#site-title {
    font-size:28px;
    padding: 3px 16px;
    color: white;
}