body {
  background-color: #121212;
  max-width: 800px;
  margin: auto;
  padding: 10px;
}

h1,
h2 {
  color: #ffa750;
  font-family: "Cookie", cursive;
  font-weight: 400;
  font-style: normal;
}

h1 {
  font-size: 50px;
}

h2 {
  font-size: 40px;
}

p {
  color: white;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

img[alt="Chocolate Cookies"] {
  width: 100%;
}

.ingredients-container {
  display: grid; /* CSS Grid Layout */
  grid-template-columns: repeat(
    3,
    1fr
  ); /* The 3 defines three equal-width columns, 1fr (fraction unit) represents
                                        a fraction of the remaining space in the grid container. This means that the
                                        available space is divided equally among the three columns. */
  gap: 40px; /* Space between grid items */
}

.ingredients-item {
  text-align: center;
}

.ingredients-item img {
  width: 100%;
  height: auto;
}

.instructions-container {
  display: flex; /* Flexbox Layout */
  flex-direction: column; /* Arranges items in a column */
  gap: 20px; /* Space between each item */
  width: 100%; /* Sets the container width to 100% */
}

.instruction-item {
  display: flex; /* Flexbox Layout */
  align-items: center; /* Vertically centers the text and image */
  justify-content: space-between; /* Spaces the text and image apart. */
}

.instruction-item:nth-child(even) {
  flex-direction: row-reverse; /* Reverses the order of text and image for
                                even-numbered items, creating an alternating layout */
}

.instruction-item img {
  width: 40%;
}

.instruction-text {
  width: 55%;
  padding: 10px;
  text-align: justify;
}

#highlight-colour {
  color: #ffa750;
  font-weight: bold;
}

.footer {
  width: 100%;
  background-color: #ffa750;
  text-align: center;
  padding: 0.1px;
  margin-top: 60px;
}

.footer p {
  color: black;
  font-size: 15px;
  font-weight: 400;
}

hr {
  margin-top: 60px;
  margin-bottom: 60px;
}