/* styles.css */

/*=============== General ===============*/

body {
    font-family: 'Fredoka One', cursive, sans-serif;
    background-color: #ffe58a; /* Same yellow as the first page */
    margin: 0; /* Remove default margin */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/*=============== Recipes ===============*/

.recipe-content {
    background-color: #ffcc66; /* Lighter pastel yellow */
    text-align: center;
    color: white; /* Set font color to white */
    padding: 20px;
    width: 580px;
    display: flex;
    align-items: center;
    flex-direction: column; /* Center content vertically */
    border-radius: 10px; /* Rounded corners */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}

.recipe-title {
    font-size: 2rem;
    margin-bottom: 20px;
}

.recipe-info ul {
    list-style-position: inside; /* Place bullet points inside the content area */
    padding-left: 0; /* Reset left padding */
}

.recipe-info ul li {
    margin: 10px 0; /* Add some spacing between list items */
}

.recipe-info ol {
    list-style-position: inside; /* Place numbering inside the content area */
    padding-left: 0; /* Reset left padding */
}

.recipe-info ol li {
    margin: 10px 0; /* Add some spacing between list items */
}

/*=============== Image ===============*/

img {
    width: 400px;
    margin-right: 20px; /* Space between image and text */
    border-radius: 10px; /* Rounded corners for the image */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Add subtle shadow */
}