:root {

            --primary-color: #E5DAC9;

            --secondary-color: #375659;

            --text-color: #333;

            --background-color: #FFFFFF;

        }

        body {

            font-family: 'Arial', sans-serif;

            margin: 0;

            padding: 0;

            background-color: var(--background-color);

            color: var(--text-color);

            background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23E5DAC9" fill-opacity="0.15" fill-rule="evenodd"%3E%3Ccircle cx="3" cy="3" r="3"/%3E%3Ccircle cx="13" cy="13" r="3"/%3E%3C/g%3E%3C/svg%3E');

            padding-top: 60px;

        }

        .container {

            max-width: 1200px;

            margin: 0 auto;

            padding: 20px;

        }

        .top-section {

            background: white;

            padding: 30px 0 10px 0;

            width: 100%;

            max-width: 1200px;

            margin: 0 auto 0px;

            border-radius: 15px;

            position: relative;

        }

        .site-title-container {

            text-align: center;

            margin-bottom: 15px;

        }

        .happy-lady-icon {

            width: 80px;

            height: 80px;

            background-image: url('yaidy.jpg');

            background-size: cover;

            background-repeat: no-repeat;

            margin: 0 auto 15px;

            border-radius: 50%;

        }

        .site-title {

            font-size: 28px;

            font-weight: bold;

            color: var(--secondary-color);

            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

            font-family: 'Pacifico', cursive;

            max-width: 200px; /* Adjust this value as needed */

            height: auto;

        }

        .fixed-top {

            position: fixed;

            top: -100%;

            left: 0;

            right: 0;

            background-color: var(--background-color);

            padding: 20px 15px;

            box-shadow: 0 2px 10px rgba(0,0,0,0.1);

            z-index: 1000;

            opacity: 0;

            transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;

            background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23E5DAC9" fill-opacity="0.15" fill-rule="evenodd"%3E%3Ccircle cx="3" cy="3" r="3"/%3E%3Ccircle cx="13" cy="13" r="3"/%3E%3C/g%3E%3C/svg%3E');

        }

        .fixed-top-content {

            max-width: 1200px;

            margin: 0 auto;

        }

        .search-container {

            display: flex;

            align-items: center;

            width: 100%;

            margin-bottom: 20px;

        }

        .site-title-container {

            position: relative;

            margin-right: 10px;

            margin-bottom: -5px;

        }

        .fixed-top .site-title-container {

            margin-right: 0px;

        }

        .happy-lady-icon {

            position: absolute;

            top: 18px;

            left: -34%;

            width: 50px;

            height: 50px;

        }

        .site-title {

            font-size: 24px;

            font-weight: bold;

            color: var(--secondary-color);

            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);

            font-family: 'Indie Flower', 'Comic Sans MS', cursive, sans-serif;

            white-space: nowrap;

            max-width: 150px; /* Adjust this value as needed */

        }

        .search-wrapper {

            position: relative;

            flex-grow: 1;

            display: flex;

            align-items: center;

        }

        #searchBar, #fixedSearchBar {

            width: 100%;

            padding: 15px;

            padding-right: 40px;

            border: 2px solid var(--secondary-color);

            border-radius: 10px;

            font-size: 18px;

        }

        .clear-search {

            position: absolute;

            right: 15px;

            background: none;

            border: none;

            font-size: 20px;

            color: var(--secondary-color);

            cursor: pointer;

            display: none;

            padding: 0;

            margin: 0;

            line-height: 1;

        }

        .filter-container {

            display: flex;

            justify-content: center;

            align-items: center;

            flex-wrap: wrap;

        }

        #surpriseMe, #fixedSurpriseMe, .surprise-mobile {

            width: 150px;

            padding: 10px;

            margin-right: 20px;

            background-color: var(--primary-color);

            color: var(--secondary-color);

            border: none;

            border-radius: 10px;

            font-size: 16px;

            cursor: pointer;

            transition: background-color 0.3s ease, color 0.3s ease;

            font-weight: bold;

        }

        #surpriseMe:hover, #fixedSurpriseMe:hover, .surprise-mobile:hover {

            background-color: var(--secondary-color);

            color: var(--primary-color);

        }

        .filter-buttons {

            display: flex;

            flex-wrap: wrap;

            gap: 10px;

        }

        .filter-button {

            padding: 8px 15px;

            background-color: var(--primary-color);

            color: var(--text-color);

            border: 1px solid var(--secondary-color);

            border-radius: 20px;

            font-size: 14px;

            cursor: pointer;

            transition: all 0.3s ease;

        }

        .grid {

            display: grid;

            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));

            gap: 20px;

            padding-top: 20px;

        }

        .tile {

            background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5));

            border: 2px solid var(--primary-color);

            border-radius: 15px;

            overflow: hidden;

            transition: transform 0.3s ease, box-shadow 0.3s ease;

            cursor: pointer;

        }

        .tile:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 20px rgba(0,0,0,0.1);

        }

        .tile img {

            width: 100%;

            height: 300px;

            object-fit: cover;

        }

        .tile h3 {

            margin: 20px;

            font-size: 20px;

            color: var(--text-color);

            text-align: center;

        }

        .modal {

            display: none;

            position: fixed;

            z-index: 1001;

            left: 0;

            top: 0;

            width: 100%;

            height: 100%;

            overflow: auto;

            background-color: rgba(0,0,0,0.6);

        }

        .modal-content {

            background-color: var(--background-color);

            background-image: url('data:image/svg+xml,%3Csvg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="%23E5DAC9" fill-opacity="0.15" fill-rule="evenodd"%3E%3Ccircle cx="3" cy="3" r="3"/%3E%3Ccircle cx="13" cy="13" r="3"/%3E%3C/g%3E%3C/svg%3E');

            margin: 5% auto;

            padding: 0;

            border: 2px solid var(--secondary-color);

            border-radius: 15px;

            width: 90%;

            max-width: 900px;

            max-height: 90vh;

            overflow-y: auto;

            position: relative;

            display: flex;

            flex-direction: column;

        }

        .modal-content h2 {

            background-color: var(--primary-color);

            color: var(--secondary-color);

            padding: 15px 40px 15px 15px;

            margin: 0;

            text-align: center;

            width: 100%;

            box-sizing: border-box;

        }

        .modal-inner-content {

            padding: 20px;

            overflow-y: auto;

            flex-grow: 1;

        }

        .close {

            color: var(--secondary-color);

            position: absolute;

            top: 10px;

            right: 20px;

            font-size: 36px;

            font-weight: bold;

            cursor: pointer;

            z-index: 1;

        }

        .close:hover {

            color: white;

        }

        #recipeImage {

            width: 100%;

            max-height: 500px;

            object-fit: cover;

            border-radius: 15px;

            margin-bottom: 30px;

            box-shadow: 0 5px 15px rgba(0,0,0,0.1);

        }

        #recipeDetails h3 {

            color: var(--secondary-color);

            margin-top: 30px;

            font-size: 24px;

        }

        #recipeDetails ul, #recipeDetails ol, #recipeDetails p {

            background-color: var(--primary-color);

            padding: 20px 40px;

            border-radius: 10px;

        }



        #recipeDetails ol li {

            margin-bottom: 10px;

        }

        .modal-buttons {

            display: flex;

            justify-content: center;

            gap: 20px;

            margin-top: 30px;

        }

        #recipeLink, #printRecipe, #sendToSelf {

            display: inline-block;

            padding: 15px 20px;

            background-color: var(--primary-color);

            color: var(--secondary-color);

            text-decoration: none;

            border-radius: 10px;

            text-align: center;

            font-size: 18px;

            transition: background-color 0.3s ease;

            border: none;

            cursor: pointer;

            font-weight: bold;

        }

        #recipeLink:hover, #printRecipe:hover, #sendToSelf:hover {

            background-color: var(--secondary-color);

            color: var(--primary-color);

        }

        .footer {

            position: fixed;

            bottom: 0;

            left: 0;

            right: 0;

            background-color: var(--primary-color);

            color: black;

            text-align: center;

            padding: 5px 10px;

            font-size: 16px;

            box-shadow: 0 -2px 10px rgba(0,0,0,0.1);

        }

        .footer a {

            color: black;

            text-decoration: none;

        }

        .footer a span {
            color: var(--secondary-color);
            font-weight: bold;
        }

        .print-only {

    display: none;

}



