:root {
    --lightgreen: #5a7d7c;
    --lightblue: #e8eef2;
    --timber: #d6c9c9;
    --gunmetal: #232c33;

    --serif: "Merriweather",
        serif;
    --sans: "Montserrat",
        sans-serif
}

header {
    background-color: var(--gunmetal);
}

header #name h1 {
    width: 60%;
    padding: .25rem;
}

header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ham-menu {
    display: none;
}

header .off-screen {
    right: 0;
    position: static;
    width: 60%;
    max-width: none;
    max-height: 4rem;
    transition: none;
    background-color: var(--gunmetal);
    padding: 1rem;
    z-index: 0;
}

.footer {
    display: none;
}

body footer {
    display: flex;
    flex-direction: column;
    background-color: var(--lightgreen);
    justify-content: center;
    padding-right: .5rem;
    align-items: end;
    gap: 0;
}

header .off-screen ul {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    margin-top: 0;
    align-content: center;
}

.off-screen ul li:hover {

    text-shadow: 3px 3px 10px gold;

}

.recipeCard {
    display: grid;
    grid-template-areas:
        "img title ingT"
        "img link ing"
        "img insT insT"
        "ins ins ins"
    ;

    grid-template-columns: 35% 25% 25%;
    align-items: center;
    justify-content: center;
    justify-items: center;
    text-align: center;
    min-height: none;
    column-gap: 1rem;
}


.recipeCard .mealImg {
    grid-area: img;
    width: 90%;
    margin: 0 auto;
}

.recipeCard .titleCat {
    grid-area: title;
    font-size: 25px;
}

.recipeCard .instructions h3 {
    grid-area: insT;

}

.recipeCard .ingredients h3 {
    grid-area: ingT;
}

.recipeCard .ingredients {
    grid-area: ing;
}

.recipeCard .instructions {
    grid-area: ins;
    width: 80%;
    font-size: 18px;
}

.recipeCard .ingredients,
.recipeCard .instructions {
    min-height: 15rem;
    border-bottom: none;
    padding: 0 1rem;
}

.ingredients {
    grid-area: ing;
}

.ytLink {
    grid-area: link;
}

.btns .genBtn {
    left: 50%;
    transform: translateX(-50%);
    bottom: 5rem;
}

.btns .genBtn:hover,
.btns .fave:hover,
.recipeCard .ytLink:hover {
    background-color: var(--gunmetal);
    color: var(--lightblue);
}

.btns .fave {
    left: 50%;
    transform: translateX(-50%);
}

.favoritesContainer .ytLink:hover {
    background-color: var(--gunmetal);
    color: var(--lightblue);
}

.CTA {
    grid-area: ins;
}

.container .recMealContainer {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

.container .favoritesContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    box-sizing: content-box;
}