@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&family=Young+Serif&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Outfit:wght@100..900&display=swap');

:root {
    --color-stone600:#5F564D;
    --color-brown800:#854632;
    --color-stone150:#E3DDD7;
    --color-rose800:#7A284E;
    --color-stone900:#312E2C;
    --color-rose50:#FFF7FB;
    --color-white:#FFF;
    --text-font-YoungSerif:"Young Serif", serif;
    --text-font-Outfit:"Outfit" , sans-serif;
    --margin-reset:0;
    --padding-reset:0;
}
body {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin:128px 0 128px 0;
    padding:0;
    height:100%;
    background-color:var(--color-stone150);
}
hr {
    margin:32px 0 32px 0;
    border-color:var(--color-stone150);
}
.main-container {
    display:flex;
    flex-direction: column;
    width:736px;
    height:fit-content;
    background-color:var(--color-white);
    border-radius: 24px;
    border:solid 1px black;
    padding:40px;
    margin:0;
}

.img-header {
   width:100%;
   height:300px;
   border-radius:12px;
}
.header-title-container {
    margin:40px 0 0 0;
}
.header-title {
    font-family: var(--text-font-YoungSerif);
    font-weight: 400;
    line-height: 100%;
    color:var(--color-brown800);
    font-size:28px;
}
.header-title.recipe {
    font-size:40px;
    font-family: var(--text-font-YoungSerif);
    margin:24px 0 0 0;
    color:var(--color-stone900);
    font-weight:400;
    line-height:150%;
}
.header-description {
    font-size:16px;
    font-family: var(--text-font-Outfit);
    margin:24px 0 0 0;
    color:var(--color-stone600);
    font-weight:400;
    line-height: 150%;
}
.container.preparation {
    padding:24px;
    height:122px;
    background-color: var(--color-rose50);
    margin:32px 0 32px 0;
    border-radius: 12px;
}
.preparation ul {
    margin:0;
    padding-left: 20px;
}
.preparation ul li {
    font-family: var(--text-font-Outfit);
    line-height: 1.5;
    color: var(--color-stone600);
    padding-left:1.3em
}
.preparation ul li::marker {
    color:var(--color-rose800);
}
.header-title.preparation {
    font-size:20px;
    font-family:var(--text-font-Outfit);
    color:var(--color-rose800);
    font-weight:700;
    margin:0 0 16px 0;
}
.header-title.ingradients {
    margin:0 0 24px 0;
}
.container.ingradients {
    height:201px;
    border-bottom: solid 1px var(--color-stone150);
    padding:32px 0 10px 0;
}
.container.ingradients ul {
    list-style-type: disc;
    padding-left: 27px;
}
.container.ingradients ul li {
    font-family:var(--text-font-Outfit);
    font-weight:400;
    color:var(--color-stone600);
    line-height: 150%;
    padding-left: 1.0em;
}
.container.ingradients ul li::marker {
    color:var(--color-brown800);

}
.header-title.instructions {
    margin:0 0 24px 0;

}
.container.instructions {
    border-bottom: solid 1px var(--color-stone150);
    padding:32px 0 37px 0;
    height:320px;
}
.container.instructions ol {
    counter-reset: step-counter;
    list-style: none;
    padding-left: 0;
    line-height: 170%;
}
.container.instructions ol li {
    counter-increment: step-counter;
    position: relative;
    padding-left: 2.4rem;
    font-family: var(--text-font-Outfit);
    color: var(--color-stone600);
}
.container.instructions li::before {
    content: counter(step-counter) ".";
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold;
    color:var(--color-brown800);
    margin:0 0 0 8px;
}
.step-title {
    font-weight: bold;
}
.step-desc {
    display: inline;
}
.header-title.nutrition {
    margin:32px 0 0 0;
}
.nutrition-descript {
    margin:24px 0;
    font-family: var(--text-font-Outfit);
    color:var(--color-stone600);
}
.container.nutrition table {
    border-collapse: collapse;
    width:100%;
}
.container.nutrition table tr {
    border-bottom:solid 1px var(--color-stone150);
}
.container.nutrition table tr:last-child { 
    border-bottom:none; 
}
.nutrition-ls-name {
    padding:12px 0 12px 32px;
    width:45%;
    font-family: var(--text-font-Outfit);
    font-weight: 400;
    color:var(--color-stone600);
    line-height: 150%;
}
.list-value {
    font-family: var(--text-font-Outfit);
    line-height: 150%;
    font-weight: bold;
    color:var(--color-brown800);
}
                          /* MEDIA QUERIES */
@media (max-width: 768px) {
    .main-container {
        width:616px;
        border:none;
        
    }
    .header-description {
        text-align: left;
    }
    .container.instructions {
        padding:0;
        height:fit-content;
    }
    .container.ingradients {
        padding:0 0 15px 0;
        margin:0;
        height:fit-content;
    }
    .header-title.instructions {
        margin:32px 0 0 0;
    }
}

@media (max-width:702px) {
    .main-container {
       width:516px;
       border:none;
    }
}
@media (max-width:599px) {
    body {
        margin:0;
    }
    .main-container {
       width:510px;
       border:none;
       margin:0;
    }
    .img-header {
        height:260px;
    }
}
@media (max-width:499px) {
    body {
        margin:0;
    }
    .main-container {
       width:416px;
       border:none;
    }
    .img-header {
        height:210px;
    }
}
@media (max-width:375px) {
    body {
        margin:0;
    }
    .img-header {
        height:171px;
    }
    .main-container {
        width:100%;
        height:fit-content;
        padding:0;
        margin:0;
        border:none;
    }
    .header-title-container {
        padding:0 32px 0 32px;
    }
    .header-title.recipe {
        font-size: 36px;
    }
    .preparation ul {
        margin:0;
        list-style-image: url("assets/images/Frame 7.svg");
        padding-left: 20px;
    }
    .header-title.instructions {
        margin:32px 0 0 0;
    }
    .container.preparation {
        padding:24px;
        margin:32px;
        height:fit-content;
    }
    .container.ingradients {
        padding:0 0 15px 0;
        margin:0 32px;
        height:fit-content;
    }
    .container.ingradients ul li {
        line-height: 190%;
    }
    .container.instructions {
        margin:0 32px 29px 32px;
        padding-bottom: 13px;
        height:fit-content;
    }
    .container.nutrition {
        padding:0 32px 40px 32px;
    }
    .header-title.nutrition {
        margin:0;
    }
    .nutrition-ls-name {
        width:54%;
    }
}