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

html {
    font-family: 'Nunito', serif;
    background-color: #F7F1E8;
    font-size: 18px;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: .5rem;
    padding-right: .5rem;
}

body header {
    padding-bottom: 3rem;
}

body main {
    padding: 1rem;
}

.site-header {
    width: calc(min(100%, 700px));
    display: flex;
    flex-direction: column;
}

.header-top-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.header-border-line {
    text-align: right;
}

.header-bottom-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: solid;
    border-color: #8b5e34;
    padding-top: .25rem;
    text-align: right;
}

.search-links-form {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.recipe-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.recipe-metadata {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.5rem;
}

.recipe-tags {
    display: flex;
    flex-direction: row;
    gap: .5rem;
}

.submain-container {
    display: flex;
    flex-direction: row;
    row-gap: 1rem;
}

.left-sidebar {
    display: flex;
    flex-direction: column;
    flex: 0 0 33.333%;
    max-width: 33.333%;
    padding-right: 1rem;
}

.right-side-bar {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 0 0 66.666%;
    max-width: 66.666%;
}

.recipe-page-photo {
    transform: rotate(2deg);
    border: white, 5px;
    border-radius: 3px;
    max-width: 100%;
    padding-bottom: .5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Playwrite US Trad', sans-serif;
}

h1 {
    font-size: 1.8em;
    color: #8b5e34
}

h2,
h3,
h4,
h5,
h6 {
    font-size: 1.25em;
    color: #8b5e34
}

ul {
    list-style: none;
}

main {
    width: calc(min(100%, 700px));
    font-size: 18px;
    border: solid 1px black;
    border-radius: .5em;
}

.heading-area {
    padding-bottom: 2rem;
}

#header-search-form{
    display: flex;
    gap: .5rem;
    align-items: baseline;
}

article {
    background-color: white;
    border: .001px solid grey;
    border-radius: .5em;
    box-shadow: 0px 0px 5px grey;
    margin-block-end: 1em;
}

.login-form {
    display: flex;
    flex-direction: column;
    font-size: 1.25rem;
}

dt {
    font-weight: 600;
}

.prep-section {
    display: flex;
    max-width: 100%;
    column-gap: .5rem;
    row-gap: .25rem;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
    align-items: baseline;
}

.prep-section dt,
.prep-section dd {
    margin: 0;
}

.prep-section dt {
    flex: 0 0 25%;
    min-width: 0;
}

.prep-section dd {
    flex: 0 0 calc(75% - .5rem);
    min-width: 0;
}

.ingredients,
.description,
.steps {
    line-height: 1.25;
}

.ingredients {
    display: flex;
    flex-wrap: wrap;
}

.ingredients-list {
    padding-left: 1rem;
}

.steps-list {
    padding-left: 1em;
}

.picture-prep-section {
    max-width: 100%;
    padding-bottom: 2rem;
}

a,
a:visited {
    text-decoration: none;
    color: #8b5e34
}

a:hover,
a:visited:hover {
    text-decoration: underline;
    color: #A8570C;
}

#sign-in-link {
    color: #F7F1E8;
    background-color: #8b5e34;
    padding: .5em;
    border-radius: 1em;
}

#sign-in-link:hover {
    color: #A8570C;
    background-color: #FFF9F1;
}

#browse-recipes-link {
    color: #F7F1E8;
    background-color: #8b5e34;
    padding: .5em;
    border-radius: 1em;
}

#browse-recipes-link:hover {
    color: #A8570C;
    background-color: #FFF9F1;
}

#index-buttons {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
    gap: 1rem;
}

.recipe-image {
    max-width: 100%;
    padding: .5rem;
}

.recipe-card {
    gap: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.recipe-article-links {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    padding: 0 .5rem .5rem;
}

.recipe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 1rem;
    grid-auto-flow: row dense;
}

