@import url("https://fonts.googleapis.com/css2?family=Julius+Sans+One&family=Mate+SC&family=Open+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700;1,800&family=Shadows+Into+Light&display=swap");
:root {
  --color-green: #dcedff;
  --color-pink: #dcedff;
  --color-orange: #d48686;
  --color-yellow: #505a5b;
  --color-dark-purple: #343f3e;
  --header-height: 6rem;
}
* {
  margin: 0;
  padding: 0;
}
html {
  font-size: 0.625em;
}
body {
  box-sizing: border-box;
  font-family: "Julius Sans One", sans-serif;
  background-color: var(--color-dark-purple);
}
.slide-in-from-bottom {
  animation: 0.2s ease 0s 1 slideInFromBottom;
}
.jump-updown-animation {
  animation: 1s ease 2s 1 jumpUpDown;
}
.scroll-to-top {
  position: fixed;
  bottom: 2rem;
  right: 4rem;
  width: 5rem;
  height: 5rem;
  border-style: none;
  background-color: transparent;
  cursor: pointer;
  border-style: none;
  transition: transform 0.2s 0s ease;
  z-index: 2;
}
.scroll-to-top:hover {
  transform: translateY(-10%);
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--header-height);
  background-color: var(--color-yellow);
  width: 100%;
  position: relative;
  top: 0;
  z-index: 2;
}
header ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  align-content: center;
  list-style: none;
}
header ul li {
  padding: 0 2rem;
  font-size: 3rem;
  font-variant: small-caps;
}
header ul li a {
  color: var(--color-green);
}
a {
  text-decoration: none;
  position: relative;
}
/* inspiratiebronnen underline effect: https://www.30secondsofcode.org/css/s/hover-underline-animation, https://codepen.io/jstn/pen/zuDst */
.hover-effect::after {
  content: "";
  top: 100%;
  left: 0;
  right: 0;
  background-color: var(--color-green);
  height: 0.2rem;
  transform: scaleX(0);
  transition: transform 0.4s cubic-bezier(0.8, 0.06, 0.8, 0.045);
  position: absolute;
}
.hover-effect:hover::after {
  transform: scaleX(1);
  transition-timing-function: cubic-bezier(0.25, 1, 0.3, 1);
}
header a:visited {
  color: var(--color-green);
}
header .logo-image {
  height: calc(var(--header-height) - 1rem);
  margin-right: 0.8rem;
  padding-top: 0.6rem;
}
header .logo-text {
  color: var(--color-green);
  background: linear-gradient(var(--color-green), var(--color-dark-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0.2rem 0;
}
.logo-image-text {
  display: flex;
  align-items: center;
  font-size: 4rem;
  font-weight: bold;
}
main {
  background-color: var(--color-dark-purple);
}
.main-background {
  height: 70vh;
  width: 100%;
  object-fit: cover;
}
main h1 {
  color: var(--color-orange);
  font-size: 6rem;
  font-weight: bold;
  animation: 1.5s ease 0s 1 slideInFromTop;
  padding-top: 4rem;
  margin-bottom: 2rem;
  text-align: center;
  margin-bottom: 4rem;
  width: 100%;
  background-size: cover;
  margin-top: -50vh;
  margin-bottom: 45vh;
}
.thank-you {
  height: 100vh;
}
.thank-you p {
  font-size: 2rem;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  color: var(--color-green);
}
.underline {
  text-decoration: underline;
}
.menukaart,
.reserveren,
.contact,
.zalen,
.cadeaubon,
.login,
.reservaties {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100rem;
  margin: 0 auto;
  padding-bottom: 3rem;
}
/* ---------------
	Home & Parallax
	------------------ */
.home-back-img {
  width: 100%;
  object-fit: cover;
  height: 100vh;
}
.parallax h1 {
  margin-top: 10rem;
  text-align: center;
  font-size: 8rem;
  color: var(--color-dark-purple);
  animation: 1.5s ease 0s 1 slideInFromTop;
}
.parallax {
  height: 500px; /* fallback */
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-perspective: 1px;
  perspective: 300px;
}

.parallax__group {
  position: relative;
  height: 500px; /* fallback */
  height: 100vh;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.parallax__layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.parallax__layer--fore {
  -webkit-transform: translateZ(90px) scale(0.7);
  transform: translateZ(90px) scale(0.7);
  z-index: 1;
}

.parallax__layer--base {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  z-index: 4;
}

.parallax__layer--back {
  -webkit-transform: translateZ(-200px) scale(1.66);
  transform: translateZ(-200px) scale(1.66);
  z-index: 3;
}

.parallax__layer--deep {
  -webkit-transform: translateZ(-600px) scale(3);
  transform: translateZ(-600px) scale(3);
  z-index: 2;
}
#group1 {
  z-index: 3; /* slide over group 2 */
}
#group2 {
  z-index: 4; /* slide over group 2 and 4 */
  background: var(--color-dark-purple);
  height: fit-content;
}

#group3 {
  z-index: 5; /* slide over group 2 and 4 */
}
.about-container {
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  font-family: "Open Sans", sans-serif;
}
.about-container h2 {
  color: var(--color-orange);
  font-size: 4.4rem;
  font-weight: bold;
  margin-top: 3rem;
  margin-bottom: 2rem;
  font-family: "Julius Sans One", sans-serif;
}
.about-container p {
  font-size: 2rem;
  font-weight: 400;
  margin-bottom: 2rem;
  color: var(--color-green);
}
.homepage-image {
  height: 35rem;
  width: auto;
  margin: 4rem auto;
}
/* ---------------
Menu
	---------------- */
