.food-recipes {
  text-align: center;
}
.food-recipes > details {
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow at the bottom */
    padding: 16px;         /* Padding inside each box */
    background-color: #ffffff;  /* Background color of the box */
    border-radius: 8px;    /* Rounded corners for each box */
    transition: transform 0.2s, box-shadow 0.2s; /* Transition for hover effect */
    margin-bottom: 16px;   /* Spacing between each box */
}

/* Optional: Add a hover effect to elevate the box when hovered */
.food-recipes > details:hover {
    cursor: pointer; /* Changes the cursor to a pointer icon */
    transform: translateY(-4px); /* Moves the box slightly upwards */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.1); /* Increases the shadow depth */
}

.food-recipes > details > summary {
    font-family: var(--text-font-family);
    color: #933c84;  /* Set the text colour */
    font-weight: bold;  /* Make the text bold */
}

.food-recipes > details,
.food-recipes > details > summary,
.food-recipes > details > p {
    text-align: center;  /* Align text to the centre */
}
.food-recipes h2 {
    text-align: center;
}
.food-recipes::before {
  content: "\f2e7"; /* Unicode for the Font Awesome icon */
    font-family: "Font Awesome 5 Free"; /* Specify the Font Awesome font family */
    font-weight: 900; /* This might be needed depending on the specific version/style of Font Awesome you're using */
    font-size: 5em;
    opacity: 0.5;
    display: block; /* Will make it behave like a block element */
    margin-bottom: 10px; /* Space between the icon and the content below */
    
}