* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    font-size: 18px;
    font-family: "Nunito" , sans-serif;
    background-color: #F7F1E8 ;
    padding:0 .5rem;
    display: flex; flex-direction: column; align-items: center;
}

body{
    display: flex; flex-direction: column;

}
header{
    padding: 0 0 3rem 0;
    display: flex; flex-direction: column; align-items: left;
}
#saveButton{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

output ul li{
    color:#FF0000
}
h1 input{
    font-family: "Playwrite US Trad", sans-serif;
    font-size: 125%;
    color: #8B5E34;
}

header div{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
    border-bottom: 5px solid #8B5E34;
}

header nav{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
}

header menu{
    gap: 1rem;
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
}

header form{
    padding: .25rem .25rem 0
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center;
}

header li{
    list-style-type: none;
}

header h1{
    font-family: "Playwrite US Trad", sans-serif;
    font-size: 125%;
    color: #8B5E34;
}

main{
    background-color: #FFF9F1;
    border: 2px solid #2E261C;
    border-radius: 25px;
    max-width: 700px;
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center;
    gap: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

main h1{
    font-family: "Playwrite US Trad", sans-serif;
    font-size: 180%;
    color: #A8570C;
}

main h2{
    font-family: "Playwrite US Trad", sans-serif;
    font-size: 125%;
    color: #A8570C;
}

main h3{
    font-family: "Playwrite US Trad", sans-serif;
    font-size: 125%;
    color: #A8570C;
}

#welcome{
    padding: 1rem 0 0;
    display: flex; flex-direction: column;
}

#mainButton{
    padding: 0 0 2rem;
    gap: 1rem;
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
}

a:link, a:visited{
    color: #8B5E34;
    text-decoration: none;
}

a:hover{
    color: #A8570C;
    text-decoration: underline;
}

.lookButton:link, .lookButton:visited{
    font-size = 125%;
    background-color: #8B5E34;
    color: #F7F1E8;
    padding: .5em 1em;
    border-radius: 25px;
    text-decoration: none;
}

.lookButton:hover{
    font-size = 125%;
    background-color: #A8570C;
    color: #FFF9F1;
    padding: .5em 1em;
    border-radius: 25px;
    text-decoration: none;
}

.recipeCard div{
    background-color: #FFF;
    border: 2px solid #888;
    border-radius: 25px;
}

.recipeCard div ul li{
    list-style-type: "#";
    color:#8B5E34;
}

.imageRotate{
    transform: rotate(2deg);
    border: 5px solid #FFFFFF;
    border-radius: 3px;
}
.visually-hidden {
    display: none;
}


.recipeCard{
    display: flex; flex-direction: row; flex-wrap: wrap;
    max-width: 700px;
}

.recipeCard ul{
    display: flex; flex-direction: row; flex-wrap: wrap;
    list-style: none;
    gap: 1rem;
    max-width: 700px;
    justify-content: flex-start;

}

.recipeCardTitle{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center;
    max-width: 100%;
}

.singleRecipe{
    display: flex;
    width: 200px;
}

.recipePic{
    display: flex;
    gap: 1rem;
    max-width = 85%;
    height: auto;
}

.recipeTag{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    padding: 0 .5rem 0;
}

#recipeHeader{
    display: flex; flex-direction: column;
}

#recipeTitle{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    gap: 1.5rem;
}

#recipeMeta{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    gap: .5rem;
}


#recipeData{
    display: flex; flex-direction: row; flex-wrap: wrap;
    width: 100%;
    gap: .25rem;
}
#recipeData dt {
    display: flex;
    font-weight: 600;
    flex-basis: calc(25%);
    gap: .5rem;
}

#recipeData dd{
    display: flex;
    flex-basis: calc(75%);
}

#description{
    line-height: 1.25;
    display: flex; flex-direction: column;
    gap: 2rem;
 }

#ingredientsSection{
    display:flex; flex-direction: column;
    left-padding: 1rem;
    text-indent: -1rem;
}

#ingredientsList{
    list-style-type: none;
}

#recipeImage{
    display:flex; flex-direction:row;
    max-width: 600px;
}

#steps{
    display:flex; flex-direction: column;
    padding-left: 1em;

}

#stepsSection h3{
    display:flex; flex-direction: column;

}

#stepsSection{
    display:flex; flex-direction: column;
}

#tags{
    display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start;
    padding: 0 .5rem 0;
    list-style-type: "#";
    color:#8B5E34;
}