body, html {
  height: 100%;
	margin:0px;
  font-family: 'Montserrat', sans-serif;
  font-size: 1em;
}

.clear {
	clear: both;
}

.floatleft {
	float: left;
	margin-right: 15px;
	border: 2px solid #8C513B;
	border-radius: 50%;
	max-width: 250px;
}


/* STYLES FOR THE HERO IMAGE */

.hero-image {
  /* Use "linear-gradient" to add a darken background effect to the image (photographer.jpg). This will make the text easier to read */
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), url("images/john-silliman-24mYUFbeHto-unsplash.jpg");

  /* Set a specific height */
  height: 50%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-family: 'Montserrat', sans-serif;
}

.signature-text {
	position: absolute;
	top:0px;
	left:5px;
	font-family: 'Yellowtail', cursive;
	color:white;
	font-size:2.5em;
}

.signature-text a {
	text-decoration: none;
	color: white;
}

.contact-text {
	position: absolute;
	top:8px;
	right:12px;
	font-family: 'Montserrat', sans-serif;
	color:white;
	font-size:1.1em;
	text-align: center;
}

.contact-text span {
	display: block;
}

.contact-text a {
	text-decoration: none;
	color: white;
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}



/*STYLES FOR THE MENUBAR*/

.menubar {
	margin:0px auto;
	padding: 10px;
	box-sizing: border-box;
	text-align:center;
	background-color: #734338;
	color: #F2F2F2;

}

.menubar a {
	color: #F2F2F2;
	font-size: 20px;
	font-weight: bold;
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	text-decoration: none;
}

.menubar a:hover {
	color: #F7A419;
}

.menubar span {
	color: #F7A419;
	font-size: 16px;
	display: inline-block;
}



/*MAIN CONTAINER*/

.container {
	width: 80%;
	margin: 10px auto;
	padding: 10px;
	font-size: 1em;
  line-height: 1.75;
  font-weight: 300;
}



/*STYLES FOR STORY LISTINGS*/

.catintro {
width: 75%;
margin: 0px auto;
text-align: center;
}


hr {
		margin-top: 30px;
		margin-bottom: 0px;
    overflow: visible; /* For IE */
    padding: 0;
    border: none;
    border-top: medium double #333;
    color: #734338;
    text-align: center;
}

hr:after {
    content: "★";
    display: inline-block;
    position: relative;
    top: -0.7em;
    font-size: 1.5em;
    padding: 0 0.25em;
    background: white;
}

.titlecenter {
	text-align: center;
	margin-top: 0px;
}


.flex-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

}

.flex-grid img {
	width: 100%;
}

.flex-grid h2 {
	margin-bottom: 0px;
	margin-top: 8px;
}

.flex-grid span {
	display: inline-block;
	margin-bottom: 10px;
}

.flex-grid p {
	margin: 2px;
}


.col {
  width: 40%;
  background-color: #fdfdfd;
  margin-bottom: 20px;
}


/*STYLES FOR STORY LISTINGS END*/




.footer {
	text-align: center;
	background-color: #734338;
 	color: #F2F2F2;
	padding: 20px;
	border-top: 1px solid #f2f2f2;
}



/*STYLES FOR THE CMS*/

.flexi {
	display: flex;
	border-bottom: 1px solid black;
	padding: 5px;
  justify-content: space-between;
}

.flexi>* {
  width: 16.66%;
}

.load-more {
	margin: 20px auto;
	background-color: #F7A419;
	color: black;
	font-size: 18px;
	width: 150px;
	padding: 10px;
	cursor: pointer;
	text-align: center;
	border-radius: 5px;
}


/*STORY PAGE STYLES*/

h1.storytitle {
margin: 0px;
font-size: 2em;
text-align: center;
}

h2.byline {
margin: 0px;
font-size: 1em;
text-align: center;
}

h3.cat {
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 10px;
	text-align: center;
}


.storyimage {
	display: block;
	margin: 0px auto;
}

pre {
font-family: 'Inconsolata', monospace;
font-size: 20px;
line-height: 28px;
overflow-x: auto;
white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;
word-wrap: break-word;
}




/*MEDIA QUERIES */


/*SMALL SCREEN*/
@media screen and (max-width:800px){

.signature-text {
	font-size: 2.1em;
	top: 5px;
}

.contact-text {
	top: 12px;
}

.hero-text h1 {
	font-size: 1.5em;
}

.container {
	width: 90%;
}

}


.yo {
color: #393F40
#0D0C07
#8C513B
#734338
#F2F2F2
#F7A419;

}