body {
  background-color: #fffbdb;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: relative;
}
.sun-wrapper {
  position: absolute;
  top: 0;
  left: -90px;
  width: 280px;    /* adjust to match sun size */
  height: 280px;   /* adjust to match sun size */
  cursor: pointer;
  z-index: 900;
}

.sun {
  position: absolute;
  top: -60px;
  left: -60px;
  width: 280px;
  height: auto;
  cursor: pointer;
  z-index: 800;
  pointer-events: none;
}



h1 {
  color: #B86A1C;
  font-family: "bickham-script-pro-3", serif;
  font-size: 30vw;
  font-weight: 700;
  line-height: normal;
  margin: 0;
  position: absolute;
  top: -88px;
  left: 15vw;           /* push right so sun doesn't overlap */
  z-index: 50;
  white-space: nowrap;
  overflow: visible;
  width: max-content;
  pointer-events: none;
}

/* DELETE .container entirely — it's conflicting */

.floor {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
}

.cactus-1 {
  position: absolute;
  bottom: 95px;
  right: 10px;
  height: 270px;
  width: auto;
}

.cactus-2 {
  position: absolute;
  bottom: 82px;
  right: 80px;
  height: 220px;
  width: auto;
}

.cactus-3 {
  position: absolute;
  bottom: 40px;
  right: 30px;
  height: 194px;
  width: auto;
  z-index: 2;
}

.tumbleweed {
  position: absolute;
  bottom: 20px;
  left: 100px;
  height: 80px;
  width: auto;
  animation: walkAcross 32s linear infinite;
}

/* DELETE the first @keyframes walkAcross — only keep this one */
@keyframes walkAcross {
  0%   { transform: translateX(-200px) translateY(0px); }
  25%  { transform: translateX(30vw) translateY(-15px); }
  50%  { transform: translateX(60vw) translateY(0px); }
  75%  { transform: translateX(90vw) translateY(-15px); }
  100% { transform: translateX(110vw) translateY(0px); }
}

.grass {
  position: absolute;
  bottom: 40px;
  right: 97px;
  height: 200px;
  width: auto;
  z-index: 1;
}

#popup {
  display: none;
  border: none;
  background: transparent;
  box-shadow: none;
  padding: 0;
  margin: 0;
  overflow: visible;
  width: 110px;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

.cactusflow {
  width: 110px;
  height: 100vh;
  object-fit: contain;
  object-position: center;
  display: block;
  border: none;
  outline: none;
  box-shadow: none;
}


#infoBox {
  display: none;
  position: fixed;
  top: 50%;
  left: 300px;        /* appears to the right of the image */
  transform: translateY(-50%);
  background: rgba(115, 60, 5, 0.12);
  border-radius: 8px;
  padding: 20px;
 width: 300px;
height: 100px;
  z-index: 99999;
 color: #B6681B;
font-family: "jacquarda-bastarda-9", serif;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
letter-spacing: 2.4px;
text-decoration-style: solid;
text-decoration-skip-ink: none;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}             

#infotext {
  margin: 0;   /* moves text down inside box */
  padding-left: 10px; 
  padding-top: -10px;  /* moves text right inside box */
  text-align: left;
  text-decoration-line: underline;
}

#infotext2 {
  color: #914A04;
line-height: normal;
letter-spacing: 1.6px;
font-family: "halyard-text-extralight", sans-serif;
font-weight: 400;
font-style: italic;
font-size: small;
padding-left: 2px;
padding-top: 5px;
}