/* Entire page */

body{

    margin:0;

    background:#111;

    color:white;

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

}

/* Header */

.page-header{

    width:90%;

    max-width:1400px;

    margin:30px auto;

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.back-button{

    color:white;

    text-decoration:none;

    font-size:1.2rem;

}

.back-button:hover{

    text-decoration:underline;

}

/* Hero */

.hero{

    width:90%;

    max-width:1400px;

    margin:auto;

    text-align:center;

}

.hero h2{

    font-size:2.5rem;

    margin-bottom:20px;

}

/* Search */

.search-bar{

    width:100%;

    max-width:500px;

    padding:15px;

    border:none;

    border-radius:30px;

    font-size:1rem;

}

/* Tags */

.tags{

    width:90%;

    max-width:1400px;

    margin:30px auto;

    display:flex;

    justify-content:center;

    gap:15px;

    flex-wrap:wrap;

}

.tags button{

    background:#d9e7f4;

    border:none;

    padding:12px 20px;

    border-radius:20px;

    cursor:pointer;

    font-size:1rem;

}

.tags button:hover{

    background:white;

}

/* Recipe Grid */

.recipe-grid{

    width:90%;

    max-width:1400px;

    margin:40px auto;

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}

/* Individual Card */

.recipe-card{

    background:#d9e7f4;

    border-radius:20px;

    overflow:hidden;

    text-decoration:none;

    color:black;

    transition:transform .3s ease;

}

.recipe-card:hover{

    transform:scale(1.03);

}

/* Recipe Image */

.recipe-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}

/* Recipe Information */

.recipe-info{

    padding:20px;

}

.recipe-info h3{

    margin:0;

}

.recipe-info p{

    margin-top:10px;

    color:#555;

}