/*    MENU    */
body {
    background-color: #f5f5dc;
    /*background-color: #f1f19c !important;*/
    /*background-color: #fafada !important;*/
}


/*    BOARD    */
.board {
    --board-border: #cece8b;
    padding: 1.2rem;
    border-radius: .45rem;
    /*border-radius: .85rem;*/
    /*box-shadow: inset 5px -6px var(--bs-sienna-brown), -5px 0px 9px 0px #aaaaaa;*/
    /*box-shadow: inset 5px -6px var(--board-shadow), -5px 0px 9px 0px #aaaaaa;*/
    border: 2px solid var(--board-border);
    /*border: 2px solid var(--bs-sienna-brown);*/
    /*border: 2px solid var(--board-shadow);*/
    margin: 10px;
    position: relative;
    transition: .2s ease-in;
}
/*.board-skew {
    transform: skewX(2deg);
}*/


.Cream-board-shadow {
    --board-shadow: var(--bs-sienna-brown);
}

.White2-board-shadow {
    --board-shadow: var(--bs-tobacco-brown);
}

.White-board-shadow {
    --board-shadow: var(--bs-tan-brown);
}

.Brown-board-shadow {
    --board-shadow: var(--bs-maple-brown);
}

.Brown2-board-shadow {
    --board-shadow: var(--bs-maple-brown);
}

.Orange-board-shadow {
    --board-shadow: var(--bs-mocha-brown);
}

.semi-round {
    border-radius: 3rem;
    margin: 20px;
}

.all-rounded {
    padding: 2rem 1rem 1rem 1rem;
    border-radius: 10rem !important;
    min-height: 18rem;
    justify-content: space-around !important;
    align-content: flex-start !important;
    box-shadow: -2px 1px var(--board-shadow) !important;
    overflow: hidden;
}

    .all-rounded > .col-12, .all-rounded > .col-12 > .menu-list {
        border-radius: 4rem !important;
    }

        .all-rounded > .col-12 > .menu-list, .top-rounded > .col-12 > .menu-list {
            padding: 1.5rem !important;
        }


/* BOTTOM */
.rect-bottom::after {
    content: "";
    display: block;
    width: 28vw;
    height: 1rem;
    position: absolute;
    bottom: -1rem;
    background: #ea8e3f;
    border-radius: 0.2rem;
    z-index: -1;
    box-shadow: 0px -5px 5px 4px #c45d04;
    border: 3px solid #ffdcaf;
    border-width: 3px;
    border-radius: 1rem;
}

.circle-handle::after {
    content: "";
    display: block;
    background: linear-gradient(96deg, var(--bs-mahogany-brown), transparent);
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 0px;
    left: 4px;
    border-radius: 5rem;
    border: 2px solid var(--bs-mahogany-brown);
    box-shadow: 0px 0px 1px 2px var(--bs-mahogany-brown);
}

.board-rotate {
    transform: rotate(4deg);
}

    .board-rotate:hover {
        transform: rotate(0deg);
    }

.nut:not(.circle-handle)::before {
    content: "";
    display: block;
    background: linear-gradient(96deg, var(--bs-ebony-brown), transparent);
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 15px;
    left: 15px;
    border-radius: 5rem;
    border: 2px solid var(--bs-ebony-brown);
    box-shadow: -1px 3px 3px var(--bs-ebony-brown);
}

.nut:not(.circle-handle)::after {
    content: "";
    display: block;
    background: linear-gradient(96deg, var(--bs-ebony-brown), transparent);
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: 15px;
    right: 15px;
    border-radius: 5rem;
    border: 2px solid var(--bs-ebony-brown);
    box-shadow: 2px 0px 3px var(--bs-ebony-brown);
}

/*    HANDLES    */
.handle {
    color: var(--bs-dark);
    font-weight: 600;
    font-size: 1.3rem;
    /*font-size: 1rem;*/
    text-transform: uppercase;
    font-family: var(--main-header-font);
}