.menukaart .menu-nav ul li {
  align-self: center;
  margin-bottom: 1rem;
  padding: 0.6rem;
}
.menukaart .menu-nav ul li a {
  color: var(--color-green);
  font-size: 2.4rem;
}
.menukaart h2:before {
  width: 100vw;
  content: url("/images/menukaart-brushstroke.svg");
}
.menukaart h2 {
  color: var(--color-green);
  font-size: 3.4rem;
  text-align: center;
  margin: 2rem 0;
}
.menukaart h3 {
  color: var(--color-pink);
  font-size: 2.8rem;
  text-align: center;
  margin: 1.4rem 0;
}
.menu-item .menu-item-info {
  color: var(--color-pink);
  width: 100%;
  font-size: 1.6rem;
}
.menukaart .menu-item-name,
.menukaart .menu-item-price {
  color: var(--color-green);
  font-size: 2rem;
}
.menukaart ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.menu-item {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-family: "Open Sans", sans-serif;
  padding-bottom: 2rem;
}
.menu-item .menu-item-seraprator {
  border-bottom-style: dotted;
  border-bottom-width: 1px;
  margin-left: 10px;
  margin-right: 10px;
  border-bottom-color: var(--color-orange);
  height: 0;
  flex-grow: 1;
}
/* ---------------
FORMS
Reserveren
Contact
Cadeaubon
	---------------- */
