/* 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: Roberto, sans-serif;
font-weight: 500;
line-height: 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: 1em;
overflow: hidden;
flex-direction: 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: #FF0000;
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-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: #E23232;
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 1fr;
gap: 1.5em;
align-items: center;
}

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

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

.single-ingredient
{
border-bottom: 2px solid #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;
}