:root {
    --sage: #ecf3f0;
    --orange: #ff7e5f;
    --dark: #2d3436;
}

body { 
    background: var(--sage); 
    color: var(--dark); 
    font-family: 'Poppins', sans-serif; 
    overflow-x: hidden; }

.organic-blob {
    position: absolute; 
    top: -10%; 
    right: -5%;
    width: 400px; 
    height: 400px;
    background: #feb47b; 
    filter: blur(100px); 
    opacity: 0.3; 
    z-index: -1;

}


.brand {
    font-size: 2rem; 
    font-weight: 800; 
    letter-spacing: -1px; }


.text-orange { color: var(--orange); }

.search-container {
    max-width: 600px; 
    background: white; 
    padding: 8px;
    border-radius: 50px; 
    display: flex; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);

}

.search-container input { flex: 1; 
    border: none; 
    padding: 0 20px; 
    outline: none; 
    border-radius: 50px; }

.search-container button {
    background: var(--dark); 
    color: white; 
    border: none;
    padding: 10px 25px; 
    border-radius: 50px; 
    transition: 0.3s;
}

.ing-tag {
    background: white;
    padding: 5px 15px; 
    border-radius: 50px;
    margin: 5px; 
    border: 1px solid #ddd;
    font-size: 0.9rem;
}

.recipe-card {
    border: none; border-radius: 25px;
    overflow: hidden;
    transition: 0.4s;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    cursor: pointer;
}

.recipe-card:hover {
     transform: translateY(-10px);
     box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

.btn-cook {
    background: var(--orange); 
    color: white;
    border: none;
    padding: 15px 40px; border-radius: 50px; font-weight: bold;
}

#Dby {
    text-align: center;

    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--dark);
    position: relative;

}
#Dby a {
    color: var(--dark);
    text-decoration: none;
}
#Dby a:hover {
    text-decoration: underline;
}


footer {
    margin-top: 300px;
    margin-bottom: 20px;
}