form {
  width: 100%;
  min-height: 100vh;
  padding-bottom: 3rem;
}
form fieldset legend {
  color: var(--color-orange);
  font-size: 3rem;
  padding: 2rem;
}
form fieldset {
  border: 0.1rem var(--color-orange) solid;
  margin-bottom: 2rem;
  border-radius: 1rem;
}
form label,
.form-input-group-combined-title {
  color: var(--color-pink);
  font-size: 2.4rem;
}
form fieldset div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
form fieldset div,
.disclaimer {
  padding: 1rem 4rem;
  font-family: "Open Sans", sans-serif;
}
.disclaimer {
  color: var(--color-green);
  font-size: 1.4rem;
}
form input {
  text-align: center;
}
form input,
form select {
  padding: 0.5rem;
  font-size: 2rem;
}
form input,
form textarea,
.date-selection-container {
  max-width: 60%;
  min-width: 60%;
}
form textarea {
  min-height: 40rem;
  max-height: 40rem;
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
}
form .bericht-container label {
  align-self: flex-start;
}
#reserveForm #reservationTime,
#contactForm #onderwerp,
#cadeaubonForm #bedrag {
  width: 30%;
}
#cadeaubonForm div #kortingscode {
  max-width: 20%;
  min-width: 20%;
}
form .form-buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
form .form-buttons button:hover {
  cursor: pointer;
}
form .form-buttons button {
  padding: 1rem;
  margin-bottom: 2rem;
  font-size: 2.2rem;
  border-radius: 1rem;
  opacity: 1;
  opacity: 0.7;
  transition: all 0.4s ease;
}
form .form-buttons button:hover {
  border-radius: 0.6rem;
  opacity: 1;
}
#reserveForm #submitReservationButton,
#cadeaubonForm #submitCadeaubonButton,
#contactForm #submitContactButton,
#loginForm #submitLoginButton {
  color: white;
  width: 30%;
  font-weight: bolder;
  background-color: rgba(0, 122, 0, 0.63);
  border: solid var(--color-orange) 0.1rem;
}
#reserveForm #clearReservationButton,
#cadeaubonForm #clearCadeaubonButton,
#contactForm #clearContactButton,
#loginForm #clearLoginButton {
  color: white;
  width: 15%;
  background-color: rgb(160, 50, 50);
  border: solid var(--color-orange) 0.1rem;
  order: -1;
}
.error-message {
  color: rgb(255, 55, 55);
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  font-weight: 500;
  text-align: end;
  font-style: italic;
  padding: 1rem 4rem;
  min-height: 1.6rem;
}
.invalid-input {
  border: 0.1rem red solid;
}
.date-selection-container {
  padding-left: 0;
  padding-right: 0;
  display: flex;
  justify-content: space-between;
}
form .date-selection-input-label-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
}
form .date-selection-input-label-container label {
  margin-bottom: 0.6rem;
}
.reservation-submit-error,
.login-submit-error {
  font-size: 1.8rem;
  color: red;
  font-weight: bold;
  font-family: "Open Sans", sans-serif;
  min-height: 3rem;
  text-align: end;
}
/* ---------------
Info
---------------- */
.location-description-container,
.motivation-description-container,
.corona-description-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-basis: 50%;
}
.location-description-container h2,
.motivation-description-container h2,
.corona-description-container h2 {
  color: var(--color-orange);
  font-size: 3.4rem;
  padding-bottom: 2rem;
}
.location-description-container p,
.motivation-description-container p,
.corona-description-container p {
  width: 80%;
  font-family: "Open Sans", sans-serif;
  color: var(--color-green);
  font-size: 1.6rem;
}
.location-container,
.motivation-container,
.opening-hours-container,
.corona-info-container {
  display: flex;
  align-items: center;
  width: 100%;
}
.google-maps-location {
  border-style: none;
}
.motivation-image,
.openinghours-image,
.corona-image {
  object-fit: cover;
}
.google-maps-location,
.motivation-image,
.openinghours-image,
.corona-image {
  height: 40vh;
  flex-basis: 50%;
}
.table-container {
  align-self: center;
  flex-basis: 50%;
}
.opening-hours-table {
  width: 80%;
  margin: 0 auto;
}
.opening-hours-table th {
  padding-bottom: 2rem;
  color: var(--color-orange);
  font-size: 3.4rem;
}
.opening-hours-table td {
  padding-bottom: 2rem;
  color: var(--color-green);
  text-align: center;
  font-size: 1.8rem;
}
/* ---------------
Gallerij
------------------ */
.gallery-image-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.gallery-image-container img {
  object-fit: cover;
  width: 30%;
  margin: 0 1% 1% 0;
}
/* ---------------
Zalen
------------------ */
.zalen .zaal-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.zalen .zaal-container img {
  object-fit: cover;
  width: 100%;
  border-radius: 1rem;
}
.zalen .zaal-container img,
.zalen .zaal-container h2,
.zalen p {
  margin-bottom: 2rem;
}
.zalen .zaal-container h2 {
  font-size: 3rem;
  color: var(--color-orange);
}
.zalen p {
  color: var(--color-green);
  font-size: 1.6rem;
  font-family: "Open Sans", sans-serif;
  align-self: flex-start;
}
/* ---------------
Reservaties
------------------ */
.reservaties {
  display: none;
  width: 0;
  height: 0;
}
.reservaties h2 {
  color: var(--color-orange);
  font-size: 2.6rem;
  margin-bottom: 2rem;
}
.reservaties-from-api-table {
  font-family: "Open Sans", sans-serif;
}
.reservaties-from-api-table th {
  font-size: 2rem;
  color: var(--color-pink);
  padding: 1rem;
}
.reservaties-from-api-table td {
  font-size: 1.8rem;
  padding: 1rem;
  color: var(--color-green);
}
.other-date-reservations-page {
  color: var(--color-orange);
  font-size: 2rem;
  margin-bottom: 1rem;
}
#reservation-api-call-date-picker {
  margin-bottom: 2rem;
}
.reservations-error {
  color: var(--color-green);
  font-size: 2.2rem;
  font-family: "Open Sans", sans-serif;
}
/* ---------------
Footer
	---------------- */
footer {
  background-color: var(--color-orange);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 0 2rem 0;
}
footer h2 {
  margin-bottom: 2rem;
  font-size: 2.4rem;
}
footer address {
  font-style: normal;
}
footer address ul {
  display: flex;
  flex-direction: column;
  align-items: center;
}
footer ul li {
  display: flex;
  align-items: center;
  padding-bottom: 1rem;
  font-size: 1.8rem;
}
footer .icon {
  height: 1.8rem;
  margin-right: 1rem;
}
footer a {
  color: black;
}
footer a:visited {
  color: black;
}
/* ---------------
Keyframes
	---------------- */
