:root {
    --almond: #e5e0d8;
    --almond: #fafafa;
    --pistache: #b3b792;
    --pistache-begin: #b3b792ff;
    --pistache-dark: #9a9d7d;
    
    --carob: #725c3a;
    --vanilla: #e5d2b8;
    --graphite: #474b4c;
    --almond-gradient-begin: #e5e0d800;
    --almond-gradient-end: rgba(229, 224, 216, 0.8);
    --grey-gradient-end: #c3c3c3ff;
    --main-font: 'Lora', serif; 
    --header-font: 'Raleway', serif;
}

body {
    font-family: 'Raleway', Arial, Helvetica, sans-serif;
    background-image: linear-gradient(
        to right,
        var(--pistache-begin) 00%,
        var(--almond)140%
    ) !important;
    color: var(--graphite);
    margin: 0 !important;
    padding: 0 !important;
    font-size: 10px;
}

a {
    color: var(--pistache);
    text-decoration: inherit;
}

a.nav-link {
    font-variant: small-caps;
}
a:hover {
    text-decoration: underline;
}

#main-banner {
    color: var(--graphite);
    font-family: var(--header-font);
    font-size: 2.5rem;
    background-size: cover;
    background-position-y: top;
    height: 80vh;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    #main-banner {
        font-size: 1.6rem;
        padding: 1.5rem 1rem;
        min-height: 160px;
        background-position: top center;
        background-size: cover;
        background-attachment: scroll; /* avoid parallax on mobile */
        height: 60vh;
    }  
}

#main-banner.frontpage {

    background-image: linear-gradient(
        to left,
        var(--almond-gradient-begin) 40%,
        var(--almond-gradient-end) 80%
        ),
        url('assets/images/header.png');

}

/* Mobile adjustments */
@media (max-width: 600px) {
    #main-banner.frontpage {
        background-image: linear-gradient(
            to left,
            var(--almond-gradient-begin) 20%,
            var(--almond-gradient-end) 65%
        ), url('assets/images/header.png');
    }  
}

#main-banner.menupage {

    background-image: linear-gradient(
        to left,
        var(--almond-gradient-begin) 40%,
        var(--almond-gradient-end) 80%
        ),
        url('assets/images/menu-header.png');

}

/* Mobile adjustments */
@media (max-width: 600px) {
    #main-banner.menupage {
        background-image: linear-gradient(
            to left,
            var(--almond-gradient-begin) 20%,
            var(--almond-gradient-end) 65%
        ), url('assets/images/menu-header.png');
    }  
}



.banner-img {
    max-width: 400px;
    height: auto;
    object-fit: contain;
    position: relative;
}

.navbar-container {
    /*background-color: var(--pistache);*/
    color: var(--carob);
    font-family: var(--header-font);
    background-image: linear-gradient(
        to right,
        var(--pistache-begin) 00%,
        var(--almond)140%
    ) !important;
    
}

.navbar {
    position: sticky;
    top: 0;
    z-index: 1000;
    font-size: 2rem;
}

.menu-container img {
    width: 60vw;
    height: auto;
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .menu-container img {
    width: 80vw;
    height: auto;
} 
}

.floating-book-btn{
    position: fixed;
    left: 20px;
    width: auto;
    bottom: 20px;
    z-index: 9999;
    background-color: #0d6efd; /* bootstrap primary */
    color: #fff;
    padding: 0.75rem 1rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}
.floating-book-btn:hover{
    background-color: #0b5ed7;
    color: #fff;
    text-decoration: none;
}

.content-box {
    font-family: var(--main-font);
    font-size: 1.5rem;
    
    /*background-color: var(--almond);*/
    padding: 2rem;
    margin: 2rem 0;
    border-radius: 8px;
}

.content-box h1 {
    font-family: var(--header-font);
    font-size: 3rem;
    color: var(--graphite);
    margin-bottom: 1rem;
}
    
.site-footer {
    background-color: var(--pistache-dark);
    color: var(--almond);
    font-family: var(--header-font);
    padding: 2rem 0;
    font-size: 1.2rem;
}