@font-face {
    font-family: 'Belshaw';
    src: url('../css/belshaw/Belshaw.eot');
    src: url('../css/belshaw/Belshaw.eot?#iefix') format('embedded-opentype'),
        url('../css/belshaw/Belshaw.woff2') format('woff2'),
        url('../css/belshaw/Belshaw.woff') format('woff'),
        url('../css/belshaw/Belshaw.ttf') format('truetype'),
        url('../css/belshaw/Belshaw.svg#Belshaw') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body {
    background-color: #9cd8f1;
    font-family: 'Oswald', sans-serif;
}

/* For mobile screens use the wood background for nav and home header */
@media only screen and (max-width: 991px) {
    .desktop {
        display:none;
    }
    .mobile {
        background: url('../assets/images/texture-vintage-blue-turquoise-painted-wooden-background_92056-425_075_sat.png'); 
        /* background-size: cover;  */ 
    }
    .navbar-collapse {
        border-radius: 2%;
        background-color: #9cd7f1d5 !important;
        text-shadow: none;
        margin:5%;
        padding: 10%;
    }

    header {
        /* use display table to center the text vertically */
        display: table;
        width: 100vw;
        height: 30vh;
        text-align: center;
        font-family: 'Belshaw', sans-serif;
        text-shadow: 0px 6px 2px #FDE400;
    }
    .navbar-brand {
        font-family: 'Belshaw', sans-serif;
        text-shadow: 0px 3px 1px #FDE400;
        font-size: 1.5em;
    }
    .smaller {
        display:none;
    }
    .heading {
        font-size:5em;
        line-height: 80%;
    }
    .navbar-light {
        color: yellow;
        text-shadow: 0px 3px 1px #FDE400;
    }
}

/* Set navbar and header background for larger screens */
@media only screen and (min-width: 992px) {
    .mobile {
        display:none;
    }
    .navbar {
        background-color: #64c0e7;
    
    }
    header {
        display: table;
        width: 100vw;
        height: 35vh;
        text-align: center;
        font-family: 'Belshaw', sans-serif;
        text-shadow: 0px 6px 2px #FDE400;
        background: url('../assets/images/hojz1mnqpao21.jpg');  
        /* background: url('../assets/images/ABOUT\ US\ BACKER.JPG');  */
        background-size: cover; 
    }
    

    .navbar-brand {
        font-family: 'Belshaw', sans-serif;
        text-shadow: 0px 3px 1px #FDE400;
        font-size: 1.5em;
    }

    .smaller {
        font-size: 0.6em;
    }

    .heading {
        font-size: 5em;
    }
}

.center-heading {
    display: table-cell;
    vertical-align: middle;
}

#intro {
    text-align: center;
    margin:0 20px;
}

.cta-btn {
    background-color: #64c0e7;
}

footer {
    background-color: #64BFE7;
    /* text-align: center; */
}
.footer-brand {
    font-family: 'Belshaw', sans-serif;
    text-shadow: 0px 3px 1px #FDE400;
}

.image-style {
    width: 80%;
    margin: auto;
    display: block;
}

.black-text {
    color:black;
}

/* --- Menu page --- */
.main-menu {
    background-color:#64c0e7 ;
}

.sub-menu {
    background-color: #9cd8f1;
}
@media only screen and (max-width: 767px) {  
    .menu-item-background {
        background: url('../assets/images/Menu\ Background\ Plain\ reduced.png');
        background-size: cover;
        background-position: center;
    }
}
@media only screen and (min-width: 768px) {
    .menu-item-background {
        background: url('../assets/images/Menu-background-desktop.png');
        background-size: cover;
        background-position: center;
    }
}
.menu-item-text {
    margin:10%;
    background-color: #f0f3f5e3;
    border-radius: 4%;
    color: black;
    text-align: justify;
    padding: 5%;
}

.menu-image-style {
    margin: 10%;
    border-radius: 4%;
}

.deliveroo {

    background-color: #fff;
    border-radius: 10%;
}