#food {
    display: flex;
    justify-content: center;

    width: 0%;
    height: 100%;

    
    background: rgba(255, 255, 255, 0);

    border-radius: 12px;

     overflow: overlay; 
    /* overflow-clip-margin: 1em; */

    transition: width 2s cubic-bezier(.17,.98,.01,.92);

    --var_space_box : 5px; 
}

#cont_food {
    z-index: 9; 
    display: none;
    flex-direction: column;
    align-items: center;
    border-radius: 12px;
    box-shadow: rgb(71, 173, 79) 6px var(--var_space_box) 0px 2px inset;
    background-color: #42382B;
    min-width: 50%;
    height: 100%;
    
}
#cont_food div[data-number="1"]:first-child {
    padding-top : var(--var_space_box);
}

.box_food {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: url('/sprit/cursor_pointer.svg'), no-drop;
    transition: border-radius 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                background 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    width: 80%;

}

/*.box_country img:first-child {
    padding-right: 1em;
}
.box_country img:last-child {
    padding-right: 0%;
}*/
.box_country img {
    width: 5vw;
}
.box_name {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    /*background: red;*/
    padding-inline: 10% ;
    max-width: 40%;
    clip-path: view-box;
    overflow: hidden;
    font-family: 'Playpen Sans';    
    font-size: 1.7em;

    transition: color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.box_name a{
    text-decoration: none;
    color: #faf9f1;
    text-align: center;
    text-overflow: ellipsis;
    transition: color 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275),
                transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    
}
.box_name:hover{
    transform: rotate(-10deg) scale(1.5);
    a {
        color: #35caf7 !important;
    }
}

.box_country {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.box_detaille img {
    width: 2em;
}
.box_food:hover {
    background: rgba(182, 182, 182, 0.537);
    border-radius: 12px;
}

.box_country:hover {
    transform: scale(1.2);
}



@media screen and (max-width: 810px) {
    #food {
        width: 90% !important;
        padding-inline: 0%;
        padding-top: 5vw;
        padding-bottom: 5vw;
    }
    #cont_food {
        width: 100%;
        box-shadow: rgb(71, 173, 79) 6px 5px 0px 2px inset;
        justify-content: space-between;
    }
    .box_food {
        justify-content: space-around;
        width: 80%;
    }
    /*.box_name {
        padding-inline: 3vw;
    }*/
    .box_name a {
        font-size: 0.6em;
    }
    .box_country img {
        width: 9vw;
    }


    
}