* { margin: 0; padding: 0; box-sizing: border-box; }
html {font-size: 18px; display: flex; justify-content: center;}
body {background-color: #F7F1E8; padding: 0 .5rem; max-width: 700px; width: 100%}
#logo_and_profile {display: flex; flex-direction: row; justify-content: space-between; align-items: end; border-width: 3px; border-bottom-style: solid; border-color: #8B5E34;}
nav {display: flex; flex-direction:row; justify-content: space-between; padding-top: .25rem;}
#nav_links {display: flex; flex-direction: row; gap: 1rem}
#search-bar, #search-button {padding: .25rem}
#page {display: flex; flex-direction: column; gap: 3rem}
#ingredients-and-steps {display: flex; flex-direction: row; gap: 2rem;}
main {display: flex; flex-direction: column; gap: 2rem}
section {display: flex; flex-direction: column; padding: 1rem;}
#metadata {display: flex; flex-direction: column; gap: 1.5rem; justify-content: space-between; flex-wrap: wrap;}
.tags {display: flex; flex-direction: row; gap: .5rem;}
.card-tags {display: flex; gap: .5rem; flex-wrap: wrap; text-wrap: no-wrap}
.login {display: flex; flex-direction: column; gap: 1rem;}
#username {display: flex; flex-direction: row; align-items: baseline;}
#username-input {display: flex; width: 80%; justify-content: start; padding: .25rem}
#password {display: flex; flex-direction: row; align-items: baseline;}
#password-input {display: flex; width: 80%; justify-content: start; padding: .25rem}
#recipe-title {display: flex; flex-direction: row; justify-content: space-between; align-items: start;}
#login-container {display: flex; justify-content: center;}
#login-button {width: 50%; min-width: 200px;}
.errors {color: red}
#ingredients-list {padding-left: 1rem; text-indent: -1rem;}
#recipe-steps {display: flex; flex-direction: column; gap: 1rem; line-height: 1.25;}
#recipe-steps textarea {vertical-align: top;}
#step-ingerdients {margin-left: 2rem; list-style: disc; padding-top: 0.25rem;}
#photo-and-info {display: flex; flex-direction: column; gap: .5rem; width: calc((100% - 1rem) / 3)}
#description {width: calc((100% - 1rem) * 2 / 3); display: flex; flex-direction: column;}
#photo-info-and-description {display: flex; flex-direction: row; gap: 1rem; padding: 1rem}
#info {display: flex; flex-direction: row; flex-wrap: wrap; gap: .25rem .5rem}
#info dd {display: flex; width: calc(75% - .5rem);}
#cook, #yeild, #prep, #total {font-weight: 600; width: calc(25% - .5rem);}
#welcome-and-buttons {display: flex; flex-direction: column; gap: 1rem}
#buttons {display: flex; flex-direction: row; justify-content: center; gap:1rem}
#search-page-bar {width: 100%; padding: .25rem}
#user-info {display: flex; flex-direction: row; justify-content: space-between;}
#profile-image {width: 5rem; height: 5rem}
#cards {display: flex; flex-direction: row; flex-wrap: wrap; gap: 1rem; padding: 0 1rem;}
.card-image {max-width: 100%;}
.card {border-width: 1px; border-color:#2E261C; border-style: solid; border-radius: 20px; background-color: #FFF; box-shadow: -1px 2px #888; margin: 10px; padding: .5rem; width: 100%; }
.list-card {width: calc((100% - 2rem) / 3);}
h1, h2, h3, h4, h5, h6, .recipe-name {font-family: Playwrite US Trad, Arial, Helvetica, serif, sans-serif}
input[type=number][size] { width: calc(attr(size type(<number>)) * 1ch + 2rem); }
input, textarea {font: inherit; color: inherit}
textarea {resize: vertical; width: 100%; box-sizing: border-box; padding: 0; margin: 0;}
a, p, button, li, dd, dt, label {font-family: Nunito, Arial, Helvetica, serif, sans-serif}
#password-container{display: flex; flex-direction: column;}
#show-password-container{display: flex; flex-direction: row; justify-content: start; gap: .5rem; font-size: 18px;}
ul {list-style: none;}
.visually-hidden {display: none}
h1 {font-size: 180%}
h2, h3, h4, h5, h6 {font-size: 125%}
.login {font-size: 125%}
a {text-decoration: none; color: #8B5E34}
a:hover {text-decoration: underline; color: #A8570C}
#name, p, #tag-header  {color: #2E261C; }
.logo {color: #8B5E34}
.recipe-name, h1, h2, h3, h4, h5, h6 {color: #A8570C; font-weight: 600; }
.sign-in-browse {background-color: #8B5E34; color: #F7F1E8; padding: .5em 1em; border-radius: 100px }
.sign-in-browse:hover {background-color: #A8570C; color: #FFF9F1}
#recipe-photo {transform: rotate(2deg); border-width: 5px; border-color: #FFF; border-radius: 3px; border-style: solid;}
#description {width: 75%;}
.hashtag {color:#888}
main {border-width: 1px; border-color: #2E261C; border-style: solid; border-top-left-radius: 25px; border-top-right-radius: 25px; padding: 1rem; background-color: #FFF9F1; border-bottom: none;}

@media (max-width: 500px) {
    #ingredients-and-steps, #photo-info-and-description {display: flex; flex-direction: column; gap: 2rem;}
    body {padding: 0}
    header {padding: 0 .5rem}
    main {padding: 0 .5rem; border-left: none; border-right: none;}
    #photo-and-info, #description{width: 100%}
}

@media (max-width: 700px) {
    #username {display: flex; flex-direction: column;}
    #password {display: flex; flex-direction: column;}
}

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

@media (max-width: 400px) {
    .list-card {width: 100%;}
}