@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&family=Raleway:ital,wght@0,200;0,400;1,400&display=swap');

.box { border:1px solid red; }

body {  
	padding: 0;   
	margin: 0;
	font-family: 'Raleway', sans-serif;
}

.search {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.search label {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    margin: 5px;
}

a:link { color:#000; }
a:visited { color:#000; }

#wrapHeader {
	width:100%;
	text-align:center;
}
#wrapContent {
	width:100%;
	text-align:center;
}

#nav-title {
	background-color:#163832;
	color:white;
	font-size:3em;
	padding:20px;
}
.headerSubtitle { font-size:0.6em; }


/*Navigation Buttons*/
nav {
	text-align:center;
	border-bottom:1px solid #163832;
}

nav ul{
	list-style:none;
	position:relative;
	display:inline-block;
	margin:0;
	padding:0;
}

nav ul li{
	float:left;
}

nav ul li:hover > ul {
	display:block;
}

nav ul li a{
	display:block;
	width:100px;
	margin:10px;
    	padding:5px;
	font-size:1.2em;
	font-weight:bold;
    	text-decoration:none;
    	color:#000;
    	position:relative;
}

nav ul ul{
	display:none;
	border:1px solid #777;
    	padding:0;
    	position:absolute;
    	top:100%;
	left:calc(50% - 90px);
}
nav ul ul li{
    	float:none;
    	position:relative;
}

nav ul ul li a{
	width:150px;
	font-size:0.9em;
    	background:#fff;
    	color:#000;
    	margin:0;
	padding:15px;
}

nav ul ul li a:hover{
	background-color:#ccc;
}

@media only screen and (max-width: 400px) {
	nav ul li a{
		width:80px;
		font-size:1em;
	}
}

/*--Navigation Buttons*/


/* Categories */
#wrapCategories {
	display:grid; 
	width:1200px; 
	margin:auto; 
	grid-template-columns: 33% 34% 33%;
	row-gap:25px;
}
#wrapCategories h2 { }
#wrapCategories a { text-decoration:none; }
.categoryCard {
	display:block;
	justify-self:center; 
	width: 300px;
}

.recipeCardHeader1, .recipeCardHeader2 { padding:0 5px; }
/* -- Categories */


/*Recipe Cards*/

#wrapCards {
	display:grid; 
	width:1200px; 
	margin:auto; 
	grid-template-columns: 33% 34% 33%;
	row-gap:25px;
}

.recipeCard {
	display:block;
	justify-self:center; 
	box-shadow: 0px 0px 20px 1px rgba(240,241,243,1);
	border:1px solid #E0E0E0;
	width: 300px;
	margin: 18px;
}

@media only screen and (max-width: 1250px) {
	#wrapCards, #wrapCategories { 
		display:grid;
		width:100%; 
		grid-template-columns:repeat(auto-fill, 300px); 
		justify-content:space-evenly; 
		grid-gap:20px;
	}
}


.cardButton {
	display:block;
	margin:auto;
	font-weight:bold;
	border: 2px solid black;
	width:80%;
	color:black;
	text-align:center;
	font-size:15px;
	text-decoration:none;
	padding:5px;
	margin-bottom:20px;
}
.cardButton:hover {
	background-color:#124712;
	color:white;
	cursor:pointer;
}

/* -- Recipe Cards* /


/* Recipe */
#wrapCards h2 { height:50px; }
#wrapCards h3 { height:40px; font-size:0.9em; padding-bottom:15px; }
.recipeHeader {
	position:absolute;
	top:50px;
	left:140px;
	z-index:99;
	border-bottom:3px solid #8C7A6E;
	/*border-bottom:3px solid #C9A9A6;*/
	background-color:white;
	font-weight:200;
	width:80%;
	padding:20px;
}
.wrapRecipe {
	display:grid;
	grid-template-columns: 20% 80%;
  	width:100vw;
	height:100vh;
	grid-gap: 0px;
	font-family: 'Poppins', sans-serif;
	text-align:left;
	color:#000;
	font-size:1.2em;
}
.left-panel {
	background-color:#CFC1AF;
	/*background-color:#F3CFC6;*/
}
.right-panel {
	padding:180px 50px 40px 30px;
}
.imgRecipe {
	float:right;
	width:380px;
	height:auto;
	border:2px solid #8C7A6E;
	margin-right:10%;
}
.servings {
 	font-size:1em; 
	font-style:italic;
	font-weight:lighter;
}
.recipeBack { text-decoration:none; }
@media (max-width:800px) {
	.wrapRecipe { display:block; width:100%; }
	.left-panel { display:none; }
  	.right-panel { padding:15px; }
	.recipeHeader { position:static; text-align:center; width:100%; border:none; margin:0; padding:0; }
	.imgRecipe { float:none; display:block; width:90%; margin:auto; }
}
/* -- Recipe */

#search {
	text-align:center;
}
#search input { }