* {
	font-family: Futura, "Gill Sans", Roboto, "Lucida Sans", sans-serif;
	color: midnightblue;
}

/* unvisited link */
a:link{
	color: mediumorchid;
}

/* visited link */

a:visited{
	color: indianred;
}

/* mouse over link */
a:hover {
	color: fuchsia;
}

/* selected link */
a:active {
	color: mediumorchid;
}


h2{
	font-style:italic;
}

html {
	font-size: 16px;
}

.header{
	display: flex;
	grid-area: header;
	font-family: Cinzel, Georgia, Serif;
	font-size: 3.5rem;
	text-transform: uppercase;
	font-weight: normal;
}

.header_text{
	flex: 3;
}

.column_50 {
	float: left;
	width: 50%;
	background-color:#fcd760;
	padding-left: 50px;
	padding-right: 50px;
	justify-items: center
}

.center{
	justify-items: center;
}

.column_ohdarn {
	float: left;
	width: 33.33%;
	font-size: 1.5rem;
	font-family: "Josefin Sans", Sans-serif;
	text-align: center;
	line-height: 2rem;
	margin-bottom:10px;
}

/* Clear floats after the columns */
.row_ohdarn:after {
	content: "";
	display: table;
	clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
	.column_ohdarn {
		width: 100%;
	}
	.column {
		width: 100%
	}
}

.searchbar{
	flex: 1;
}

img {
    max-width: 80%;
    max-height: 100%;
}

.content{
	display: grid;
	grid-area: content;
	justify-items: left;
}

.centered-content{
	display: grid;
	grid-area: content;
	justify-items: center;
}

.center {
	display: block;
	margin-left: auto;
	margin-right: auto;
	width: 100%;
  }

.footer{
	grid-area: footer;
}

.banner {
	background-color: DarkSlateBlue;
	color: #fae49d;
	padding-left:20px;
	padding-right:20px;
	padding-top:10px;
	padding-bottom:10px;
	grid-area: banner;
}
	
.content-box-1 {
	position: absolute;
    background: #FFF;
    padding: 24px;
    font-size: 14px;
	position: absolute;
	margin-left: 50px;
}


.collapsible {
	background-color: rgb(90, 35, 241);
	color: white;
	cursor: pointer;
	padding: 18px;
	width: 100%;
	border: none;
	text-align: left;
	outline: none;
	font-size: 1rem;
  }

.active, .collapsible:hover {
	background-color: rgb(100, 45, 251);
}

.collapsible_content {
	padding: 0 18px;
	display: none;
	overflow: hidden;
	background-color: #fae49d;
}

body {
	background-color: #fae49d;
	grid-template-areas:
		"header"
		"banner"
		"content"
		"footer";
}

.highlight-on-hover {
	background-color: fuchsia;
    display: inline-block;
}

.highlight-on-hover img:hover {
	filter: saturate(5);
    opacity: 0.5;
}


#cooking-content {
    float: left;
    width: 360px;
    overflow: auto;
    padding: 12px;
    background-color: #F8DD73;
    font-size: 14px;
    color: #17295C;
	border-radius: 15px;
}