@font-face {
  font-family: "Bowlby One";
  src: url("bowlby-one-regular.woff2");
}
@font-face {
  font-family: "roboto-light";
  src: url("roboto-light.woff2");
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Bowlby One', sans-serif;
}
body {
  font-family: 'roboto-light', sans-serif;
  min-height: 100%;
  background-color: #fef7dd;
  background-image: url('https://www.tijdmasjien.nl/assets/files/top-left-bushes-divider-v14.gif'), url('https://www.tijdmasjien.nl/assets/files/tijdmasjien-planten-rechts.gif');
  background-repeat: no-repeat;
  background-position: left top, bottom right;
  background-size: 50%, 50%;
}

@media only screen and (max-width: 600px) {
  body {
    background-size: 100%, 100%;
  }
  main {
    padding-top: 5em;
  }
}

/* The extra mobile padding above (needed so content clears the corner background art)
   makes the page taller than one viewport, so the cookie bar's position:sticky — which only
   looks pinned to the bottom when a brand's content happens to fit within one viewport —
   stops reaching the bottom here. Force it to a true fixed position instead. */
#cookiebar {
  position: fixed !important;
  left: 0;
  right: 0;
}

/* Theme colors — override the default CSS variables instead of redeclaring rules */
:root {
  --btn-theme-bg: #F3CB35;
  --btn-theme-hover-bg: #F3CB35; /* no hover-darken for this brand */
  --btn-secondary-bg: #C7C7C7;
  --surface-bg: #d6f5fd;
}

.btn-primary,
.btn-primary:hover {
  border: 0;
  color: black;
}

.container {
  max-width: 600px;
}

.ticket-container {
  flex: none;
  -webkit-box-flex: none;
  max-width: 100%;
  margin: 0;
}

.shop-header {
  background: none;
  color: black;
}

#shop-name {
  display: none;
}

.page-title-container {
  color: black;
  text-align: center;
  padding: 5px;
  margin: 0 0 1em 0;
}

.page-title {
  font-weight: 700;
  font-size: 2em;
}

.event-subtitle {
  font-size: 1em;
  color: black;
}

.ticket {
  color: black;
  border: 0;
  border-radius: 0;
  background: white;
}

.ticket-amount-select {
  display: -webkit-box !important;
  -webkit-box-orient: horizontal !important;
  -webkit-box-direction: normal !important;
}

.btn {
  border-radius: 5px;
}

.btn-next-step,
.btn-next-step:hover {
  border: black 2px solid;
  border-radius: 10px;
  font-size: 200%;
}

label,
.page-subtitle,
.terms {
  color: black;
}

#info-closed-timer-intro, #info-closed-timer {
  display: block;
  text-align: center;
  font-size: 300%;
}