html {
    background: rgb(177, 219, 210);
    font-family: cursive;
    background-position: center;
    text-align: center;
}
body {
    margin: auto;
    width: 95%;
}

@media screen and (max-width:480px) {
    h1{
        margin: auto;
        padding: auto;
        font-size: 2em;
        color: rgb(60, 65, 61);
        border-radius:20px;
    }
    #logo{
        width: 40%;
        height: auto;
    }
    .top {
        display: grid;
        grid-template-columns:  1fr;
        background-image: url(../rouges.jpg);
        background-size:cover;
        background-repeat: no-repeat;
    }
    .button {
        font-size: 1.5em;
        border-radius:20px;
        display: inline-block;
        margin: 20px;
        padding: 10px;
        vertical-align: middle;
        overflow: hidden;
        text-decoration: none;
        color: rgb(63, 2, 68);
        background-color: rgb(233, 227, 233);
        text-align: center;
        cursor: pointer;
        white-space: nowrap
    }
    #show {
        display: none;
    }
    
    #show:target {
        background: rgb(219, 248, 228);
        display: block;
    }
    
    #hide:target {
        display: none;
    }
    
    #show1 {
        display: none;
    }
    
    #show1:target {
        background: rgb(215, 253, 227);
        display: block;
    }
    
    #hide1:target {
        display: none;
    }
    
    p {
        font-size: 1em;
        margin: auto;
        padding: auto;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.2;
        text-align: left
    }
    a {
        text-decoration: none;
    }
    .producteur {
        width: 50%;
        margin: 10px;
        float: left;
    }
    .producteurs {
        font-size: 0.5 em;
        display: grid;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
        grid-template-columns: 1fr;
    }
    .recettes {
        width: 100%; 
        float: left;
    }

    .lesrecettes {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 5px;
        grid-row-gap: 5px;
    }
    iframe{
        width: 100%;
        height:100%;
       }
}

@media screen and (min-width:480px) and (max-width:960px) {
    h1{
        margin: auto;
        padding: auto;
        font-size: 2em;
        color: rgb(60, 65, 61);
        border-radius:20px;
    }
    #logo{
        width: 40%;
        height: auto;
    }
    .top {
        display: grid;
        grid-template-columns: 1fr;
        background-image: url(../rouges.jpg);
        background-size:cover;
        background-repeat: no-repeat;
    }
    .button {
        font-size: 1.5em;
        border-radius:20px;
        display: inline-block;
        margin: 20px;
        padding: 10px;
        vertical-align: middle;
        overflow: hidden;
        text-decoration: none;
        color: rgb(63, 2, 68);
        background-color: rgb(233, 227, 233);
        text-align: center;
        cursor: pointer;
        white-space: nowrap
    }
    #show {
        display: none;
    }
    
    #show:target {
        background: rgb(219, 248, 228);
        display: block;
    }
    
    #hide:target {
        display: none;
    }
    
    #show1 {
        display: none;
    }
    
    #show1:target {
        background: rgb(215, 253, 227);
        display: block;
    }
    
    #hide1:target {
        display: none;
    }
    
    p {
        font-size: 1.3em;
        margin: auto;
        padding: auto;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.2;
        text-align: left
    }
    a {
        text-decoration: none;
    }
    .producteur {
        width: 50%;
        margin: 10px;
        float: left;
    }
    .producteurs {
        font-size: 0.5 em;
        display: grid;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
        grid-template-columns: 1fr;
    }
    .recettes {
        width: 100%;
        float: left;
    }

    .lesrecettes {
        display: grid;
        grid-template-columns: 1fr;
        grid-column-gap: 10px;
        grid-row-gap: 10px;
    }
    iframe{
        width: 100%;
        height:100%;
       }
}

@media screen and (min-width:960px) {
    h1{
        margin: auto;
        padding: auto;
        font-size: 5em;
        color: rgb(60, 65, 61);
        border-radius:30px;
    }
    #logo{
        width: 60%;
        height: auto;
    }
    .top {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        background-image: url(../rouges.jpg);
        background-size:cover;
        background-repeat: no-repeat;
    }
    .button {
        font-size: 1.5em;
        border-radius:20px;
        display: inline-block;
        margin: 20px;
        padding: 10px;
        vertical-align: middle;
        overflow: hidden;
        text-decoration: none;
        color: rgb(63, 2, 68);
        background-color: rgb(233, 227, 233);
        text-align: center;
        cursor: pointer;
        white-space: nowrap
    }
    #show {
        display: none;
    }
    
    #show:target {
        background: rgb(219, 248, 228);
        display: block;
    }
    
    #hide:target {
        display: none;
    }
    
    #show1 {
        display: none;
    }
    
    #show1:target {
        background: rgb(215, 253, 227);
        display: block;
    }
    
    #hide1:target {
        display: none;
    }
    
    p {
        font-size: 1.3em;
        margin: auto;
        padding: auto;
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.2;
        text-align: left
    }
    a {
        text-decoration: none;
    }
    .producteur {
        width: 50%;
        margin: 10px;
        float: left;
    }
    .producteurs {
        font-size: 0.5 em;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
        }  
    .recettes {
        width: 100%;
        float: left;
    }

    .lesrecettes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-column-gap: 20px;
        grid-row-gap: 20px;
    }
}