style.css

/* Custom styles that can't be achieved with Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Poppins', sans-serif;
}

.hero {
    background-image: radial-gradient(circle at 10% 20%, rgba(255, 237, 188, 0.7) 0%, rgba(254, 215, 165, 0.7) 90%);
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}
/* Custom animation for recipe cards */
.recipe-card:hover {
    transform: translateY(-5px);
    transition: transform 0.3s ease;
}

/* Kitchen Visualizer Styles */
#kitchen-container {
    background-image: linear-gradient(45deg, #f5f5f5 25%, transparent 25%),
                      linear-gradient(-45deg, #f5f5f5 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #f5f5f5 75%),
                      linear-gradient(-45deg, transparent 75%, #f5f5f5 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

.layout-btn, .color-btn, .material-btn, .appliance-btn {
    transition: all 0.2s ease;
}

.layout-btn:hover, .appliance-btn:hover {
    transform: scale(1.05);
}

.color-btn:hover, .material-btn:hover {
    transform: scale(1.1);
}

[data-element] {
    transition: background-color 0.3s ease;
}
/* Custom tooltip for kitchen tools */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}