@font-face {
	font-family: HeadingFont;
	src: url('/fonts/Catamaran-Medium.ttf');
}

@font-face {
	font-family: BodyFont;
	src: url('/fonts/Catamaran-Regular.ttf');
}

html, body {
	background-color: #282828;
	font-family: 'BodyFont', sans-serif;
	margin: auto;
}

body, #container, #header, #nav, #photo, #photopop, #about {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

#photo, #photopop, #photogrid, #about {
	background-color: #C8C8C8;
}

#photo, #photopop {
	text-align: center;
}

#photopop {
	opacity: 0;
	position: fixed;
	transition: opacity 0.5s ease-in-out;
	visibility: hidden;
	z-index: 99;
}

#photopop {
	border: 10px solid #282828;
}

#photopop img {
	height: auto;
	width: auto;
}

#container {
	transition: opacity 0.5s ease-in-out;
}

#header {
	flex-basis: 100%;
	font-family: 'HeadingFont', sans-serif;
	font-size: 1.1em;
	text-align: center;
}

#header a {
	text-decoration: none;
}

h1 {
	flex-basis: 100%;
	font-size: 2em;
	font-weight: bold;
	margin: 0;
}

#nav {
	margin: 0;
	padding: 0;
}

#nav li {
	list-style-type: none;
	margin: 0 25px 0 25px;
}

#nav a:hover {
	color: #6F3324;
	text-decoration: underline;
}

#photo, #photogrid, #about {
	border-color: #6F3324;
	border-style: solid;
	margin-bottom: 30px;
	padding: 5px;
}

#photogrid {
	display: grid;
}

#photogrid a {
	margin-bottom: 5px;
	//width: 270px;
}

#photogrid img {
	width: 100%;
}

#previousphoto, #nextphoto {
	color: black;
	text-decoration: none;
}

#about {
	align-content: space-between;
}

/*
#about p {
	flex-basis: 100%;
	margin: 10px;
}
*/

#about a {
	color: black;
}

#about a:hover {
	color: #6F3324;
}

#about p {
	margin: 10px;
	width: 100%;
}


.aboutgroup {
    display: flex;
    flex-basis: 100%;
    justify-content: space-between;
    margin: 0;
}

#aboutgroup p {
    margin: 0;
}

#caseranch {
	background-color: #DBC390;
	text-align: center;
	width: 100%;
}

#frank, #caseranch img {
	width: 70%;
}

#caseranch p {
	font-style: italic;
}

#footer {
	color: #DBC390;
	font-size: 1.25em;
	margin-bottom: 40px;
	text-align: center;
}

#footer a {
	color: #DBC390;
	text-decoration: none;
}