h1{
  font-size: 4vw;
  font-family: Bahnschrift SemiBold;
  background-color: SeaGreen;
}

body {
  background-color: DarkSeaGreen;
  position: relative;
  min-height: 100vh;
}

body::before {
  content: "";
  position: fixed;
  left: 0;
  top: 0;
  width: 100px; /* adjust width to match your image */
  height: 200vh;
  background-image: url("../images/ReunaVasen.png");
  background-repeat: repeat-y; /* repeat vertically */
  background-position: top left;
  background-size: 100px auto;
  z-index: 1;
  pointer-events: none; /* allows clicking through the image */
}

.side-image-left {
  display: none; /* hide the individual img element */
}

body::after {
  content: "";
  position: fixed;
  right: 0;
  top: 0;
  width: 100px; /* adjust width to match your image */
  height: 200vh;
  background-image: url("../images/ReunaOikea.png");
  background-repeat: repeat-y; /* repeat vertically */
  background-position: top right;
  background-size: contain;
  z-index: 1;
  pointer-events: none; /* allows clicking through the image */
}

.side-image-right {
  display: none;
}

p {
  font-size: 2vw;
  font-family: Copperplate Gothic Bold;
}

div {
  position: relative;
  z-index: 2; /* content appears above the background image */
}

@media (max-width: 780px) {
body{
  padding-left: 50px; /* add left padding on mobile */
  padding-right: 50px; /* add right padding on mobile */
}
  
  h1 {
    font-size: 30vw; 
  }
  
  p {
    font-size: 6vw;
  }
  
  body::before {
    width: 200px;
    background-size: 50px auto;
    height: 150%;
    position: fixed;
  }
  
  body::after {
    width: 200px;
    background-size: 50px auto;
    height: 110%;
    position: fixed;
  }
  
  div {
    padding: 0; /* match the new image width */
  }
}