html, body {
  height: 100%; /* Ensure the html and body take up the full height of the page */
  margin: 0; /* Remove default margins */
}

body {
  margin: 0;
  height: 100vh;
  background: linear-gradient(0deg,rgba(245, 231, 255, 1) 2%, rgba(255, 255, 255, 1) 53%);
  background-attachment: fixed; /* Keep the background fixed during scrolling */
  background-size: 100% auto;  /* Ensure the gradient's height matches the body height */
  background-repeat: no-repeat; /* Prevent the gradient from repeating */
  font-family: 'Verdana', sans-serif;
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  bottom: 0;
  right: 0;
  width: 250px; /* Adjust size */
  height: 250px;
  background: url('questy2.png') no-repeat;
  background-size: contain; /* Keeps the image's aspect ratio */
  pointer-events: none; /* Ensures the image doesn't interfere with user actions */
}

.box {
  background: lightgray;
  padding: 10px;
}

.divider {
  height: 30px; /* amount of space */
}
/* Style for the top bar */
.top-bar {
  width: 100%;
  height: 100px; /* Adjust as needed */
  background-image: url('topbar.png'); /* Path to your image */
  background-repeat: repeat-x; /* Tiling horizontally */
  background-size: auto 100%; /* Optional: ensures the image height is always 100% of the bar */
  display: flex;
  align-items: center; /* Vertically centers the content */
  justify-content: center; /* Centers the content horizontally */
  user-select: none; /* Prevents text selection */
}

/* Prevent right-click on the top bar */
.top-bar {
  -webkit-user-select: none; /* For webkit browsers */
  -moz-user-select: none; /* For Firefox */
}

.top-bar img {
  pointer-events: auto; /* Prevents interaction with any images inside the top bar */
}
.image1 {
  position: absolute;
  top: 0;
  left: 50%;                  /* start from center */
  transform: translateX(-450px); /* offset left by 350px (adjust to match your design) */
}

.image2 {
  position: absolute;
  top: 48px;
  left: 50%;                  /* start from center */
  transform: translateX(150px);  /* offset right by 100px (adjust to match your design) */
}
.image3 {
  position: absolute;
  top: 52px;
  left: 50%;                  /* start from center */
  transform: translateX(300px);  /* offset right by 100px (adjust to match your design) */
}
.image4 {
  position: absolute;
  top: 52px;
  left: 50%;                  /* start from center */
  transform: translateX(420px);  /* offset right by 100px (adjust to match your design) */
}