* { margin: 0; padding: 0; box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { font-family: "Playwrite US Trad", cursive;
                        font-weight: 400; }

html { font-family: "Nunito", sans-serif; }

html { font-size: 18px; }
h1 { font-size: 32.4px; }
h2, h3, h4, h5, h6 { font-size: 22.5px; }

form[action="/static/login.html"] button { font-size: 22.5px; }
form[action="/static/login.html"]  { font-size: 22.5px; }

strong { font-weight: bold;}
dl dt { font-weight: 600; }

article section p,
article section ol,
article section ul { line-height: 1.25; }

h1, h2, h3, h4, h5, h6 { color: #A8570C; }
html { color: #2E261C; }
a { color: #8B5E34; text-decoration: none; }
a:hover { color: #A8570C; text-decoration: underline; }

article ul a::before {
  content: "#";
  color: #8B5E34;
}

ul { list-style: none; }

a.index-buttons{ 
  background: #8B5E34;
  color: #F7F1E8;
  padding: .5em 1em;
  border-radius: 9999px;
}

a.index-buttons:hover {
  background: #A8570C;
  color: #FFF9F1;
  border-color: #A8570C;
}

article section img {
  transform: rotate(2deg);
  border: 5px solid #FFF;
  border-radius: 3px;
}

html { background: #F7F1E8; }
main { background: #FFF9F1; }

main {
  border: 2px solid #888; 
  border-radius: 40px 40px 0 0;
  border-bottom: none;
}

main ul li article a h3 {
  margin: 0;
  border: 0;
  background: #FFF; 
  border-bottom: none;
}

main ul li article > ul {
  margin: 0 0 1rem 0;
  background: #FFF; 
  border: 0;
  line-height: 1.15;
}

img[src="/static/ben-braiser.png"] {
  width: 200px;
  height: auto;
}

main article > header {
  border: 0;
}

header > p {
  border-bottom: 2px solid #8B5E34;
}
main header > p { border-bottom: 0; }

form[action="/static/login.html"] {
  background: transparent;
  border: 0;
  border-radius: 0;
  border-bottom: none;
}

main ul li article {
  border: 1px solid  #2E261C ;
  border-radius: 10px 10px 10px 10px;
  background: #FFF;
}


main > section ul > li > article {
  border-radius: 12px;
  overflow: hidden;
}

main ul li article > ul > li { margin: 0; }

header.sign-in > p { color: #8B5E34; }

.tag {margin-left: 2rem; }

main form[action="/static/search.html"] input {
  height: 2rem;
}

/* HW2 phase 2  */

header, main, footer{
    max-width: 700px;
    width: 100%;
}

html, body{
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 .5rem;
}

main {
    margin-top: 3rem;
    padding: 1rem;
}

main h1 {
    margin-bottom: 2rem;
}

.recipe-description {
    margin-bottom: 2rem;
}


header {
    display: flex;
    flex-direction: column;
}

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

.bottom-header{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
    
header nav ul {
    display: flex;
    gap: 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

header form{
    margin-top: .25rem;
}

header form input,header form button{
    padding: .25rem;
}

.top-header{
    border-bottom: 2px solid #8B5E34;
}


/* HW2 phase 3  */

.recipe-header{
    display: flex;
    flex-wrap: wrap;
    gap: 0 1.5rem;
    margin-bottom: 2rem;
}

.recipe-header h1{
    width: 100%;
    margin: 0;
}


.recipe-header ul{
    display: flex;
    flex-direction: row;
    gap: .5rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.recipe-header .tag{
    margin-left: 0;
}

.ingredients ul li{
    padding: 0 0 0 1rem;
    text-indent: -1rem;
}

main ol{
    padding: 0 0 0 1em;
}

.recipe-photo img{
    display: block;
    height: auto;
    width: 100%;
    margin-bottom: .5rem;
}

.recipe-photo dl{
    display: flex;
    flex-wrap: wrap;
    column-gap: .5rem;
    row-gap: .25rem;
    margin: 0;
    padding: 0;
}

.recipe-photo dt{
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: calc((100% - .5rem) * 0.25);
}

.recipe-photo dd{
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: calc((100% - .5rem) * 0.75);
}

/* HW2 phase 4  */

.index-page-buttons{
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

main > section > ul{
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    padding: 0 1rem;
    align-items: start;
}


main > section > ul > li > article{
    padding: .5rem;
}

main > section > ul > li > article img{
    display: block;
    width: 100%;
    height: auto;
}

main > section > ul{
    align-items: start;
}

main > section > ul > li > article > ul{
    display: flex;
    flex-wrap: wrap;
    gap: 0 .5rem;
    margin: 0;
    padding: 0;
}

main > section > ul > li > article > ul li a{
    text-wrap: nowrap;
}

main form[action="/static/search.html"]{
    width: 100%;
}

main form[action="/static/search.html"] input{
    width: 100%;
    padding: .25rem;
}

.profile-header{
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 1rem;
}

.profile-header img{
    height: 5rem;
    width: 5rem;
}

/* HW2 phase 5 */

.recipe-row{
    display: flex;
    gap: 1rem;
}

.recipe-row .left{
    width: calc((100% - 1rem) / 3);
}

.recipe-row .right{
    width: calc((100% - 1rem) * 2/3);
}

@media (max-width: 500px){
    .recipe-row{
	display: block;
	margin-bottom: 0;
    }

    .recipe-row .left, .recipe-row .right{
	width: 100%;
    }
}

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

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

    header{
	padding: 0.5rem;
	border-bottom: 2px solid #8B5E34;
    }
    .top-header{
	border-bottom: none;
    }
}

main form[action="/static/login.html"]{
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
    row-gap: 1rem;
    align-items: baseline;
}

main form[action="/static/login.html"] > label{
    width: 20%;
}

main form[action="/static/login.html"] > input{
    width: calc(80% - 1rem);
    padding: 0.25rem;
}

main form[action="/static/login.html"] button{
    width: 50%;
    min-width: 200px;
    margin: 0 auto;
    display: block;
}

@media (max-width: 700px){
    main form[action="/static/login.html"]{
	column-gap: 0;
	display: block;
    }
    
    main form[action="/static/login.html"] > label,
    main form[action="/static/login.html"] > input{
	width: 100%;
	display: block;
    }

    main form[action="/static/login.html"] > label[for="password"]{
	margin-top: 1rem;}
}


main > section > ul > li {
    flex-grow: 0;
    flex-shrink: 1;
    flex-basis: calc((100% - 2rem) / 3);
}

@media (max-width: 600px){
    main > section > ul > li {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: calc((100% - 1rem) / 2) ;
    }
}

@media (max-width: 400px){
    main > section > ul > li {
	flex-grow: 0;
	flex-shrink: 1;
	flex-basis: 100%;
    }
}

@media (max-width: 500px){
    .recipe-photo, .recipe-description, .ingredients, .steps{
	margin-bottom: 2rem;}
}

main > article {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* HW4 phase 2  */

.recipe-header h1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    width: 100%;
    margin: 0;
    padding: 0.2rem 0;
}

.recipe-header h1 #title {
    flex: 1 1 auto;
    min-width: 0;

    color: #A8570C;
    font-family: "Playwrite US Trad", serif;
    font-size: clamp(1.9rem, 4vw, 2.7rem);
    font-weight: 700;
    line-height: 1.2;
    background: #FFF;
    border: 2px solid #C8B7A6;
    border-radius: 8px;
    padding: 0.15rem 0.5rem;
    margin-right: 0.5rem;
    outline: none;
}

textarea {
    width: 100%;
    resize: vertical;
}

.steps textarea {
    vertical-align: top;
}

.steps ul {
    list-style: disc;
    margin-left: 2rem;
    padding-left: 0.5rem;
}

.steps ul li {
    padding: 0.25rem 0;
}

.steps ol > li {
    margin-bottom: 1rem;
}

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

output.errors {
    display: block;
    color: red;
    margin-top: 0.5rem;
}

output.errors ul {
    list-style: disc;
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
}