body {background-image: url('cream-biege.jpeg'); /* Ensure this path is correct */
           background-size: cover;
           background-repeat: no-repeat;
           background-attachment: fixed;
           background-position: center;
           margin: 0;
           padding: 0;
           height: 100vh;
           justify-content: center;
           align-items: center;}


.recipe-container{background-color: white; /* Box backgroung color*/
                  width:40%; /* The size you want the box to be*/
                  margin: 20px auto; /* Center the box in the middle of the page*/
                  padding: 20px;
                  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Optional; add shadow for better visibility*/
                  border-radius: 10px; /* Optional; for when you want rounded edges*/
                  min-height: 100vh; /* Ensure the box fills the page */ }


.recipe-container .omelette{background-image: url(image-omelette.jpeg);
                            background-size: cover;
                            background-repeat: no-repeat;
                            background-position: center;
                            width: 90%;
                            margin: 0px;
                            padding: 20px;
                            min-height: 40vh;}   

.p1{font-size:small;}

.prep-container{background-color:rgb(239, 234, 239);
                width: 95%;
                margin: 0;
                padding: 10px;
                border-radius: 10px;
                min-height: 30px;
                margin-bottom: 20px;
                line-height: 1.8;}

.p2{font-size: 16px; 
    color: purple;
    margin-bottom: 20px; 
    line-height: 1.5; /* Better line spacing */ 
    padding: 0 20px;}

.prep-container li{color: black;
       position: relative;}

.prep-container li::marker{color: purple;}

.p3{color: brown;
     font-size: 24px;}

.ingredients {line-height: 1.8;}

.ingredients li::marker{color: rgb(238, 114, 114);}

.ingredients li{font-size: small;}

.p4{color: brown;
    font-size: 24px;}

.instructions li::marker{color: rgb(244, 81, 81);}

.instructions ol{line-height: 1.8;}

.instructions li{font-size: small;
                 }
.p7{font-weight: bold;}

.p5{font-size: small;}

.styled-list{list-style-type: none;} /*remove pointers/bullet points*/
.colored-number{font-size: medium;
                color: brown;
                font-weight: bold;
                align-items: center;
            justify-content: space-between;}

.bold-text{font-size: small;}


/* ======= MEDIA QUERY FOR MOBILE DEVICES ======= */
@media (max-width: 768px) {
  .recipe-container {
    width: 90%; /* Take up most of the screen */
    padding: 15px;
    min-height: auto;
    margin: 20px auto;
  }

  .recipe-container .omelette {
    width: 100%;
    padding: 0;
    min-height: 250px;
    border-radius: 10px;
  }

  .simple h2 {
    font-size: 22px;
    margin-top: 10px;
  }

  .p1 {
    font-size: 16px;
    line-height: 1.6;
  }

  .prep-container {
    width: 80vw;
    padding: 15px;
  }

  .p2 {
    font-size: 16px;
    padding: 0;
  }

  .prep-container li {
    font-size: 14px;
    line-height: 1.6;
  }

  .ingredients {
    padding: 10px 0;
  }

  .p3, .p4 {
    font-size: 20px;
  }

  .ingredients li,
  .instructions li,
  .bold-text,
  .p5 {
    font-size: 14px;
  }

  .instructions ol {
    padding-left: 18px;
  }

  .colored-number {
    font-size: 15px;
  }

  .styled-list {
    padding-left: 0;
  }

  hr {
    margin: 20px 0;
  }
}