/* ===== CSS RESET ===== */

body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 2rem;
  background-color: #d6a77a;
  color: #212121;
  font-size: 2rem;
  
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  align-items: center;
}

header {
    background-color: #c37d3c;
    padding: 1rem;
    border-radius: 0.1rem;
    border-color: #ce955f;
    line-height: 4rem;
    font-size: 2.5rem;
    font-weight: bold;
    padding-top: 2rem;
    padding-bottom: 1.5rem;

    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    width: 100%;
}

header #account-links {
    display: flex;
    flex-direction: row;
    justify-content: start;
}

header #header-home {
    display: flex;
    flex-direction: row;
    justify-content: center;
    font-size: 4rem;
    font-weight: bolder;
}

header nav {
    display: flex;
    flex-direction: row;
    justify-content: start;

    gap: 2rem;
}

main {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;

    align-items: center;
}

#login-form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
}

.cards-box {
    justify-content: space-evenly;
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    width: 100%;
}

.card {
  background-color: #e3c3a5;
  padding: 1rem;
  border-radius: 15px;
  border-color: #7d5026;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  width: 100%
}

#login-form {
    font-size: 2.2rem;
}

#login-form #username, #login-form #password {
    height: 2rem;
    width: 22rem;
}

#login-form #btn-submit {
    width: 12rem;
    height: 2.3rem;
    font-size: 1.7rem;
}

.search-block form {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    align-items: center;
}

.search-block #btn-search {
    width: 12rem;
    height: 2.3rem;
    font-size: 1.7rem;
}

.search-block #big-search {
    width: 22rem;
    height: 2rem;
}

.card .description{
    flex-wrap: wrap;
}

#recipe-display p {
    background-color: #e3c3a5;
    border-radius: 5px;
    padding: 0.5rem;
    border-color: #6e3608;
}

#recipe-info {
    display: flex;
    background-color: #d6a77a;
    border-radius: 10px;
    padding: 0.5rem;
    border-color: #6e3608;
}

#comment-form {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

#comment-form.card {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

/* ===== Tablet ===== */
@media (min-width: 1000px) {
    .cards-box {
        flex-direction: row;
        gap: 1rem;
    }

    .card {
      width: 45%;
    }
}
/* ===== Desktop ===== */
@media (min-width: 1500px) {
    .cards-box {
      gap: 1.5rem;
      padding: 1rem;
    }

    .card {
      width: 30%;
    }
}




a:link {
    color: #6e3608;
}
a:visited {
    color: #9e2405;
}
a:hover {
    color: #cf3f1f;
}