@keyframes slideInFromTop {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideInFromLeft {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0);
  }
}
@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slideOutToBottom {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes jumpUpDown {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-40%);
    color: var(--color-green);
    border-color: var(--color-green);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-40%);
    color: var(--color-green);
    border-color: var(--color-green);
  }
  100% {
    transform: translateY(0);
  }
}
/* ---------------
Mediaqueries
------------------ */
@media screen and (max-width: 1760px) {
  header {
    height: fit-content;
    padding: 1rem 0;
  }
  header ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .header-middle,
  .header-left,
  .header-right {
    width: 100%;
  }
  .header-middle {
    order: -1;
    display: flex;
    justify-content: center;
  }
}
@media screen and (max-width: 1510px) {
  .about-container {
    width: 90%;
  }
  .about-container h2 {
    font-size: 2.2rem;
  }
  .about-container p {
    font-size: 1.6rem;
  }
  .about-container img {
    height: auto;
    width: 60%;
  }
  header ul {
    flex-direction: column;
    flex-wrap: wrap;
  }
  .header-middle {
    order: -1;
  }
  .menukaart,
  .reserveren,
  .contact,
  .zalen,
  .cadeaubon {
    width: 80%;
  }
  main .login {
    width: 100vw;
  }
  main section .reservaties {
    width: 100vw;
    overflow: scroll;
  }
  main .reservaties .reservaties-from-api-table {
    width: 100%;
    table-layout: fixed;
    overflow-wrap: break-word;
    overflow: scroll;
  }
  main .reservaties-admin-page-body th {
    font-size: 1.6rem;
  }
  main .reservaties-admin-page-body td {
    font-size: 1.4rem;
  }
  .main-background {
    height: 40vh;
  }
  main h1 {
    font-size: 4rem;
    margin-top: -30vh;
    margin-bottom: 25vh;
  }
  .menukaart .menu-nav ul li a {
    font-size: 2rem;
  }
  .menukaart h2 {
    font-size: 2.2rem;
  }
  .menukaart h3 {
    font-size: 1.8rem;
  }
  .menukaart .menu-item-name,
  .menukaart .menu-item-price {
    font-size: 1.6rem;
  }
  .menu-item .menu-item-info {
    font-size: 1.4rem;
  }
  form label,
  .form-input-group-combined-title {
    font-size: 1.8rem;
    margin-bottom: 1.4rem;
    width: 100%;
    text-align: center;
  }
  form fieldset legend {
    font-size: 2.6rem;
  }
  form input,
  form select {
    font-size: 1.6rem;
    min-width: 100%;
  }
  form .error-message {
    font-size: 1.4rem;
  }
  .reservation-submit-error,
  .login-submit-error {
    font-size: 1.6rem;
  }
  .date-selection-container {
    display: flex;
    flex-direction: column;
  }
  form .form-buttons button {
    font-size: 1.4rem;
    min-width: fit-content;
  }
  #reserveForm #reservationTime,
  #onderwerp {
    min-width: 70%;
    max-width: 100%;
  }

  #reserveForm #reservationYear,
  #reserveForm #reservationMonth,
  #reserveForm #reservationDay,
  #bedrag,
  #cadeaubonForm div #kortingscode,
  form .date-selection-container {
    min-width: 80%;
    max-width: 100%;
  }
  form .date-selection-container select,
  #bericht {
    min-width: 100%;
  }
  .form-input-group-combined-title {
    align-self: flex-start;
  }
  .input-label-container {
    display: flex;
    flex-direction: column;
  }
  .info h2 {
    font-size: 2.2rem;
  }
  .opening-hours-table,
  .info h2 {
    margin-top: 2rem;
  }
  .opening-hours-table th {
    font-size: 2.2rem;
  }
  .opening-hours-table td {
    font-size: 1.6rem;
  }
  .info img {
    margin-top: 2rem;
    width: 60%;
  }
  .openinghours-image {
    order: 2;
  }
  main section .info div p {
    font-size: 1.6rem;
  }
  .location-container,
  .motivation-container,
  .opening-hours-container,
  .corona-info-container {
    flex-direction: column;
  }
  .corona-info-container {
    margin-bottom: 2rem;
  }
  .location-container iframe {
    width: 80%;
    height: 30vh;
    flex-basis: auto;
  }
  .gallery-image-container {
    flex-direction: column;
    align-content: center;
  }
  .gallery-image-container img {
    width: 80%;
    height: 50vh;
    object-fit: cover;
    margin-bottom: 2rem;
  }
  .zalen .zaal-container img {
    width: 70%;
  }
  .zaal-info-algemeen {
    width: 100%;
    margin: 0 auto;
  }
  .thank-you p {
    font-size: 1.6rem;
  }
  footer h2 {
    font-size: 2.2rem;
  }
  footer address ul li {
    font-size: 1.6rem;
  }
}