/* ------ MAIN ------ */

main {
    padding:0vw 3vw;
    margin-bottom:7vh;
}

h1 {
    font-family: var(--title);
    font-size: 2.2em;
    color:var(--accent);
    text-align:center;
    margin:0;
    margin-top:6vh;
}

h1+p {
    font-size: 1em;
    text-align:center;
    margin-bottom:5vh;
}

#recipes {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}

.recipe-card {
    border:1px solid var(--secondary);
    width:24vw;
    margin-bottom:5vh;
    margin-right:3vw;
    box-shadow: 2px 2px 10px 0px rgba(255, 255, 255, 0.5);
    transition: .3s ease-in;
}

.recipe-card:hover {
    box-shadow: 0px 0px 20px 0px rgba(255, 255, 255, 0.9);
}

.recipe-card:nth-of-type(odd){
    transform: rotate(-1deg);
}

.recipe-card:nth-of-type(even){
    transform: rotate(1deg);
}

.recipe-card:nth-of-type(odd):hover {
    transform: rotate(-1.5deg);
}

.recipe-card:nth-of-type(even):hover {
    transform: rotate(1.5deg);
}

.recipe-card:hover img {
    filter: grayscale(50%);
}

.recipe-card:hover h2 {
    filter:brightness(1.3);
}

h2 {
    color:var(--accent);
    font-family:var(--title);
    font-size: 1.7em;
    text-align: center;
    transition:.3s ease-in;
}

img {
    width:100%;
    height: 30vh;
    object-fit: cover;
    border:2px double var(--secondary);
    border-width:8px 0;
    filter: grayscale(100%);
    transition: .3s ease-in;
}

.recipe-card li, p {
    font-size: 0.8em;
    letter-spacing: 0.1em;
    line-height: 1.5em;
}

p {
    padding:0 2vw 3vh 2vw;
}

/* ------ MOBILE ------ */
@media screen and (max-width: 650px) {
    h1 {
        font-size: 1.6em;
    }

    h1+p {
        font-size: 0.9em;
        width:75vw;
        margin:2vh auto;
    }

    .recipe-card {
        width:70vw;
        margin-bottom:5vh;
        margin-right:0vw;
    }

    img {
        height: 25vh;
    }

    p {
        padding:0 4vw 3vh 6vw;
    }
  }