/* Fonts worden self-hosted geladen via base/fonts.css (@font-face). */

/* HTML5 display reset */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/* Basis reset */
html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}
body, ol, ul {
  margin: 0;
  padding: 0;
}
ol, ul {
  list-style: none;
}
body {
  /* Achtergrondfoto + subtiele warme overlay die het beeld bovenaan (achter logo
     en nav) net iets dimt voor leesbaarheid, en volledig transparant is voordat
     de witte content begint. */
  background-color: var(--color-paper);
  background-image:
    linear-gradient(180deg, rgba(42, 33, 26, 0.32), rgba(42, 33, 26, 0.08) 28%, rgba(42, 33, 26, 0) 52%),
    url("/assets/hero-violin-sunset-2b57530c.jpg");
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
  background-size: cover, 100% auto;
  background-position: center, center -8rem;
}

mark {
  background-color: transparent;
  color: inherit;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: none;
}
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}
input, select, textarea {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
}

/* Animatie/preload fix */
body.is-preload *, body.is-preload *:before, body.is-preload *:after {
  animation: none !important;
  transition: none !important;
}

/* Speciale secties */
section.special, article.special {
  text-align: center;
}

/* Responsive tweaks */
@media screen and (max-width: 480px) {
  html, body {
    min-width: 320px;
  }
}
@media (max-width: 375px) {
  body {
    font-size: 15px;
    background-size: cover, 100% auto;
    background-position: center, center -3rem;
  }
  .container {
    padding: 8px;
  }
}