/*#F7F1E8 "cream", #2E261C "cast iron", #A8570C "cacao", #FFF9F1 "paper", #888 "ash", #8B5E34 "oak", #FFF pure white */
* { margin: 0; padding: 0; box-sizing: border-box; }
html{font-size: 18px; display: flex; justify-content: center; }
body {font-family: "Nunito", Arial, Helvetica, sans-serif ; font-size: 18px; color:#2E261C;background-color:#F7F1E8; width: calc(clamp(250px, 700px, 700px)); display: flex; gap: 3rem; flex-direction: column; } 
main{background-color: #FFF9F1; border-radius: 20px; border: 1px solid #888; display: flex; flex-direction: column; padding: 1rem; gap: 2rem;}
h1 {font-family: "Playwrite US Trad", "Times New Roman"; font-size: 32.4px; color: #A8570C;}
h2 {font-family: "Playwrite US Trad", "Times New Roman" ; font-size: 22.5px; color: #A8570C;}
h3 {font-family: "Playwrite US Trad", "Times New Roman" ; font-size: 22.5px; color: #A8570C;}
a{color: #8B5E34; text-decoration: none;}
a:hover{color: #A8570C; text-decoration: underline;}
ul {list-style-type: none; }
hr{border: 1px solid #8B5E34; border-radius: 5px;}
.title_and_edit_button{display: flex; align-items: center; }
.recipeEditErrorList{ color: red; }
.stepIngredientEditList{ list-style-type: disc; padding-left: .5rem;}
.stepsIngredientList{ padding-bottom: .25rem;}
input#title{font-family: "Playwrite US Trad", "Times New Roman"; font-size: 32.4px; color: #A8570C; font-weight: bold;}
.headerSections{display: flex; justify-content: space-between; flex-direction: row; align-items: end;}
.headerLinks{display: flex; flex-direction: row; justify-content: space-between; gap: 1rem;}
.tag{list-style-type: "#"; color: #8B5E34; text-decoration: none; text-wrap: nowrap; }
.tag:hover{color: #A8570C; text-decoration: underline;}
.loginForm{font-size: 22.5px;}
.loginFormEntry{font-size: 22.5px; width: 100%;}
.ingredientList{display: flex; padding-left: 1rem; text-indent: -1rem; flex-direction: column; width: 10rem;}
.recipeSteps{display:flex; flex-direction: column;}
.recipeMetaData{display: flex; flex-direction: row; flex-wrap: wrap; gap: 1.5rem; row-gap: normal;}
.recipeTagContainer{display: flex; flex-direction: row; gap: 1rem;}
.recipeTags{display: flex; flex-direction: row; gap: 1rem;}
.recipeSteps{display: flex; padding-left: 1rem;}
.recipeResults{font-weight: 600;}
.recipeStatRow{  display: flex; gap: 0.5rem;}
.recipeStats{ display: flex; flex-direction: column;}
.recipeInfo{line-height: 1.25;}
.recipeEditSteps{ padding-bottom: 1rem; }
.recipeInfoEdit{ display: flex; flex-direction: column; gap: 0.5rem;}
.recipeDescriptionEditField{width: 100%; }
.stepDescriptionEditField{width: 100%; }
.recipeSidebarAndDescription{display: flex; gap: 2rem; justify-content: center;}
.recipeSidebarLeft{display: flex; flex-direction: column; gap: 1rem; width: calc(33.333% - 1rem);}
.recipeSidebarRight{display: flex; flex-direction: column; gap: 1rem; width: calc(66.666% - 1rem);}
.recipeIngredientsAndSteps{display: flex; gap: 2rem; justify-content: center;}
.websiteMainHeader{font-family: "Playwrite US Trad", "Times New Roman" ; font-size: 22.5px; font-weight: bold;}
.indexButtons{padding: .5em 1em; background-color: #8B5E34; color:#F7F1E8; border-radius: 30px;}
.indexButtons:hover{background-color: #A8570C; color:#FFF9F1;}
.recipeImage{transform: rotate(2deg); border:5px solid #FFF; border-radius: 3px; width: 100%; padding-bottom: .5rem;}
.recipes{background-color: #FFF; border-radius: 10px; box-shadow: 0px 5px 4px #888; padding: .5rem; display: flex; flex-direction: column; width: calc(33.333% - 1rem);}
.recipeCardContainer{display: flex; flex-direction: row; gap: 1rem; align-items: start; flex-wrap: wrap; justify-content: center;}
.recipeCardContainer img{width: 100%;}
.recipeCardTags{display: flex; gap: 1rem; flex-wrap: wrap; flex-direction: row; row-gap: normal; padding-left: .8rem;}
.indexIntro{display: flex; flex-direction: column; } 
.indexDescriptionandButtons{display: flex; flex-direction: column; gap: 1rem; }
.indexButtonContainer{display: flex; gap: 1rem; justify-content: center;}
.searchBar{width: 100%; display: flex; flex-direction: row; padding:.25rem;}
.profilePicture{width: 5rem; height: 5rem;}
.profilePictureContainer{display: flex; justify-content: end;}
.profileMetaData{display: flex; flex-direction: row; gap: 1rem;}
.profileIntro{display: flex; flex-direction: row; justify-content: space-between;}
.loginButton{width: 50%; min-width: 200px; font-size: 22.5px;}
.loginButtonContainer{display: flex; justify-content: center; width: 100%;}
.loginTextBoxContainer{display: flex;}
.loginFormContainer{display: flex; flex-direction: column; gap: 1rem;}
@media (max-width: 700px) {
    .loginTextBoxContainer{flex-direction: column;}
}
@media (max-width: 600px) {
    .recipes{width: calc(50% - 1rem);}
}
@media (max-width: 500px) {
    .recipeSidebarAndDescription{flex-direction: column;}
    .recipeSidebarLeft{width: 100%;}
    .recipeSidebarRight{width: 100%;}
    .recipeIngredientsAndSteps{flex-direction: column;}
    main{padding: 0; border-left: none; border-right: none;}
    header{padding: .5rem; }
    header hr{margin-left: -.5rem; margin-right: -.5rem;}
}
@media (max-width: 400px) {
    .recipes{width: calc(100% - 1rem);}
}