/* Ensure the p5.js canvas stays behind all other content */
#sketch-container {
  position: fixed; /* Fix the position of the canvas */
  top: 0;
  left: 0;
  width: 100vw; /* Full viewport width */
  height: 100vh; /* Full viewport height */
  z-index: -1; /* Ensure the canvas is below other content */
}

body {
  position: relative;
  width: 100%;
  height: 100%; /* Keep the body height at 100% */
  background-color: #d3d3d3;
  overflow-x: hidden;

  margin: 0; /* Remove default margin */
  padding: 0;
}

/* Hide the scrollbar */

.sound-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0); /* Semi-transparent black background */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100000; /* Ensure it's on top of all other content */
  opacity: 1;
  transition: opacity 0.5s ease-out;
  cursor: pointer;
}

.sound-message {
  color: white;
  font-size: 2.5vw;
  font-family: "loretta", serif;
  text-align: center;
}

.trangAllowSound {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  filter: blur(0.547vw);
}

.trangHeading {
  position: absolute;
  width: 78.828vw;
  height: 24.167vh;
  top: 25.764vh;
  left: 10.82vw;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #ffffff;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 9.492vw;
  line-height: normal;
}

.trangMessage {
  position: absolute;
  width: 39.18vw;
  height: 8.611vh;
  top: 65.972vh;
  left: 30.391vw;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #d3d3d3;
  font-size: 0.938vw;
  text-align: center;
  letter-spacing: 0;
  line-height: 4.278vh;
}
.frame {
  height: 100vh; /* Full viewport height */
  width: 100%; /* Full width */
  background-color: transparent;
  position: relative;
  z-index: 1; /* Ensure it stays on top of the canvas */ /* Make room for frame2 to appear below */
}

.ellipse {
  position: fixed;
  width: 82.5vw;
  height: 146.667vh;
  top: -23.333vh;
  left: 8.75vw;

  cursor: pointer;
}

.riA {
  position: fixed;
  width: 2.07vw;
  top: 8.472vh;
  left: 89.492vw;
  pointer-events: auto;
  z-index: 9999;
}

.leA {
  position: fixed;
  width: 2.07vw;
  top: 8.472vh;
  left: 8.359vw;
  cursor: pointer;
  z-index: 9999; /* Make sure it's on top */
}

.text-wrapper {
  position: fixed;
  top: 9.375vh;
  left: 34.063vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #d3d3d3;
  font-size: 2.5vw;
  text-align: center;
  letter-spacing: 1.75vw;
  line-height: normal;
  white-space: nowrap;
}

.div {
  position: fixed;
  top: 87.431vh;
  left: 29.492vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 300;
  color: #d3d3d3;
  font-size: 2.5vw;
  text-align: center;
  letter-spacing: 1.75vw;
  line-height: normal;
  white-space: nowrap;
}

.frame .span {
  font-weight: 300;
}

.frame .text-wrapper-2 {
  font-family: "loretta", serif;
  font-weight: 600;
  font-style: italic;
}

.frame .vongtt1 {
  position: absolute;
  width: 34.492vw;
  height: 35.903vh;
  top: 17.847vh;
  left: 32.773vw;
}
.frame .vongtt2 {
  position: absolute;
  width: 34.492vw;
  height: 35.903vh;
  top: 48.264vh;
  left: 32.773vw;
}

.text-wrapper-3 {
  top: 18.333vh;
  left: 43.75vw;
  position: fixed;
  width: 11.719vw;
  height: 30.139vh;
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  font-style: normal;
  color: #d3d3d3;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
}

.text-wrapper-4 {
  top: 51.528vh;
  left: 43.75vw;
  position: fixed;
  width: 11.719vw;
  height: 30.139vh;
  font-family: "Mochiy Pop One", serif;
  font-weight: 400;
  font-style: normal;
  color: #d3d3d3;
  font-size: 11.719vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
  text-align: center;
}
.chapter {
  top: 49.653vh;
  left: 46.875vw;
  position: fixed;
  width: 6.25vw;
  height: 2.917vh;
  font-family: "loretta", serif;
  font-weight: 600;
  font-style: normal;
  color: #d3d3d3;
  font-size: 1.406vw;
  text-align: center;
}
.frame .connection {
  position: absolute;
  width: 7.734vw;
  height: 1.875vh;
  top: 35vh;
  left: 28.398vw;
  font-family: "loretta", serif;
  font-weight: 400;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: center;
}

.frame .trade {
  position: absolute;
  width: 7.734vw;
  height: 1.875vh;
  top: 26.736vh;
  left: 61.523vw;
  font-family: "loretta", serif;
  font-weight: 400;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: center;
}

