/****************************************************
    *               CSS GENERAL RESET & CO              *
    ****************************************************/
    *, *::before, *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    /*VARIABLE SET */
    :root {
      --header-margin: 1rem; /*All other margin will be relative to this using the calc function*/
      /*Colour definition*/
      --main-bg: hsl(30, 54%, 90%);
      --main-bg-light: hsl(330, 100%, 98%);
      --container-color: hsl(0, 0%, 100%);
      --text-color: hsl(30, 10%, 34%);
      --heading-color: hsl(24, 5%, 18%);
      --subhead-color: hsl(14, 45%, 36%);  
      --inbox-subhead-color: hsl(332, 51%, 32%);
      --independent-border-line-color: hsl(30, 18%, 87%);
    }
    /*HTML AND BODY SET*/
    html {
      font-size: 62.5%;
    }

    body {
      line-height: 1.4;
      font-size: 1.5rem;
      background-color: var(--main-bg);
      color: var(--text-color);
      font-family: "Outfit", sans-serif;
      font-optical-sizing: auto;
      font-weight: 400;
      font-style: normal;
    }

    h1, h2 {
      font-family: "Young Serif", serif;
      font-weight: 400;
      font-style: normal;
    }

    .container {
      background-color: var(--container-color);
      padding-bottom: 2rem;
    }

    /****************************************************
    *                    MAIN SECTION                   *
    ****************************************************/

    /*Margin set for all SECTION*/

    .all-sect, h1 {
      margin: 2.5rem 2rem;
    }

    /*Header styling (Image and H1 tags)*/
    header img {
      width: 100%;
    }

    h1 {
      margin-bottom: var(--header-margin);
      margin-top: calc(var(--header-margin) + .8rem);
      line-height: .95;
      color: var(--heading-color);
    }

    h2 {
      margin-bottom: calc(var(--header-margin) - .3rem);
      color: var(--subhead-color);
    }

    .introduction {
      margin-top: 0;
    }


    /*PREPARATION SECTION STYLE */
    .preparation-detail {
      background-color: var(--main-bg-light);
      border-radius: 1rem;
      padding: 1.4rem 2rem;
    }

    .preparation-detail h3 {
      margin-bottom: calc(var(--header-margin) - .5rem);
      color: var(--inbox-subhead-color);
    }

    .preparation-detail ul li { 
      margin-left: .3rem;
    }


    /*LIST STYLING: ALL*/
    ol, ul {
      margin-left: 2rem;
    }

    li {
      padding-left: 1rem;
      margin-bottom: .5rem;
    }

    /*Targeting all list bullets*/
    li::marker {
      font-size: 1.4rem;
      color: var(--subhead-color);
      font-weight: 600;
    }

    /*INGREDIENTS & INSTRUCTION SECTION STYLE
    NOTE: Same styling apply for both;
    */
    .ingredients, .instruction {
      padding-bottom: 2.5rem;
      border-bottom: .1rem solid var(--independent-border-line-color);

    }

    /*NUTRITION SECTION*/

    .nutrition table {
      width: 100%;
      border-collapse: collapse; /* Ensures there are no double borders */
    }

    .nutrition th, 
    .nutrition td {
      border-bottom: 0.1rem solid var(--independent-border-line-color);
      padding: 1rem 2.5rem; 
      text-align: left;
    }

    .nutrition th {
      font-weight: bold;
      color: var(--subhead-color);
    }

    .nutrition caption {
      text-align: left;
      margin-bottom: var(--header-margin);
    }
    
    /****************
     * FOOTER SECTION *
     ****************/

    .attribution { font-size: 1.1rem; text-align: center; }
    .attribution a { color: var(--heading-color) }


    /****************************************************
    *                BREAKPOINT SETTINGS                *
    ****************************************************/
    
    @media (min-width: 992px) {
      body {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        min-height: 100vh;
        padding: 4rem;

      }
      .container {
        max-width: 60%;
        border-radius: 1.5rem;
        overflow: hidden;
        box-shadow: 0 0 3rem var(--main-bg-light);
      }
      .all-sect {
        margin-left: 2.5rem;
        margin-right: 2.5rem;
      }

      header {
        padding: 2.5rem 2.5rem 1rem;
      }

      header img {
        border-radius: 1rem;
      }

      header h1 {
        margin-left: 0rem;
      }

      footer {
        margin: 1.5rem;
      }
    }