<head>
    <title>CSS Template</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        * {
            box-sizing: border-box;
        }

        h1 {
            font-family: "EB Garamond", serif;
            text-align: left;
            font-size: 60px;
            color: #d9534f;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Add text shadow */
        }

        p {
            font-family: Times New Roman;
            text-align: left;
            color: #d9534f;
            margin-bottom: 20px; /* Increase spacing between paragraphs */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add text shadow */
        }

        body {
            width: 90%;
            margin-left: auto;
            margin-right: auto;
            font-family: DM Serif Display;
            background-image: url("｡_ﾟ+ ɢʀɪᴅ ᴘᴀᴛᴛᴇʀɴ ｡_ﾟ+.jpeg");
            background-size: cover;
            background-attachment: fixed;
				}

        .recipe-container {
            border: 10px solid #FF5D60; /* Border around the whole secret recipe */
            padding: 20px;
            background-color: transparent; /* Background color for better visibility */
            border-radius: 0px;
            border-width: auto;/* Margin to separate from other elements */
        }
	.recipe-containermini {
            border: 8px solid #FFFFFF; /* Border around the whole secret recipe */
            padding: 20px;
            background-color: transparent; /* Background color for better visibility */
            border-radius: 0px;
            border-width: auto;/* Margin to separate from other elements */
        }
        header {
            border: 3px solid #d9534f; /* Add border with the desired color */
            padding: 10px;
            text-align: center;
            font-size: 20px;
            color: #d9534f; /* Change text color to match the border */
            background-color: #FFFFFF; /* Ensure the background is white */
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add text shadow */
        }

        section {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white; /* White background for better visibility */
            border: 3px solid #d9534f; /* Border for the recipe section */
            padding: 20px;
            margin: 20px 0; /* Margin to separate from other elements */
            border-radius: 10px;
        }

        .container1 {
            flex: 1;
            background: transparent; /* Make background transparent */
            padding: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

       .image {
            max-height: 90%;
            width: auto;
        }

        .container2 {
            flex: 2;
            padding: 20px;
            background-color: white; /* White background for better visibility */
            border-radius: 10px;
        }

        .ingredient-list {
            list-style-type: disc;
            margin-left: 20px;
            margin-bottom: 10px; /* Increase spacing between list items */
        }

        .recipe-ingredient h2, .recipe-instructions h2 {
            color: #d9534f;
            border-bottom: 2px solid #d9534f;
            padding-bottom: 5px;
            margin-bottom: 10px;
            text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3); /* Add text shadow */
        }

        .recipe-instructions ol {
            margin-left: 20px;
        }

        .recipe-instructions li {
            margin-bottom: 10px; /* Increase spacing between list items */
        }
  

        form {
            border: 3px solid #d9534f; /* Add border with the desired color */
            padding: 10px;
            text-align: center;
            font-size: 20px;
            color: #d9534f; /* Change text color to match the border */
            background-color: #FFFFFF;
            border-radius: 20px;
        }

        input[type="text"] {
            width: 40%;
            padding: 10px;
            margin: 5px 0 2px 0;
            display: inline-block;
            border: 1px solid #d9534f;
            border-radius: 20px;
            box-sizing: border-box;
            background: #FFD4D5;
        }
		   button {
            padding: 5px 10px;
            margin-top: 10px;
            border: 2px solid #d9534f;
            border-radius: 20px;
            background-color: #d9534f;
            color: white;
            font-size: 20px;
            cursor:pointer;
        }

        button:hover {
            background-color: white;
            color: #d9534f;
			
			  
    </style>
