#typeDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100px; /* Fixed height to fit two span elements */
  line-height: 1.5; /* Adjust line height for spacing */
}

#typeDiv span {
  display: block;
  width: 100%;
  text-align: center;
  min-height: 24px; /* Reserve space for each span */
}

#txt1 {
  font-size: 16px;
  text-align: center;
  color: white;
}
#txt2 {
  font-size: 16px;
  text-align: center;
  color: white;
}

#together {
  font-size: 25px;
  text-align: center;
  color: white;
}

#timer {
  text-align: center;
  color: white;
}

#d {
  font-size: 19px;
}

#h {
  font-size: 19px;
}

#m {
  font-size: 19px;
}

#s {
  font-size: 19px;
}

#heartTxt {
  margin: auto;
  width: 50%;
  height: 10%;
}

#clickMe {
  display: inline-block;
  font-size: 16px;
  width: 100%;
  text-align: center;
  color: white;
}

#heart {
  width: 100%;
  height: auto;
}

#button {
  background-image: url("/pics/love.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  border: none;
  outline: none;
  background-position: center;
  transition: 0.1s;
  width: 100%;
  height: 100%;
}

#button:active {
  width: 92%;
  height: 92%;
}

/* Styles for Mobile Screens */

/* Default Styles for Laptop Screens */
#imgTxt {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
  width: 100%;
  height: auto;
  max-width: 20%; /* Smaller max-width for larger screens */
  max-height: 30%; /* Smaller max-height for larger screens */
}

@media (max-width: 600px) {
  #imgTxt {
    position: absolute;
    top: 20%;
    left: 0;
    right: 0;
    margin: auto;
    width: 80vw;
    height: 70vh;
    max-width: none;
    max-height: none;
  }
}

#img {
  display: block;
  margin: auto;
  max-width: 100%; /* Maximum width, but allows it to be smaller */
  min-height: 100px; /* Minimum height */
  width: auto; /* Adjust width automatically */
  height: auto; /* Adjust height automatically */
  object-fit: contain; /* Maintain aspect ratio */
}

#Txt {
  display: inline-block;
  font-size: 17px;
  width: 100%;
  text-align: center;
  color: white;
}

#tmp {
  display: inline-block;
  font-size: 17px;
  width: 100%;
  text-align: center;
  color: white;
}

#newPage {
  position: absolute;
  vertical-align: middle;
  top: 20%;
  left: 0;
  right: 0;
  margin: auto;
  width: 80%;
  height: 50vh;

  border: 2px solid white; /* White border */
  border-radius: 15px; /* Rounded corners */
  padding: 20px; /* Padding inside the box */
  background-color: rgba(
    255,
    255,
    255,
    0.8
  ); /* Slightly transparent white background */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Optional: Adds a subtle shadow */
  opacity: 0; /* Initial opacity as per your style */
  transition: opacity 0.5s ease-in-out; /* Smooth transition for opacity changes */

  overflow-y: auto; /* Enables vertical scrolling */
}

#newPage p {
  display: inline-block;
  font-size: 17px;
  width: 100%;
  text-align: center;

  /* Additional text styling as needed */
}

#overlay {
  position: fixed; /* Overlay takes the whole screen */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */
  display: flex;
  justify-content: center; /* Center the button horizontally */
  align-items: center; /* Center the button vertically */
  z-index: 1000; /* Ensure it's above other content */
}

#startButton {
  padding: 10px 20px;
  font-size: 20px;
  cursor: pointer;
}

#canvasContainer {
  position: relative;
  width: 100vw; /* 100% of the viewport width */
  height: 100vh; /* 100% of the viewport height */
}

#myCanvas {
  width: 100%; /* or your specific dimensions */
  height: 100%; /* or your specific dimensions */
}