/*Stylesheet for recipe Site */
body
{
   background-color: #eeeeee;
	 font-family: Verdana, sans-serif;
	 font-weight: 400;
	 line-height: 1.75;
	 color: #222222;
}

h1, h2, h3, h4, h5
{
   margin: 0;
	 margin-bottom: 1.4em;
	 font-family: Roboto, sans-serif;
	 font-weight: 500;
	 line-weight: 1.3;
	 text-transform: capitalize;
	 letter-spacing: 1px;
}

h2
{
   font-size: 2.4em;
}

h4
{
  font-size: 1.6em;
}

h5
{
   font-size: 1.3em;
}

/*
=====================
Navbar
=====================
*/

.navbar
{
    align-items: center;
    justify-content: center;
}

.nav-center
{
  width: 100vw;
	max-width:1120px;
}

.nav-header
{
   height: 10em;
	 justify-content: space-between;
	 align-items: center;
	 display: grid;
	 grid-template-columns: 1fr 1fr;
}

.nav-header img
{
   width: 200px;
}

.nav-logo
{
    display: flex;
		align-items: flex-start;
}
.nav-links
{
    display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1 em;
		overflow: hidden;
		flex-direaction: row;
		transition: 0.3s ease-in-out all;
}

.show-links
{
   height: 23.9em;
}

.nav-link
{
   background: #0F172A;
	 display: block;
	 text-align: center;
	 font-size: 1.75em;
	 text-transform: capitalize;
	 color: #F8FAFC;
	 border-radius: 0.5em;
	 letter-spacing: 1px;
	 transition: 0.3s ease-in-out all;
	 width: 10vw;
}

.nav-link:hover
{
   color: #645CFF;
}

/*
=====================
page
=====================
*/

.page
{
   width: 90vw;
	 max-width: 1120px;
	 margin: 0 auto;
	 padding-top: 2em;
	 min-height: calc(100vh - 10em);
}

/*
=====================
Footer
=====================
*/

.page-footer
{
   text-align: center;
	 height: 4em;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 background: #222222;
	 color: #FFFFFF;
}

.page-footer h5
{
    margin-top: 0;
		margin-bottom: 0;
}

.page-footer p
{
    margin-bottom: 0;
}

/*
===============
Hero
===============
*/

.hero
{
  height: 40vh;
	position: relative;
	margin-bottom: 2em;
	background-color: #F8FAFC;
	border-radius: 0.25em;
}

.hero-container
{
    position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 0.25em;
}

.hero-text
{
   color: #FFFFFF;
	 text-align: center;
}

/*
===============
Recipe Template
===============
*/

.recipe-hero
{
    display: grid;
		gap: 3em;
		grid-template-columns: 4fr 5fr;
		align-items: center;
}

.recipe-hero-img
{
   height: 300px;
	 border-radius: 0.25em;
}

.recipe-about-img
{
   height: 900px;
	 border-radius: 0.25em;
}


.recipe-info p
{
    color: #475569
}

.recipe-icons
{
    display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1em;
		margin: 2em 0;
		text-align: center;
}

.recipe-tags
{
   display: flex;
	 align-items: center;
	 flex-wrap: wrap;
	 font-size: 0.7em;
	 font-weight: 600;
}

.recipe-tags a
{
   background: #645CFF;
	 border-radius: 0.5em;
	 color: #FFFFFF;
	 padding: 0.05em 0.5em;
	 margin: 0 0.25em;
	 text-transform: capitalize;
}

.recipe-content
{
    display: grid;
		grid-template-columns: 2fr 1fr;
		gap: 2em 5em;
		padding: 3em 0;
}

.single-instruction header
{
     display: grid;
		 grid-template-columns: auto 1 fr;
		 gap: 1.5em;
		 align-items: center;
}

.single-instruction header p
{
     text-tranform: uppercase;
		 font-weight: 600;
		 color: #645CFF;
		 margin-bottom: 0;
}

.second-column
{
    display: grid;
		row-gap: 2em;
}

.single-ingrdient
{
   border-bottom: 2px soild #CBD5E1;
	 padding-bottom: 0.75em;
	 color: #3C3799;
}
		 
.recipes-container
{
    display: grid;
		gap: 2em 1em;
}

.recipes-list
{
     display:grid;
		 grid-template-columns: repeat(3, 1fr);
		 gap: 2em 1em;
		 padding-bottom: 3em;
}

.recipe-img
{
    height: 15em;
		border-radius: 0.5em;
		margin-bottom: 1em;
}

.tags-container
{
    order: 1;
		display: flex;
		flex-direction: column;
		padding-bottom: 3em;
}

.tags-container h4
{
    margin-bottom: 0.5em;
		font-weight: 500;
}

.tags-list
{
    display:grid;
		grid-template-columns: 1fr 1fr 1fr;
}

.tags-list a
{
     text-transform: capitalize;
		 display: block;
		 color: #64748B;
		 transition: 0.3s ease-in-out all;
}

.tags-list a:hover
{
    color: #645CFF;
}