.recipe-tags-lists {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.recipe-tags {
    list-style-type: none;
}

.search-page-recipes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding-top: 1rem;
    padding-bottom: 1rem;
    gap: 1rem;
}

.search-page-recipes-grid > * {
    min-width: 200px;
}

#search-box {
    width: 100%;
    padding: .25rem;
}

#user-logo {
    height: 5rem;
    width: 5rem;
}

#username-logo {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 1rem;
}

#login-username-container,
#login-password-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#checkbox-container {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: .5rem;
    font-size: .75rem;
    padding-top: 1rem;
}

#show-password-checkbox {
    height: 10px;
    width: 10px;
}

#login-button-container {
    display: flex;
    padding-top: 1rem;
    justify-content: space-around;
}

#username,
#password {
    align-items: right;
    width: 80%;
    padding: .25rem;
}

#login-button {
    display: block;
    width: clamp(200px, 50%, 28rem);
    margin: 1.5rem auto 0;
    padding: .5rem 5rem .5rem;
}

.page-title-with-action {
    position: relative;
    padding-right: 6rem;
}

.page-title-with-action .primary-action {
    position: absolute;
    top: 0;
    right: 0;
}

.title-input {
    width: 100%;
    font-family: 'Playwrite US Trad', sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1.2;
    border: 1px solid #ccc;
    border-radius: .5rem;
    padding: .4rem .6rem;
}

.description-textarea,
.step-textarea {
    width: 100%;
    resize: vertical;
    border: 1px solid #ccc;
    border-radius: .5rem;
    padding: .6rem .8rem;
    font: inherit;
}

.step-item textarea {
    vertical-align: top;
}

.step-item {
    padding-bottom: 1rem;
}

.ingredient-list {
    list-style: disc;
    list-style-position: outside;
    padding-left: 2rem;
    margin-top: .5rem;
}

.ingredient-list li {
    margin-bottom: .25rem;
}

.ingredient-inputs {
    display: grid;
    grid-template-columns: minmax(6ch, 8ch) minmax(6ch, 10ch) 1fr;
    column-gap: .5rem;
    align-items: center;
}

.ingredient-inputs input {
    width: 100%;
    min-width: 0;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.error-messages {
    display: flex;
    flex-direction: column;
    align-items: baseline;
    color: red;
    background-color: #ffe6e6;
    border: 1px solid red;
    border-radius: .5rem;
    padding: 1rem;
    margin-top: 1rem;
}

.error-messages h3 {
    color: red;
    margin-bottom: .5rem;
}

.error-messages ul {
    list-style: disc;
    list-style-position: inside;
    padding-left: 1rem;
}

.error-messages li {
    margin-bottom: .25rem;
}

@media (max-width: 700px) {
    #login-username-container,
    #login-password-container {
        flex-direction: column;
        align-items: baseline;
        gap: 1rem;
        margin-top: 1rem;
    }

    #login-username-container {
        margin-top: 0;
    }

    #login-username-container input {
        margin-bottom: 1rem;
    }

    #username,
    #password {
        flex: 0 0 80%;
        padding: .25rem;
        margin-left: auto;
        width: 100%;
    }
}

@media (max-width: 600px) {
    .search-page-recipes-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .recipe-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 500px) {
    body {
        padding: 0;
        align-items: baseline;
    }

    header {
        padding-bottom: .5rem;
    }

    main {
        border-left: none;
        border-right: none;
    }

    .submain-container {
        display: block;
    }

    .left-sidebar {
        flex: none;
        max-width: 100%;
        padding-right: 0;
        padding-bottom: 2rem;
    }

    .right-side-bar {
        flex: none;
        max-width: 100%;
        gap: 2rem;
    }

    .right-side-bar {
        gap: 2rem;
    }

    .description {
        padding-left: -1rem;
    }

    .steps {
        padding-left: .5rem;
    }
}

@media (max-width: 400px) {
    .search-page-recipes-grid {
        grid-template-columns: 1fr;
    }
}