:root {
  --font-inter: "Inter", sans-serif;
  --font-vollkorn: "Vollkorn SC", serif;
  --font-yesteryear: "Yesteryear", cursive;
  --font-raleway: "Raleway", sans-serif;
  --font-dimension: "Source Sans Pro", Helvetica, sans-serif;
  --font-cormorant: "Cormorant Garamond", serif;
  --font-cinzel: "Cinzel", serif;

  --text-light: #ffffff;
  --yellow: #faba00;
  --link-hover: var(--yellow);

  --banner-top: 10px;
  --banner-height: 54px;
  --banner-radius: 26px;
  --banner-visual-side-gap: clamp(16px, 4vw, 72px);

  --section-gap: 18px;
  --section-top-safe: calc(var(--banner-top) + var(--banner-height) + 34px);
  --section-bottom-safe: 96px;
  --section-side-safe: clamp(18px, 4vw, 40px);
  --section-content-max: 980px;
  --text-max: 780px;
}
html,
body {
  background: red !important;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
}

body {
  position: relative;
  overflow-x: hidden;
  color: var(--text-light);
  background: #050608;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
}

body::after {
  z-index: -3;
  background: url("../images/niskakoski.jpg") center center / cover no-repeat;
}

body::before {
  z-index: -2;
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.98) 0%,
    rgba(0, 0, 0, 0.88) 8%,
    rgba(0, 0, 0, 0.58) 20%,
    rgba(0, 0, 0, 0.16) 34%,
    rgba(0, 0, 0, 0.16) 66%,
    rgba(0, 0, 0, 0.58) 80%,
    rgba(0, 0, 0, 0.88) 92%,
    rgba(0, 0, 0, 0.98) 100%
  );
}

body.overlay-open,
body.tours-window-open,
body.guide-open {
  overflow: hidden;
}

a {
  transition: color 0.18s ease;
}

a:hover,
a:focus-visible {
  color: var(--link-hover);
}

.page-bg-media {
  display: none;
}