body {
	font-family: 'Trebuchet MS', sans-serif;
	background-color: var(--background-color);
	color: var(--text-dark);
	margin: auto;
	text-align: center;
	--background-color: #1a1a1a;
	--text-dark: #909090;
	--text-light: #d5d5d5;
}

a {
	color: var(--text-dark);
}

#header {
	font-family: "Georgia", serif;
	font-style: italic;
	color: white;
	font-size: 3em;
	width: calc(100% - 84px);
	margin-top: 1em;
	margin-bottom: 1em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: unset;
}
#header > img {
	margin: 0 0.2em;
	border: 4px solid var(--background-color);
	outline: 2px solid white;
	box-shadow: 0 0 24px rgba(255, 255, 255, 0.25);
	max-width: 8em;
	width: 100%;
}
#header > p {
	width: 5em;
	margin: 0.5em;
	text-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
	min-width: 2em;
}

@media (max-width: 900px) {
	#header {
		flex-direction:column;
		font-size: 2em;
	}
	#header > p {
		width: 9em;
	}
}



#patrickquote {
	font-size: 1.5em;
	margin: 0 auto 1.25em auto;
}

#links {
	font-size: 1.2em;
	margin-bottom: 3em;
}

#obituary {
	box-sizing: border-box;
	background-color: #cbcbcb;
	color: #1c1c1c;
	font-family: "Georgia", serif;
	font-size: 1.35em;
	line-height: 1.5em;
	text-align: justify;
	text-align-last: center;
	width: 90%;
	margin: 0 auto 3em auto;
	padding: 1em 1.75em 1.1em 1.75em;
	max-width: 725px;
	text-shadow: 0 1.5px 0.7px rgba(255, 255, 255, 1);
	
	border: 4px solid var(--background-color);
	outline: 2px solid #888;
}






#main {
	margin: 0 auto 0 auto;
	text-align: left;
	background-color: #2c2c2c;
	border: 4px solid var(--background-color);
	outline: 2px solid #2c2c2c;
	width: calc(100% - 84px);
	max-width: 800px;
	padding: 24px 28px 16px 28px;
}


#galleryheader {
	width: 75%;
	max-width:1316px;
	margin: 4.5em auto -0.5em auto;
}


#gallery {
	margin: 0 auto 0 auto;
	text-align: left;
	background-color: #2c2c2c;
	border: 4px solid var(--background-color);
	outline: 2px solid #2c2c2c;
	width: 75%;
	max-width: 1316px;
	margin: 0 auto 2em auto;
	padding: 16px
}

#imagecontainer {
	width: calc(inherit - 16px);
	max-width: 1300px;
	margin: 0 auto;
	padding: 4px 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.thumbnail {
	width: calc(25% - 8px);
	aspect-ratio: 3/4;
	background-color: var(--background-color);
	margin: 4px;
	object-fit: cover;
	transition: width 0.2s;
}




@media (800px <= width < 1350px) {
	#galleryheader {
		width: calc(85%);
		min-width: 736px;
		max-width: 1012px;
}
	#gallery {
		width: calc(85%);
		min-width: 736px;
		max-width: 1012px;
	}
	.thumbnail {
		width: calc(33% - 8px);
	}
}

@media (max-width: 800px) {
	#galleryheader {
		width: calc(100% - 64px);
	}
	#gallery {
		width: calc(100% - 64px);
	}
	.thumbnail {
		width: calc(50% - 8px);
	}
}



.contain {
	object-fit: contain !important;
}


button {
	color: white;
	font-size: 16px;
	text-align: center;
	height: 3em;
	width: 7em;
	border: 2px solid #2c2c2c;
	background-color: #2c2c2c;
	padding: 4px;
	border-radius: 8px;
	float: right;
	margin-top: -4.5em;
	margin-right: -16px;
}

button:hover {
	background-color: var(--background-color);
	border: 2px solid var(--text-light);
	cursor: pointer;
}



.attribute {
	font-size: 1.15em;
	margin-bottom: 0.3em;
	margin-left: 1em;
}

.quote {
	color: var(--text-light);
	font-style: italic;
	font-size: 1.25em;
	margin-bottom: 0.5em;
}