@media print {

    .modal-content {

        display: none !important;

    }

    

    .print-only {

        display: block !important;

        padding: 20mm;

        max-width: 100%;

    }

    

    .print-only h1 {

        font-size: 24px;

        color: #000;

        margin-bottom: 20px;

        text-align: center;

    }

    

    .print-only h3 {

        font-size: 18px;

        color: #000;

        margin: 15px 0 10px;

        page-break-after: avoid;

    }

    

    .print-only ul,

    .print-only ol {

        margin: 10px 0;

        padding: 0 20px;

        page-break-inside: avoid;

    }

    

    .print-only li {

        margin-bottom: 8px;

        line-height: 1.4;

    }

    

    @page {

        margin: 15mm;

        size: auto;

    }

}

        @media (max-width: 768px) {

            body {

                padding-top: 20px;

            }

            .container {

                padding: 10px;

            }

            .top-section, .fixed-top {

                padding: 15px;

                width: 100%;

                max-width: 100%;

                box-sizing: border-box;

            }

            .search-container, .filter-container {

                flex-direction: column;

                align-items: stretch;

            }

            .site-title-container {

                display: flex;

                flex-direction: column;

                align-items: center;

                margin-bottom: -10px;

            }

            .happy-lady-icon {

                width: 60px;

                height: 60px;

                position: static;

                margin-bottom: -10px;

            }

            .site-title {

                font-size: 24px;

                text-align: center;

            }

            .search-wrapper {

                width: 100%;

            }

            #searchBar, #fixedSearchBar {

                width: 100%;

                box-sizing: border-box;

            }

            .surprise-mobile {

                display: block;

                width: 100%;

                margin-top: 10px;

                margin-bottom: 15px;

            }

            .not-mobile {

                display: none !important;

            }

            .filter-container {

                margin-top: 5px;

            }

            .top-section .filter-container {

                margin-top: 15px;

            }

            .grid {

                grid-template-columns: 1fr;

            }

            .tile {

                margin-bottom: 20px;

            }

            .tile img {

                height: 200px;

            }

            .tile h3 {

                font-size: 18px;

            }

            .modal {

                padding: 0;

                overflow: hidden;

            }

            .modal-content {

                width: 100%;

                height: 100%;

                margin: 0;

                border-radius: 0;

                max-height: none;

            }

            .modal-content h2 {

                position: sticky;

                top: 0;

                z-index: 1;

            }

            #recipeImage {

                max-height: 40vh;

                margin-top: 20px;

            }

            #recipeDetails h3 {

                font-size: 20px;

            }

            #recipeDetails ul, #recipeDetails ol {

                padding: 15px 30px;

            }

            .modal-buttons {

                flex-direction: column;

                align-items: center;

            }

            #recipeLink, #printRecipe, #sendToSelf {

                width: 100%;

                max-width: 250px;

                font-size: 16px;

                

            }

            .close {

                top: 15px;

                right: 15px;

                z-index: 2;

            }

            body.modal-open {

                overflow: hidden;

            }

            .top-section {

                margin-top: 10px;

            }

            .footer a span {
                display: block;
            }

        }



        @media (max-width: 480px) {

            .happy-lady-icon {

                width: 50px;

                height: 50px;

            }

            .site-title {

                font-size: 20px;

            }

            .filter-button {

                font-size: 11px;

                padding: 5px 10px;

            }

        }



        .fixed-top {

            transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;

        }



        .fixed-top .search-container {

            align-items: center;

            gap: 11px;

        }



        .fixed-top .site-title-container {

            display: flex;

            align-items: center;

            margin-bottom: 0;

        }



        .fixed-top .happy-lady-icon {

            width: 40px;

            height: 40px;

            position: static;

            margin-right: 0;

            transform: none;

            margin-bottom: -10px;

            margin-left: 0;

        }



        .fixed-top .site-title {

            font-size: 20px;

            margin: 0;

        }



        .surprise-mobile {

            display: none;

            width: 100%;

            margin-top: 10px;

            margin-bottom: 15px;

            font-weight: bold;

        }



        @media (max-width: 768px) {

            .surprise-mobile {

                display: block;

            }



            .not-mobile {

                display: none !important;

            }



            .search-container {

                flex-direction: column;

                align-items: stretch;

            }



            .search-wrapper {

                width: 100%;

            }



            #searchBar, #fixedSearchBar {

                width: 100%;

                box-sizing: border-box;

            }



            .fixed-top .filter-buttons {

                display: flex;

                flex-wrap: wrap;

                justify-content: center;

                gap: 5px;

            }



            .close {

                top: 15px;

                right: 15px;

                z-index: 2;

            }



            #recipeLink, #printRecipe, #sendToSelf {

                width: 200px;

                max-width: 100%;

                font-size: 16px;

                padding: 15px 0;

            }



            .surprise-mobile {

                width: 100%;

                padding: 10px;

                background-color: var(--primary-color);

                color: var(--secondary-color);

                border: none;

                border-radius: 10px;

                font-size: 16px;

                cursor: pointer;

                transition: background-color 0.3s ease, color 0.3s ease;

                margin: 10px auto;

                display: block;

            }



            .filter-container {

                justify-content: center;

            }



            .filter-buttons {

                justify-content: center;

            }



            .fixed-top .filter-container,

            .fixed-top .filter-buttons {

                justify-content: center;

            }



            .fixed-top {

                padding: 10px;

            }



            .fixed-top .search-container {

                flex-direction: row;

                align-items: center;

                gap: 10px;

                margin-bottom: 0px;

            }



            .fixed-top .site-title-container {

                display: flex;

                flex-direction: row;

                align-items: center;

                margin-bottom: 0;

            }



            .fixed-top .happy-lady-icon {

                width: 30px;

                height: 30px;

                position: static;

                margin-right: 5px;

                margin-bottom: 0;

            }



            .fixed-top .site-title {

                font-size: 18px;

                margin: 0;

            }



            .fixed-top #fixedSearchBar {

                padding: 8px;

                font-size: 14px;

            }



            .fixed-top .surprise-mobile {

                font-size: 14px;

                padding: 8px;

                margin: 5px 0;

            }

        }



        .mobile-only {

            display: none;

        }



        @media (max-width: 768px) {

            .mobile-only {

                display: block;

            }



            .filter-buttons .surprise-me-button {

                padding: 8px 15px;

                font-weight: bold;

                background-color: var(--primary-color);

                color: var(--text-color);

                border: 1px solid var(--secondary-color);

                border-radius: 20px;

                font-size: 14px;

                cursor: pointer;

                transition: all 0.3s ease;

            }



            .filter-buttons .surprise-me-button:hover {

                background-color: var(--secondary-color);

                color: var(--primary-color);

            }

        }



        @media (min-width: 769px) {

            .mobile-only {

                display: none !important;

            }

        }



        #emailReminderForm {

            margin-top: 20px;

            padding: 20px;

            background-color: var(--primary-color);

            border-radius: 10px;

            max-width: 400px;

            margin-left: auto;

            margin-right: auto;

        }



        #emailReminderForm h3 {

            margin-top: 0;

            color: var(--secondary-color);

            text-align: center;

        }



        #reminderForm {

            display: flex;

            flex-direction: column;

            gap: 15px;

        }



        #reminderForm input,

        #reminderForm select {

            padding: 12px;

            border: 1px solid var(--secondary-color);

            border-radius: 5px;

            font-size: 16px;

            width: 100%;

            box-sizing: border-box;

        }



        #reminderForm button {

            padding: 12px;

            background-color: var(--secondary-color);

            color: var(--primary-color);

            border: none;

            border-radius: 5px;

            font-size: 16px;

            cursor: pointer;

            transition: background-color 0.3s ease;

            width: 100%;

        }



        #reminderForm button:hover {

            background-color: var(--text-color);

        }



        .reminder-note {

            margin-top: 10px;

            text-align: center;

            color: var(--secondary-color);

            font-style: italic;

        }



        @media (max-width: 768px) {

            #emailReminderForm {

                padding: 15px;

            }



            #reminderForm input,

            #reminderForm select,

            #reminderForm button {

                font-size: 14px;

                padding: 10px;

            }



            .reminder-note {

                font-size: 12px;

            }

        }



        .spinner {

            border: 4px solid #f3f3f3;

            border-top: 4px solid var(--secondary-color);

            border-radius: 50%;

            width: 40px;

            height: 40px;

            animation: spin 1s linear infinite;

            margin: 20px auto;

        }



        @keyframes spin {

            0% { transform: rotate(0deg); }

            100% { transform: rotate(360deg); }

        }