.rect-handle {
    border-radius: .6rem;
    text-align: center;
    padding: 0.5rem 0.65rem 0.2rem 0.65rem;
    background: var(--body-color);
    border: 1px solid var(--board-shadow);
    box-shadow: inset -5px 3px var(--board-shadow);
}

.circle-handle {
    display: flex;
    align-items: flex-end;
    position: relative;
}

    .circle-handle::before {
        content: '';
        width: 2rem;
        height: 2rem;
        display: block;
        border-radius: 1rem;
        padding: .2rem 0 .45rem 0;
        background: var(--body-color);
        margin-right: 1rem;
        border: 1px solid var(--board-shadow);
        box-shadow: inset -5px 3px var(--board-shadow);
    }

.vertical-handle {
    text-align: center;
    margin-left: 0;
    border-radius: 2rem;
    text-orientation: upright;
    writing-mode: sideways-lr;
    background: var(--body-color);
    border: 1px solid var(--board-shadow);
    box-shadow: inset -5px 3px var(--board-shadow);
    padding: 0.65rem .4rem 0.65rem 0.5rem;
}



/*    MENU LIST   */
.menu-list {
    padding: 0;
    margin: 0;
    list-style-type: none;
    font-size: 1rem;
    --bs-bg-opacity: .5;
    font-size: 1.2rem;
    text-shadow: 0.5px 0.5px 0px var(--bs-mahogany-brown), 0px 1px 0px var(--bs-maple-brown);
    /*text-shadow: 0.5px 0.5px 0px #854b02, 0px 1px 0px #895d10;*/
}

    .menu-list > .borderEnd:nth-child(even) {
        border-width: 0 !important;
    }
    .menu-list > .borderEnd:not(:nth-child(even)) {
        border-right: 2px solid var(--board-border);
        /*border-right: 1px solid var(--bs-sienna-brown) !important;*/
    }


#masonry-grid {
    display: block;
    grid-auto-rows: 10px; /* Adjust based on content */
    margin: 0 auto; /* Centers the entire grid */
}

    #masonry-grid::after {
        content: "";
        display: table;
        clear: both;
    }

.masonry-desserts {
    width: 100%; /* Or a fixed width like 250px */
}

.masonry-item-long {
    max-width: 1000px; /* Default for larger screens */
    margin: 10px;
}

.masonry-item, .masonry-img-item {
    width: 300px; /* Adjust based on your layout */
    margin: 10px;
}

/*.menu-intro {
    margin: 2rem;
    color: #00054b;
    font-size: 2rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    font-family: var(--title-font);
}*/

.masonry-item-long:has(*>.board) .board:hover{
    transform: translateY(-2px);
}
/*.masonry-item:has(*>.board) .board:hover {
    transform: scale(.98);
}*/
/*
@media (max-width: 1400px) {
    .masonry-img-item {
        width: 250px !important;
    }
 }
@media (min-width: 991px) and (max-width: 1300px) {
    .masonry-item {
        width: 300px !important;
    }

    .three-block {
        width: 700px !important;
    }

    .masonry-item-long {
        width: 700px !important;
    }


}*/
@media (min-width: 1200px) and (max-width: 1400px) {
    .masonry-item-long, .three-block {
        width: 850px !important;
    }
        .masonry-item-long:has(.image) {
            width: 850px !important;
        }
    .masonry-item:not(.three-block){
        width: 260px !important;
        margin: 10px 0 !important;
    }

    .semi-round {
        margin: 10px 0 !important;
    }
    .masonry-img-item {
        width: 250px !important;
    }
}
@media (max-width: 1199px) {
    .masonry-item-long, .masonry-item, .masonry-img-item {
        width: 280px !important; /* Reduce width to 300px for smaller screens */
        margin: 20px 0;
    }

    .menu-list > .borderEnd{
        border-width: 0 !important;
    }
}
/*@media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl{
        max-width: 1150px !important;
    }
}*/