html {
    /* Make it scroll smoothly when nav bar pressed */
    scroll-behavior: smooth;
    font-family: 'Bricolage Grotesque', sans-serif;
}

body {
    line-height: 1.4;
    margin: 0;
}

/* flexible content images code */
iframe {
    display: block;
    margin: auto;
    width: 90%;
}

/* @media screen and (min-width: 500px) {
    iframe {
        width: 100%;
    }
} */
h2 {
    font-size: large;
    padding: 0 4vh;
    margin: 0;
}

table {
    margin: auto;
    table-layout: auto;
    width: 100%;
    overflow: auto;

}

tr {
    text-align: center;
}

/* 
Max width before this PARTICULAR table gets nasty
This query will take effect for any screen smaller than 760px
and also iPads specifically.
*/
@media only screen and (max-width: 760px) {

    /* Force table to not be like tables anymore */
    table,
    thead,
    tbody,
    th,
    td,
    tr {
        display: block;
    }

    /* Hide table headers (but not display: none;, for accessibility) */
    thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    tr {
        border: 1px solid #ccc;
    }

    td {
        /* Behave  like a "row" */
        border: none;
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        /* Now like a table header */
        position: absolute;
        /* Top/left values mimic padding */
        left: 6px;
        padding-right: 10px;
        white-space: nowrap;
    }

    /*
	Label the data
	*/
    td:nth-of-type(1):before {
        content: "Day";
    }

    td:nth-of-type(2):before {
        content: "Opening time";
    }

    td:nth-of-type(3):before {
        content: "Closing time";
    }
}

@media screen and (max-width: 300px) {
    table {
        width: 100%;
    }
}

nav {
    overflow: hidden;
    position: static;
    /* Set the navbar to fixed position */
    width: 100%;
    /* Full width */
    z-index: 1;
    font-size: 2vh;
}

nav ul {
    display: flex;
    flex-wrap: wrap;
    /* border-top: 1px solid;
    border-right: 1px solid;
    list-style-type: none; */
    margin: 0;
    padding: 0;
}

nav li {
    flex: 1 1 50%;
    display: flex;
    border-bottom: 1px solid;
    border-left: 1px solid;
}

nav a {
    padding: 4px 0px;
    text-align: center;
    text-decoration: none;
    flex: 1 1 auto;
    transition: all 0.2s ease;
}

/* Split into flat 4 */
@media screen and (min-width: 760px) {
    nav {
        overflow: hidden;
        position: relative;
    }

    nav ul {
        flex-wrap: nowrap;
    }

    nav li {
        flex: 1 1 25%;
    }

}

/* page header */
header {
    background-image: url("../i/1.png");

    @supports (background-image: url('../i/1.avif')) {
        background-image: url('../i/1.avif');
    }

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-top: 10vh;
    padding-bottom: 10vh;
    width: 100%;
}

h1 {
    font-family: 'Bricolage Grotesque', sans-serif;
    text-align: center;
}

address {
    padding: 5%;
    font-size: medium;
}

a:not(.page-nav a):link {
    margin: 0 -0.10rem;
    padding: 0 0.10rem;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
    white-space: nowrap;
}

/* footer */
footer {
    display: flex;
    min-height: 2vh;
    font-size: 2vw;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

@media screen and (min-width: 900px) {
    footer {
        font-size: calc(0.8rem + 0.5vw);
    }
}

/* Using third party module for this as too many nuances to account for */
dark-mode-toggle {
    position: absolute;
    top: 90%;
    float: right;
    --dark-mode-toggle-icon-size: 1rem;
    --dark-mode-toggle-light-icon: url(i/d.svg);
    --dark-mode-toggle-dark-icon: url(i/s.svg);
}

iframe {
    width: 100%;
    aspect-ratio: 1/1;
    height: auto;
    max-height: 70vh;
}

.slides {
    /* line them up horizontally */
    display: flex;

    /* allow for scrolling */
    overflow-x: auto;
}

.slides>div {
    /* make sure the width is honored */
    flex-direction: row;
}

img {
    width: auto;
    object-fit: contain;
    max-height: 92vh;
    background-color: indigo;
    padding: 0px 5px;
}