:root {
    --color1: #dfae45;
    --color2: #DD7835;
    --color3: rgb(84, 175, 84);


    --colorPates: rgb(235, 219, 78); 
    --colorDivers: rgb(180, 116, 56); 
    --colorSalade: rgb(91, 194, 60); 
    --colorVolaille: rgb(235, 185, 78); 
    --colorBoeuf: rgb(197, 70, 61); 
    --colorPoisson: rgb(78, 146, 235); 
}

h1 {
    background: var(--color2);
    display: inline;
    padding: 8px 22px;
}

a {
    text-decoration: none;
    color:rgb(187, 149, 53);
}

h1.menu {
    margin-left: 5px;
    padding: 8px 22px;
    color: white;
    box-shadow: 1px 1px 0px 0px rgb(105, 103, 103);
}

h1.menu_2 {
    margin-left: 5px;
    padding: 8px 22px;
    color: white;
    box-shadow: 1px 1px 0px 0px rgb(105, 103, 103);
}

h1.pates {
    background: var(--colorPates);
    text-shadow: 1px 1px black;
}

h1.divers {
    background: var(--colorDivers);
    text-shadow: 1px 1px black;
}

h1.salade {
    background: var(--colorSalade);
    text-shadow: 1px 1px black;
}

h1.volaille {
    background: var(--colorVolaille);
    text-shadow: 1px 1px black;
}

h1.boeuf {
    background: var(--colorBoeuf);
    text-shadow: 1px 1px black;
}

h1.poisson {
    background: var(--colorPoisson);
    text-shadow: 1px 1px black;
}

.col-portfolio {
    width: 47%;
    max-width: 420px;
}

.col-portfolio2 {
    width: 47%;
    padding-left: 10px;
    display: inline-block;
}

img.shadow {
    box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.3);
}

body {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url("../IMG/fond.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: white;
    margin: 10px;
    font-family: Arial;
}

body.footer {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("../IMG/fond.jpg") no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: white;
    margin: 0px;
    font-family: Arial;
}

.small_logo {
    margin-top: 25px;
    margin-left: 35px;
    margin-bottom: 0px;
    width: 80%;
    height: 80%;
}

.site_title {
    color: var(--color2);
    font-weight: bold;
    font-size: 65px;
    text-shadow: 2px 2px var(--color1);
    margin-top: -65px;
    margin-bottom: 0px;
    position: relative;
    top: -150px;
    width: 100%;
    text-align: center;
}

.site_title_small {
    color: var(--color1);
    font-weight: bold;
    font-size: 25px;
    text-shadow: 2px 2px var(--color2);
    margin-top: -65px;
    margin-bottom: 0px;
    position: relative;
    top: -150px;
    width: 100%;
    text-align: center;
}

.small_images {
    width: 200px;
    height: 150px;
    position: relative;
    left: 50%;
    transform: translate(-30%, -100px);
}

.menu_list_title {
    font-weight: bold;
    font-size: 25px;
    width: 450px;
    display: inline-block;
    margin-bottom: -10px;
    margin-top: 0px;
}

.menu_list_prix {
    font-weight: normal;
    color: var(--color2);
    font-size: 15px;
    margin-left: 8px;
    text-align: right;
    display: inline-block;
    width: 70px;
}

.menu_list_ingredients {
    color: #C8C8C8;
    font-size: 15px;
    margin-top: 0px;
    display: block;
    width: 600px;
    font-style: italic;
}

.menu_list_legume {
    background: var(--color3);
    color: white;
    display: inline-block;
    font-size: 25px;
    border-radius: 8px;
    padding: 3px 8px;
    margin-top: 4px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 5px;
}
.menu_list_viande {
    background: var(--color2);
    color: white;
    display: inline-block;
    font-size: 25px;
    border-radius: 8px;
    padding: 3px 8px;
    margin-top: 4px;
    font-weight: bold;
    margin-bottom: 0px;
    margin-top: 5px;
}

.heart {
    color: red;
}

iframe {
    width: 90%;
    margin-left: 0%;
    border: none;
    height: 150px;
    background-color: lightgray;
}

div.footer {
    text-align: center; 
    margin-bottom: -10px; 
    font-size: 10px;
    margin: 0px 0px;
    padding: 0px 0px;
    height: 20px;
}

/* for mobile phone */
@media only screen and (max-width: 1263px) {  
    .menu_list_ingredients {
        font-size: 10px;
        width: 250px;
    }
}

/* for mobile phone */
@media only screen and (max-width: 767px) {  
    .small_logo {
        margin-left: 100px;
        width: 100%;
        height: 100%;
    }

    .site_title {
        font-size: 40px;
    }
    
    .site_title_small {
        font-size: 25px;
    }
    
    .small_images {
        left: 30%;
        transform: translate(90%, -80px);
    }

    .menu_list_title {
        font-size: 25px;
        width: 300px;
    }
    
    .menu_list_ingredients {
        font-size: 14px;
        width: 350px;
    }
}
/* iphone 13 */
@media only screen and (max-width: 390px) { 
    body {
        margin: 10px;
        font-family: Arial;
        width: 300px;
    }
    
    .small_images {
        width: 125px;
        height: 85px;
        left: 45%;
        transform: translate(90%, -80px);
    }

    .menu_list_title {
        font-size: 18px;
        width: 300px;
    }
    
    .menu_list_ingredients {
        font-size: 12px;
        width: 230px;
    }

    .small_logo {
        margin-left: 25px;
        margin-top: 1px;
        width: 110%;
        height: 75%;
    }

    .site_title {
        font-size: 25px;
        top: 10px;
        width: 300px;
        left: 5%;
    }
    
    .site_title_small {
        font-size: 15px;
        top: 10px;
        left: 15%;
        width: 250px;
    }

    h1.menu {
        margin-left: 5px;
        padding: 8px 22px;
        font-size: 20px;
    }
    
    h1.menu_2 {
        margin-left: 5px;
        padding: 8px 22px;
        font-size: 20px;
    }

    .menu_list_title {
        font-size: 18px;
        width: 240px;
    }
    
    .menu_list_ingredients {
        font-size: 12px;
        width: 240px;
    }

    .menu_list_legume {
        font-size: 18px;
    }
}

/* iphone 11 Pro */
@media only screen and (max-width: 375px) { 
    .small_logo {
        margin-left: 25px;
        margin-top: 1px;
        width: 100%;
        height: 70%;
    }

    .site_title {
        font-size: 20px;
        top: 10px;
        width: 250px;
        left: 10%;
    }
    
    .site_title_small {
        font-size: 10px;
        top: 10px;
        left: 20%;
        width: 200px;
    }

    h1.menu {
        margin-left: 5px;
        padding: 8px 22px;
        font-size: 20px;
    }
    
    h1.menu_2 {
        margin-left: 5px;
        padding: 8px 22px;
        font-size: 20px;
    }

    iframe {
        width: 90%;
        margin-left: 10%;
    }

    .menu_list_title {
        font-size: 18px;
        width: 230px;
    }
    
    .menu_list_ingredients {
        font-size: 12px;
        width: 230px;
    }

    .menu_list_legume {
        font-size: 18px;
    }
}
@media only screen and (max-width: 360px) {
    .small_logo {
        margin-left: 1px;
        margin-top: 1px;
        width: 118%;
        height: 118%;
    }
}

@media only screen and (max-width: 280px) {
    .small_logo {
        margin-left: -1px;
        width: 118%;
        height: 118%;
    }

    .small_images {
        left: 38%;
    }
}