* { margin: 0; padding: 0; box-sizing: border-box; }
/* Whole site CSS */
html{
  font-size: 18px;
  max-width: 700px;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  width: calc(100% - 1rem);
  margin: auto;
}


.largeText {
  font-size: 32px;
}
.loginText {
  font-size: 22px;
}
.extraLineHeight {
  line-height: 1.25;
}
header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: 3rem;
  
}
body{
  background-color: #F7F1E8;
  display: flex;
  padding: 1rem;
  flex-direction: column;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 2rem;

}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: inherit;
}
main{
  background-color: #FFF9F1;
  border: solid;
  border-width: 2px;
  border-radius: 30px; 
  border-color: #888 ;
  padding: 1rem;
}

header form{
  padding-top: 0.25rem;
}
main header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: right;
  gap: 1rem;
}

nav{
  border-top: #8B5E34 2px solid;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 4rem;
  padding-bottom: 3rem;
}

nav.menu{
  display: flex;
  flex-direction: row;
  gap: 1rem;
}

.heading {
  font-family: "Playwrite US Trad", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 22px;
  color:  #8B5E34;
}

.bodytext {
  font-family: "Nunito", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 18px;
  color:  #000000;
}

.bodytext:hover {
  color:  #A8570C;
}
.bold{
  font-weight: 600;
}

/* Index page */
.indexHeader {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
 .buttonGroup{
  display: flex;
  flex-direction: row;
  gap: 1rem;
  justify-content: center;
  padding-bottom: 1rem;
  padding-top: 1rem;

} 

.button{
  background-color:  #8B5E34;
  color: #F7F1E8;
  border: none;
  padding: .5em 1em;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
  justify-content: center;
  gap: 1rem;
}

.button:hover{
  background-color:#FFF9F1;
  color:  #A8570C;
  cursor: pointer;
} 

.recipe-list{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem;
}
.recipe-card{
  width: calc((100% - 2rem) / 3);
  height: calc((100% - 2rem) / 3);
  display: flex;
  flex-direction: column;
  border-style: hidden;
  box-shadow: 0 7px 12px rgba(0, 0, 0, 0.3); 
  border-width: 2px;
  border-radius: 15px;
  padding: 0.5rem;
  background-color: #FFF;
  justify-content: left;
}

.recipe-card img{
  width: calc((100% - 1rem)); 
  height: calc((100% - 1rem)); 
  padding: 0.5rem;
  justify-content: center;

}
/* For the recipe page */

div.recipeImageContainer {
  display: flex;
  flex-direction: column;
  width: calc(33% - 1rem);
  padding: 1rem;
  gap: 1rem;
}
div.recipeOverviewContainer {
  display: flex;
  width: calc(67% - 1rem);
}
div.ingredientsContainer {
  display: flex;
  flex-direction: column;
  width: calc(33%);
  padding-right: 1rem;
}
div.stepsContainer {
  display: flex;
  width: calc(67%)
}
header nav menu{
  display: flex;
  flex-direction: row;
  gap: 1rem;
}
.recipeImage {
  width: calc(100%);
  transform: rotate(2deg);
  border: solid;
  border-color: #ffffff;
  border-width: 5px;
  border-radius: 3px;
}
.recipeFigure {
  display: flex;
  flex-direction: row;
  padding-bottom: .5rem;
  justify-content: space-between;
  gap: 1rem;
}
.ingredients{
  padding-left: 1rem;
}
.ingredients li{
  text-indent: -1rem;
  padding-left: 1rem;
}
.steps{
  padding-left: 1rem;
}
.recipeInfo{
  display: flex; flex-direction: row; 
  justify-content: space-around; 
  gap: 3rem;
}

.recipeHeader{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.recipeHeader .tags{
  display: flex;
  flex-direction: row;
  gap: .5rem;
  flex-wrap: wrap;
  text-wrap: nowrap;
}
.tags{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-wrap: nowrap;
  padding: .5rem;
  justify-content: left;
  color:  #8B5E34;
}
dl{
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 0.25rem;
  width: calc(25%);
  padding-bottom: 2rem;
}
textarea {
  width: calc(100%)
}
.stepIngredients{
  padding: 0.5rem;
  text-indent: 0.5rem;
  list-style-type: circle;
}
.ingredientInputs input{
   max-width: 6rem;
}
.ingredientInputs input[type="number"]{
  max-width: 3rem;
}

.error{
  font-family: "Nunito", serif;
  font-weight: 800;
  font-style: normal;
  font-size: 18px;
  
  color: #ff0000;
  list-style-type: none;
}
.error:hover{
  color: #ff0000;
}

/* For the profile page */
.profileHeader {
  display: flex;
  flex-direction: column;
  padding-bottom: 3rem;
}

.metadata{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding-bottom: 2rem;
}
.profileImage {
  justify-content: right;
}

/* For the login page */

main.login{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.usernameContainer{
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}
.passwordContainer{
  display: flex;
  flex-direction: row;
  padding-bottom: 1rem;
}
.signInButton{
  display: flex;
  width: calc(50%);
  min-width: 200px;
  padding: 1em 1em;
  justify-content: center;
  gap: 1rem;
}
@media (max-width: 500px) { 
  html{
    padding: 0rem;
    width: calc(100%);
  }
  .recipeInfo {
    flex-direction: column; 
    gap: 2rem;
  }
  .recipeFigure {
  display: flex;
  flex-direction: column;
  padding-bottom: .5rem;
  justify-content: space-between;
  gap: 2rem;
  }
  main{
    border-width : 2px 0px 2px 0px;
  }
}

@media (max-width: 600px){
  .recipe-card{
  width: calc((100% - 1rem)/2);
  height: calc((100% - 1rem)/2);
  }
}
@media (max-width: 400px){
  .recipe-card{
  width: calc((100%));
  height: calc((100%));
  }
}