/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  background-image: url("P1010142.JPG");
  color: black;
  font-family: 'Helvetica', sans-serif;
}


/*Link colors-------------------------------------------------------------------------------------------------------------------------------*/
a:link {
  color: #4040bf; /* Color of unvisited links (e.g., red) */
}

a:visited {
  color: #262673; /* Color of visited links (e.g., green) */
}

a:hover {
  color: #FFA500; /* Color when the user mouses over the link (e.g., orange) */
}

a:active {
  color: green; /* Color when the link is clicked (e.g., blue) */
}


/*Font classes-------------------------------------------------------------------------------------------------------------------------------*/
.h3 {
  font-family: "Lucida Handwriting", cursive;
  font-size: 25px;
  margin-bottom: -10px;
}

.h1 {
  font-family: "Lucida Handwriting", cursive;
  font-weight: bold;
  font-size: 43px;
}

.p2 {
  font-family: "Courier New", monospace;
}

/*Format elements-------------------------------------------------------------------------------------------------------------------------------*/
.mainbody {
  top: 50px;
  position: relative;
  
  width: 70%;
  height: 600px;
  background-color: rgba(255, 255, 255, 0.7);
  
  padding: 0px;
  box-sizing: border-box;
  
  border: 6px ridge gold;
  text-align: center;
  font-size: 17px;
}

.bottomleft {
  text-align: left;
  position: absolute;
  top: 250px;
  left: 50px;
}

.bottomright {
  text-align: right;
  position: absolute;
  top: 250px;
  right: 50px;
}

.centerbottom {
  display: flex;
  justify-content: center;
  position: absolute;
  bottom: -25px;
}

.centerimg {
  display: flex;
  justify-content: center; /* Centers horizontally */
  top: 20px;
  height: 200px;           /* Example height for the container */
}


#panda {
  border: 6px ridge gold;
  border-radius: 4px;
  opacity: 1.0;
}

#roseleft {
  display: flex;
  z-index: 2;
  justify-content: center; /* Centers horizontally */
  top: 20px;
  height: 200px;           /* Example height for the container */
}