@font-face {font-family: 'TitleFont'; src: url('fonts/Mascarpone-Regular.woff2') format('woff2'), url('fonts/Mascarpone-Regular.woff') format('woff'); font-weight: normal; font-style: normal; }
@font-face {font-family: 'BodyFont'; src: url('fonts/TAYBirdie.woff2') format('woff2'), url('fonts/TAYBirdie.woff') format('woff'); font-weight: normal; font-style: normal;}

* {  text-rendering: optimizeLegibility;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  font-weight: normal;}

html, body {padding:0; margin:0; font-size: 13pt; font-family: 'BodyFont', Arial, sans-serif; color: #0B675C; text-transform: uppercase; line-height: 1.25em; background: #0f725c;}
a {color: #CEB470; opacity 0.8; text-decoration: none;}
a:hover {opacity: 1 !important;}
h1, h2, h3, h4, #lang {font-family: 'TitleFont', Andale Mono, Tahoma, sans-serif; margin: 0; text-transform: uppercase; color: #0F2926; line-height: 1.25em;}
h1 {font-size: 2.75em; margin-bottom: 0.75em;}
h2 {font-size: 2.75em;}
h3 {font-size: 3.75em; line-height: 1.15em;}
h4 {font-size: 3.15em; line-height: 1.15em;}
p {max-width: 65ch;} 
span {font-size: 0.7em;}
.spacer {display: inline-block; width: 40px;}
img {max-width: 100%;}

.fr {font-family: 'TitleFont', Andale Mono, Tahoma, sans-serif;}

#logo {position: absolute; top: 20px; left: 20px; width: 250px; text-align: center;}
#logo img {width: 100%;}
#reservation {position: absolute; bottom: 20px; right: 20px; width: 250px; text-align: center;}
#reservation img {width: 100%;}

#lang {position: absolute; top: 20px; right: 20px; font-size: 1.25em; color: #CEB470; text-shadow: 0.15em 0.15em 0 #0F2926;}
#lang a {opacity: 0.7;}

body .section {min-height: 95vh;  padding-top: 6em;}
.container {place-self: start center; text-align: center; width: 100%; max-width: 1200px; display: grid; place-items: center;}
.intro {padding: 10px 20px; }
#includes .container p {padding: 0px 20px;}
.intro p, #includes .container p {max-width: 100%;}

#header, #footer, #confirmed, #closed { background: #0B675C url("images/bg_desktop.png") repeat-x center center; background-size: cover;}

#header {display: grid; width: 100%; padding-top: 0;}
#header .container {place-self: end center; display: grid; margin-top: 60px; background-repeat: no-repeat; background-position: bottom center; background-size: auto 100%;}
#header .block {place-self: end center; text-align: center; width: 500px; margin-top: 160px; margin-bottom: 35px;}
.chipReservation {width: 400px; padding-top: 40px; padding-bottom: 25px;}
.storefront {width: 30%; padding: 0 1%;}
.storefront:first-child {padding-left: 0;}
.storefront:last-child {padding-right: 0;}

#includes {display: grid; width: 100%; background: #fff;}

#includes .block {display: grid; place-items: center; grid-template-columns: 1fr; gap: 20px; padding: 0 20px 10px;}
#includes .block .item:first-child {height: 100%;}
#includes .block .item {background: #004a4d; color: #fff; width: 100%; display: grid; place-items: center; border-radius: 20px;}
#includes .block .item p {width: 90%; margin: 0 0 1em; text-shadow: 0.15em 0.15em 0 #0F2926;}
.lineBreak {height: 0; display: block;}

.flavours {width: 85%; z-index: 1; padding-top: 40px; position: relative;}
.flavours img {width: 100%; height: auto; z-index: 1; margin-left: -15px;}
.flavours:before {content:""; position: absolute; background: url("images/flavours_before.png") no-repeat center top; background-size: 100% auto; width: 21vw; max-width: 260px; height: 100%; z-index: 1; margin-top: -6%; margin-left: -6%;}
.flavours:after {content:""; position: absolute; background: url("images/flavours_after.png") no-repeat center bottom; background-size: 100% auto; width: 22vw; max-width: 280px; height: 100%; z-index: 1; margin-top: -4%; margin-left: -19%;}

.restaurant {width: 20%; padding: 1em 3% 3em;}
.restaurant:first-child {padding-left: 0;}
.restaurant:last-child {padding-right: 0;}

#reserve, #coming {display: grid; width: 100%; background: #fff;}
#form {width: 100%;}

#footer {color: #fff; display: grid; place-items: center; padding: 2em 20px 2.5em;}
#footer div {place-self: start center; text-align: center; width: 100%; max-width: 1200px;}
#footer p {max-width: 100%; font-size: 0.75em;  line-height: 1em; text-shadow: 0.15em 0.15em 0 #0F2926;} 


#confirmed {min-height: 100vh; display: grid; width: 100%; padding-top: 0;}
#confirmed .container {place-self: center center; display: grid; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100%;}
#confirmed .block {place-self: center center; text-align: center; width: 55%; max-width: 550px; margin-top: 9em; margin-bottom: 2em;}
.reserveImg {width:250px; padding: 0 0 1.5em;}

#closed {min-height: 100svh; display: grid; width: 100%; padding-top: 0;}
#closed .container {place-self: center center; display: grid; background-repeat: no-repeat; background-position: center center; background-size: cover; height: 100%;}
#closed .block {place-self: center center; text-align: center; width: 55%; max-width: 420px;  margin-top: -4em;}

#coming .intro {text-align: center; max-width: 1200px; margin-top: 60px; margin-bottom: 60px;}

.social {width: 30px; padding: 0 1%;}



.fr .flavours:before {background-image: url("images/fr_flavours_before.png");}
.fr .flavours:after {background-image: url("images/fr_flavours_after.png");}
#confirmed .container .fr {max-width: 650px;}
.fr h3 {font-size: 3.5em;}



@media (min-width: 700px) {
    #header .container {background-image: url("images/bg_home.png");}
    #confirmed .container {background-image: url("images/bg_booked.png");}
    #closed .container {background-image: url("images/bg_closed.png");}
}

@media (max-height: 400px) and (max-width: 1000px) {
    html, body {font-size: 8pt;}
    h1 {margin-bottom: 0.25em;}
    span {font-size: 1em; line-height: 1.25em !important;}
    span {font-size: 1em; line-height: 1.25em !important;}
    span br {display: none;}
    .spacer {display: block; height: 1.5em;} 
    .lineBreak {height: 0.25em;}  

    body .section {min-height: auto; padding-top: 3em;}
.intro, #footer div {max-width: 85%;}

    #header .container {width: 100%; max-width: auto; background-position: top center; background-size: 135% auto; margin-top: 30px;}
    #header .block {margin-top: 15vw; margin-bottom: 10px; width: 65vw;}
    .chipReservation {width: 30vw; padding-bottom: 5px;}
    .storefront {max-width: 150px;}

    #logo {width: 20vw;}
    #reservation {width: 22vw;}
    .reserveImg {width:200px;}

    #confirmed .block {margin-top: 6em;}
    #closed .block {max-width: 300px;  margin-top: 0em;}
}


@media (max-width: 790px) {
    html, body {font-size: 10pt; min-width: 360px;}
    .spacer {display: block; height: 1.5em;}
    span {font-size: 1em; line-height: 1.25em !important;}
    span br {display: none;}

    #logo {top: 13.5vh; left: 0; width: 100%;}
    #logo img {width: 250px;}

    #lang {left: 20px;}

    #header { background-image: url("images/bg_mobile.png");}
    #header .container {place-self: end center; margin-top: 40vh; background-image: url("images/bg_home_mobile.png"); background-position: top center; background-size: 180% auto; }
    #header .block {width: calc(100% - 100px); max-width: 380px; margin-top: 15vw; margin-bottom: 5px;}
    h1 {font-size: 2em;  margin-bottom: 0.5em;}
    .chipReservation {width: 90%; padding-top: 12vw; padding-bottom: 10px;}


    #includes .block {grid-template-columns: 1fr;}
    #includes .block .item {width: 100%;}
    .lineBreak {height: 0.25em;}

    .flavours {padding-bottom: 1em; width: 90%;}
    .flavours img {margin-left: 0;}
    .flavours:before {width: 25vw; height: 25vw; margin-top: -7.5vw; margin-left: -4vw;}
    .flavours:after {width: 25vw; height: 25vw; margin-top: 14vw; margin-left: -18vw;}

    .restaurant {width: 24%; padding: 2em 2% 2em;}

    iframe {min-height: 1000px !important;}


    #confirmed #logo, #closed #logo {position: relative; top: 40px; left: 0; width: 100%;}
    #confirmed #logo img, #closed #logo img {width: 150px;}
    #reservation {position: relative; bottom: 40px; left: 0; width: 100%; margin-top: -3vw;}
    #reservation img {width: 200px;}
    .reserveImg {width:200px; padding: 0 0 1em;}

    #confirmed { background-image: url("images/bg_mobile.png");}
    #confirmed .container {place-self: center center; background-image: url("images/bg_booked_mobile.png"); background-position: bottom center; background-size: cover; height: 120vw; min-height: 630px; margin-top: 65px;}
    #confirmed .block, #closed .block {width: 40%; min-width: 250px; margin-top: -4em; margin-bottom: 0;}
    h3 {font-size: 3.5em;}
    .fr h3 {font-size: 3em;}
    h4 {font-size: 2.5em;}

    #closed { background-image: url("images/bg_mobile.png");}
    #closed .container {place-self: center center; background-image: url("images/bg_closed_mobile.png"); background-position: bottom center; background-size: cover; height: 120vw; min-height: 600px; margin-top: 65px;}
    #closed .block {margin-top: -10em; margin-left: 1em;}

}