/* @import url(/assets/fonts/fonts.css); */

:root {
    --White: hsl(0, 0%, 100%);

--Stone-100: hsl(30, 54%, 90%);
--Stone-150: hsl(30, 18%, 87%);
--Stone-600: hsl(30, 10%, 34%);
--Stone-900: hsl(24, 5%, 18%);

--Brown-800: hsl(14, 45%, 36%);

--Rose-800: hsl(332, 51%, 32%);
--Rose-50: hsl(330, 100%, 98%);



}


*, *::before, *::after {
    box-sizing: border-box;
}

body {
    font-family: 'Outfit';
    margin: 0;
    background-color: var(--Stone-100);
    color: var(--Stone-900);
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    overflow-wrap: break-word;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

p {
    margin: 0;
}


.header {
    max-width: 1440px;
    padding-top: 123px;
    /* padding-bottom: 123px; */
    margin: 0 auto;
    /* background-color: red; */
    line-height: 1.5;
}

.main {
   display: flex;
    width: 736px;
    /* height: 1710.41px; */
    flex-direction: column;
    margin: 0 auto;
    background-color: var(--White);
    padding: 40px;
    border-radius: 24px;
    /* padding-top: 50px; */
}

.recipe-intro  img {
    border-radius: 20px;
    margin-bottom: 40px;
}

.recipe-intro h2 {
    font-family:'Young Serif';
    font-size: var(--fs-xl);
    font-weight: 400;
    margin-bottom: 24px;
    /* color: var(--Brown-800); */
}

.recipe-intro p {
    font-size: var(fs-sm);
}


.recipe-preparation-time  {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 656px;
    height: 180px;
    background-color: var(--Rose-50);
    border-radius: 12px;
    padding: 28px;
}

.recipe-preparation-time h4 {
    font-size: var(--fs-md);
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--Rose-800);
}

.recipe-preparation-time ul {
    padding: 0px 0px 0px 21px;
}

.recipe-preparation-time li {
    margin:  0 0 6px;
    font-size: var(--fs-sm);
    padding: 0px 0px 0px 18px;
}

 span {
    font-weight: 700;
    font-size: var(--fs-sm);
}


.recipe-ingridients h2{
    font-family: 'Young Serif';
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--Brown-800);
    margin-bottom: 16px;
}

.recipe-ingridients ul {
    margin:  0 0 6px;
    font-size: var(--fs-sm);
    padding: 0px 0px 0px 18px;
}

.recipe-ingridients li {
    margin:  0 0 6px;
    font-size: var(--fs-sm);
    padding: 0px 0px 0px 18px;
}

.recipe-preparation-time li::marker, .recipe-ingridients li::marker, .recipe-instructions li::marker {
    color: var(--Brown-800);
    font-weight: 700;
}

.line-break hr {
    margin-top: 40px;
    margin-bottom: 40px;
    color: var(--Stone-150);
}

.recipe-instructions h2 {
    font-family: 'Young Serif';
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--Brown-800);
    margin-bottom: 24px;
}

.recipe-instructions ol {
    margin:  0 0 6px;
    font-size: var(--fs-sm);
    padding: 0px 0px 0px 18px;
}

.recipe-instructions li {
    margin:  0 0 6px;
    font-size: var(--fs-sm);
    padding: 0px 0px 0px 18px;
}

.recipe-nutrition h2 {
    font-family: 'Young Serif';
    font-size: var(--fs-lg);
    font-weight: 400;
    color: var(--Brown-800);
    margin-bottom: 24px;
}

.recipe-nutrition p {
    font-size: var(--fs-sm);
}

.recipe-nutrition table th {
    font-size: var(--fs-sm);
    font-weight: 400;
}

.recipe-nutrition table td {
    color: var(--Brown-800);
    font-size: var(--fs-sm);
    font-weight: 700;
}


table {
    margin-top: 12px;
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

th{
    padding: 12px 1px 11px 32px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

td {
    padding: 11px 1px 11px 16px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

table tr:last-child td {
    border-bottom: none;
}

table tr:last-child th {
    border-bottom: none;
}


th {
    font-weight: bold;
}


.attribution {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 10px;
    /* color: var(--Brown-800); */
    font-size: var(--fs-sm);
    font-weight: 700;
}

.attribution a {
    text-decoration: none;
    color: var(--Rose-800);
}



/* Responsive */

@media (max-width: 375px) {



    .header {
        /* max-width: 1440px; */
        padding-top: 0px;
        /* padding-bottom: 123px; */
        margin: 0 auto;
        /* background-color: red; */
        line-height: 1.5;
    }

  .main {
    border-radius: 0px;
    margin: 0;
    overflow: hidden;
    /* padding: 0px; */
  }

.recipe-intro{
    margin: -40px;
    width: calc(100% + 80px);
    border-radius: 0px;
}

.recipe-intro img {
    border-radius: 0px;
    width: 375px;
    height: auto;
}

.recipe-intro h2 {
    margin: 0px 0px 0px 40px;
    width: 300px;
    line-height: 1;
}

.recipe-intro p  {
    margin: 0px 0px 0px 40px;
    width: 42%;
}
}