/* Style for all footers */
#indexFooter {
    background-color: rgb(57, 57, 57);
    color: white;
}

/* Style for text pills in index.html */
.textPill {
    background-color: gainsboro;    
    border: 1px solid black;
    font-family: 'Times New Roman', Times, serif;
}

/* Styles to make columns images responsive*/
.columnPicture {
    width: 100%;
    height: 100%;
}

.columnChapiterLeft {
    width: 100%;
    height: 100%;
    clip-path: polygon(0 0, 66.5% 0%, 66.5% 75%, 58% 100%, 0% 100%);
}

.columnChapiterRight {
    width: 100%;
    height: 100%;
    clip-path: polygon(100% 0%, 32% 0%, 32% 75%, 42% 100%, 100% 100%);
}

/* for situations where bootstrap ".d-none" does not work */
@media screen and (max-width: 1200px) {
    .columnPicture {
        display: none;
    }
    .columnChapiterRight {
        display: none;
    }
    .columnChapiterLeft {
        display: none;
    }
    .restName {
        display: none;
    }
    .colFoundations {
        display: none;
    }
}

/* Styles for floating main menu */
.menuRow {
    color: rgb(94, 94, 94);
    font-family: 'Times New Roman', Times, serif;
}

.restName {
    background: linear-gradient(rgb(253, 252, 252), rgb(202, 202, 202));   
    border: 1px solid rgb(163, 163, 163);
    font-weight: bolder;
    letter-spacing: 1em;
}

.menuBar {
    background-color: gainsboro;
    border-bottom: 1px solid rgb(163, 163, 163);
    border-left: 1px solid rgb(163, 163, 163);
    border-right: 1px solid rgb(163, 163, 163);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
}

/* Background for google maps row */
.mapCol {
    height: 25em;
    background-color: gainsboro;
    border: 1px solid rgb(163, 163, 163);
}

/* Style for row on footer */
.colFoundations {
    background-color: rgb(198, 197, 197);
    height: 0.5em;
    border: 1px solid rgb(163, 163, 163);
}

/* styles for the row that contains recipe cards*/
#recipeCards {
    background-color: gainsboro;
    border: 1px solid black;
}

/* styles for recipe cards to adapt content to clip-path in borderCP */
.adaptCP {
    margin: 1px;
    padding: 9%;
}

/* border clip-path */
.borderCP {
    clip-path: url(#borderPath);
}

/* font for restaurantMenu.html */
.menusFont {    
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* background for sections menu in restaurantMenu.html */
.menuSections {
    background-color: gainsboro;
    border: 1px solid black;
    border-radius: 1em;
}

/* A controllable border */
.border1px {    
    border: 1px solid black;
}

/* width to adapt <p> in menu to border in restaurantMenu.html
Had I used a bootstrap card, it'd be unnecessary */
.widthHack {
    width: 100%;
}

/* themes for each category of dish */
.themePizza {
    background-color: rgb(254, 221, 180);
}

.themePasta {
    background-color: rgb(255, 239, 209);
}

.themeMeat {
    background-color: rgb(251, 200, 172);
}

.themeFish {
    background-color: rgb(203, 237, 251);
}

.themeDesserts {
    background-color: rgb(248, 222, 252);
}

.themeDrinks {
    background-color: rgb(255, 172, 172);
}

.themeStarters {
    background-color: rgb(214, 255, 185);
}