.frame .commerce {
  position: absolute;
  width: 7.734vw;
  height: 1.875vh;
  top: 43.472vh;
  left: 60.859vw;
  font-family: "loretta", serif;
  font-weight: 400;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: center;
}

.frame .narrow {
  position: absolute;
  width: 7.734vw;
  height: 1.875vh;
  top: 60.417vh;
  left: 29.063vw;
  font-family: "loretta", serif;
  font-weight: 400;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: center;
}

.frame .dangerous {
  position: absolute;
  width: 7.734vw;
  height: 1.875vh;
  top: 77.083vh;
  left: 32.266vw;
  font-family: "loretta", serif;
  font-weight: 400;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: center;
}

.frame .bad-infrastructure {
  position: absolute;
  width: 7.734vw;
  height: 1.875vh;
  top: 68.819vh;
  left: 62.188vw;
  font-family: "loretta", serif;
  font-weight: 400;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: center;
}

.frame .buildings-will-soar {
  position: absolute;
  width: 17.5vw;
  top: 45.903vh;
  left: 16.758vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  z-index: 10000;
  transition: color 1.2s ease;
}
.buildings-will-soar:hover {
  color: #d3d3d3;
  cursor: pointer;
}

.frame .the-streets-are {
  position: absolute;
  width: 15.859vw;
  top: 20.556vh;
  left: 8.398vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  transition: color 1.2s ease;
}
.the-streets-are:hover {
  color: #d3d3d3;
  cursor: pointer;
}
.frame .in-this-lively-place {
  position: absolute;
  width: 20.555vw;
  top: 72.708vh;
  left: 8.398vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  transition: color 1.2s ease;
}
.in-this-lively-place:hover {
  color: #d3d3d3;
  cursor: pointer;
}

.frame .about-a-promise-of {
  position: absolute;
  width: 17.148vw;
  top: 79.583vh;
  left: 74.453vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: right;
  transition: color 1.2s ease;
}
.about-a-promise-of:hover {
  color: #d3d3d3;
  cursor: pointer;
}

.frame .it-suffers-from {
  position: absolute;
  width: 12.891vw;
  top: 28.958vh;
  left: 78.711vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: right;
  transition: color 1.2s ease;
}
.it-suffers-from:hover {
  color: #d3d3d3;
  cursor: pointer;
}
.frame .still-they-keep {
  position: absolute;
  width: 18.016vw;
  top: 56.111vh;
  left: 71.485vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 400;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 1.903vh;
  text-align: right;
  transition: color 1.2s ease;
}
.still-they-keep:hover {
  color: #d3d3d3;
  cursor: pointer;
}

/* Frame 2 styling */
.frame,
.frame2 {
  position: relative;
  z-index: 1; /* Ensure frames are above the canvas */
  width: 100%;
  min-height: 100vh; /* Ensure frames are tall enough to scroll */
}
.frame2 {
  background-color: transparent;
  width: 100%;
  position: relative; /* Position frame2 below frame */
  z-index: 1; /* Keep it below frame */
  transition: opacity 0.5s ease;
}
#frame2 {
  opacity: 0;
  pointer-events: none; /* Prevent interaction when not visible */
}

.frame2 .div2 {
  background-color: transparent;
  position: relative;
  pointer-events: none;
}

.frame2 .nguy-n-duy-trinh {
  position: absolute;
  width: 26.484vw;
  top: 23.472vh;
  left: 16.797vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 300;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 3.681vh;
  pointer-events: fill;
  transition: color 1.2s ease;
}
.nguy-n-duy-trinh:hover {
  color: black;
  cursor: pointer;
}

.frame2 .yet-amidst-the-city {
  position: absolute;
  width: 24.414vw;
  top: 41.806vh;
  left: 58.789vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 300;
  font-style: italic;
  color: #d3d3d3;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: 3.681vh;
  text-align: right;
  pointer-events: fill;
  transition: color 1.2s ease;
}

.yet-amidst-the-city:hover {
  color: black;
  cursor: pointer;
}
.frame2 .develop {
  position: absolute;
  width: 17.148vw;
  top: 75.972vh;
  left: 16.797vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 600;
  font-style: italic;
  color: #000000;
  font-size: 0.938vw;
  letter-spacing: 0;
  line-height: normal;
}

.frame2 .undeveloped {
  position: absolute;
  width: 17.148vw;
  top: 24.306vh;
  left: 66.133vw;
  background-blend-mode: hard-light;
  font-family: "loretta", serif;
  font-weight: 600;
  font-style: italic;
  color: #000000;
  font-size: 0.938vw;
  text-align: right;
  letter-spacing: 0;
  line-height: normal;
}