body {
  padding: 20px 0;
  overflow: hidden;
  position: relative; /* Make sure this is set to work with absolute positioning of pseudo-element */

  background-size: cover;
  background-image: url('collage.jpeg');
  background-color: rgba(0, 0, 0, 0.1);
  background-blend-mode: multiply;
}

body:before {
  content: ""; /* Necessary for the pseudo-element to show */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url('gradient.png'); /* The image you want on top */
  background-size: cover;
  background-position: center;
  z-index: 1; /* Ensure it's above the main body background */
}

.canvas {
  position: absolute;
  top: 0;
}

.form {
  padding: 20px;
  z-index: 1 !important;
}

#js-container {
  position: relative; /* Keeps the stacking context */
  width: 100vw; /* Match the canvas and image width */
  height: 100vh; /* Match the canvas and image height */
}

#js-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2; /* Ensures the canvas is above the form but below the image */
}

#troon {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* Match the canvas and image width */
  height: 100vh; /* Match the canvas and image height */
  pointer-events: none; /* Allows clicks to pass through */
  z-index: 4; /* Ensures the image is on top of everything else */
}

#js-container .form {
  position: absolute; /* Position it within the container */
  top: 0; /* Adjust as needed */
  left: 0; /* Adjust as needed */
  z-index: 0; /* Keeps the form below the canvas */
  width: 100%; /* Optional, depending on your design */
  /* More styling here for visibility, etc. */
}

.btn-dynamic-size {
  width: 5vw; /* Adjusts the width to be 30% of the viewport width */
  height: 10vh; /* Adjusts the height to be 10% of the viewport height */
}

#mobile-config {
  display: none;
}

.tab-content {
  position: relative; /* This makes it the reference point for absolutely positioned children */
  min-height: 500px; /* Adjust based on your content to ensure there's enough space */
}

.tab-pane {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 0.5s ease;
  visibility: hidden;
  opacity: 0;
}

#home {
  visibility: visible;
  opacity: 1;
}

.button-container {
  position: absolute;
  bottom: 330px;
  left: 0;
  width: 100%;
  padding-top: 20px;
}


@media only screen and (max-width: 1026px) {
  #desktop-config {
      display: none;
  }
  #mobile-config {
    display: block !important;
}

h1 {
  margin: .2em 0 !important;
}
#cum
{
  margin: .2em 0 !important;
}

}