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

html { 
    font-size: 18px;
    background-color: #F7F1E8;
    display: flex;
    justify-content: center;
}
body {
    font-family: "Nunito", "Arial", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: #2E261C;
    width: 100%;
    max-width: 700px;
    margin: 0 0.5rem;
}
header { margin-bottom: 3rem; }
nav { 
    display: flex; 
    justify-content: space-between;
    align-items: center;
    margin-top: 0.25rem;
}
header nav { flex-wrap: wrap; }
nav ul { 
    display: flex;
    gap: 1rem;
}
nav button { padding: 0.25rem; }
nav input { padding: 0.25rem; }
output { color: red; }
output ul { 
    margin-bottom: 2rem; 
    padding-left: 1rem;
}
main header { margin-bottom: 2rem; }
main { 
    background-color: #FFF9F1; 
    border: 1px solid #2E261C;
    border-radius: 2rem;
    padding: 1rem;
}
:is(h1, h2, h3, h4, h5, h6, h1 input) {
    font-family: "Playwrite US Trad", "Arial", cursive;
    font-optical-sizing: auto;
    font-size: 1.25rem;
    font-style: normal;
    color: #8B5E34;
}
header h1 { font-size: 1.8rem; }
h1 input { margin-bottom: 1rem; }
ul { list-style-type: none; }
a { 
    color: #8B5E34; 
    text-decoration: none;
}
a:hover { color: #A8570C; }
img { width: 100%; }
#button-dock {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    gap: 1rem;
}
#description {
    margin-top: 0.5rem;
}
#edit, #save, #public {
    float: right;
    padding: .25rem;
}
#ingredients {
    padding-left: 1rem;
    text-indent: -1rem;
}
#login { font-size: 1.25rem; }
#metadata {
    display: flex;
    justify-content: flex-start;
    gap: 1.5rem;
    flex-wrap: wrap;
    row-gap: 0;
}
#profile-data {
    display: flex;
    gap: 1rem;
}
#profile-info {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
#profile-info img {
    height: 5rem;
    width: 5rem;
}
#recipe dl { 
    font-weight: 600;
    margin-bottom: 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 0.25rem;
}
#recipe dl div {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
}
#recipe dl div dt { width: 25% }
#recipe dl div dd { width: 75% }
#recipe dl div dd input { width: 50% }
#recipe img { 
    transform: rotate(2deg);
    border: 5px solid #FFF;
    border-radius: 3px;
    margin-bottom: .5rem;
}
#recipe-tags {
    display: flex;
    gap: .5rem;
}
#recipe-tags ul {
    display: flex;
    gap: .5rem;
}
#recipe-title { 
    display: flex; 
    justify-content: space-between;
}
#recipe-title form button { flex: 0; }
#search {
    width: 100%;
    padding: .25rem;
}
#sign-in {
    width: 50%;
    min-width: 200px;
    display: block;
    margin: 0 auto;
    margin-top: 1rem;
}
#steps { padding-left: 1em; }
#steps textarea { 
    width: 100%;
    margin: 0.5rem 0rem;
}
#steps ul li input { width: 100%; }
#top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .25rem;
}
#top-row h1 { flex-grow: 1; }
#view-password-row {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    font-size: 1rem;
}
.amount { width: 20%; }
.button {
    background-color: #8B5E34;
    text-align: center;
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 1rem;
    color: #FFF9F1;
    margin-right: 1rem;
}
.bulleted { list-style-type: circle; }
.card-deck {
    display: grid;
    grid-template-columns: calc(100%/3) calc(100%/3) calc(100%/3);
    margin: 0 1rem;
    gap: 1rem;
    justify-content: center;
}
.decrease-height { line-height: 1.25; }
.ingredient { width: 50%; }
.login-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}
.login-row label { width: 20%; }
.login-row input {
    width: 80%;
    padding: 0.25em;
}
.recipe-card {
    background-color: #FFF9F1;
    box-shadow: 3px 5px 20px 2px rgba(46,38,28,0.4);
    border-radius: 0.5rem;
    margin: 0.5rem;
    padding: 0.5rem;
}
.recipe-card ul {
    display: flex;
    gap: 0.5rem;
    row-gap: 0;
    flex-wrap: wrap;
}
.recipe-card li { text-wrap: nowrap; }
.recipe-row {
    display: flex;
    gap: 1rem;
}
.recipe-column {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    flex-wrap: wrap;
    width: calc(100% / 3);
}
.step-ingredients {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    list-style-type: none;
}
.unit { width: 25%; }
.visually-hidden { display: none; }
.wide-section { width: calc(100% / 3 * 2) }

@media (max-width: 700px) {
   .login-row {
        flex-direction: column;
        justify-content: normal;
        align-items: normal;
        gap: 0;
        margin-bottom: 1rem;
    }
    .login-row label { width: 100%; }
    .login-row input { width: 100%; } 
}

@media (max-width: 600px) {
    .card-deck { grid-template-columns: 50% 50%; }
}

@media (max-width: 500px) {
    body { margin: 0; }
    main { border: none; }
    header { padding: 0.5rem; }
    main header { padding: 0; }
    #ingredients { padding-bottom: 2rem; }
    #recipe {
        display: flex;
        flex-direction: column;
        gap: 2rem;
    }
    #recipe h2 { padding-bottom: 0.5rem; }
    #top-row h1 { width: 100%; }
    .recipe-row { 
        display: block;
        width: 100%;
    }
    .recipe-column { 
        display: block; 
        width: 100%;
    }
}

@media (max-width: 400px) {
    .card-deck { grid-template-columns: 100%; }
}