/* google fonts https://fonts.google.com */

/* @import url("https://fonts.googleapis.com/css2?family=Big+Shoulders+Inline+Text:wght@300;400&family=Fira+Sans+Condensed:wght@300&family=Lobster&family=Merienda&family=Noto+Sans+HK:wght@400;500&family=Orbitron&family=Play:wght@400;700&display=swap"); */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap"); */
/* :root {
  --background-image: url("../images/weathered-page-5.webp");
} */

.sides-present {
  background-color: var(--background-color);
  background: url("../images/weathered-page-5.webp"),
    left/var(--side-width)
      linear-gradient(to right, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.3))
      repeat-y,
    right/calc(var(--side-width) - var(--scroll-bar-width))
      linear-gradient(to left, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.3)) repeat-y;
  background-attachment: fixed;
  background-blend-mode: overlay;
  overflow-x: hidden;
}

.sides-not-present {
  /* background-color: rgb(196, 184, 169); */
  /* background-color: rgb(165, 155, 143); */
  background-color: var(--background-color);
  /* background-image: var(--background-image); */
  background-image: url("../images/weathered-page-5.webp");
  background-attachment: fixed;
  background-blend-mode: overlay;
  overflow-x: hidden;
}

/* for smaller screens*/

/* @media screen and (orientation: portrait) {
  .sides-not-present {
    background: url("../images/weathered-page-5.webp");
  }
} */