/* Last Updated 10-23-2024 */
body {
	font-family: Arial, sans-serif;
	font-size: 16px;
	line-height: 25px;
	background: #43B5F7 url("images/Rainbow.jpg") top center;
}
header {
	color: #FFFFFF;
	text-align: center;
	background: #b30083 url("images/Rainbow_World.jpg") no-repeat top center;
	height: 325px;
	padding: 20px;
}
nav {
	text-align: center;
	background-color: #ff73d5;
	border-bottom: 2px solid #ff9c9c;
	border-top: 2px solid #ff9c9c;
	padding-bottom: 4px;
	padding-top: 10px;
}
/* The space between hyper linked buttons */
nav a {
	padding-left: 10px;
	padding-right: 10px;
}
/* The float CSS property places an element on the left or right side
 of its container, allowing text and inline elements to wrap around it. */
aside {
	float: right;
	font-size: 14px;
	text-align: center;
	padding: 20px;
	width: 210px;
}
/* The float CSS property places an element on the left or right side
 of its container, allowing text and inline elements to wrap around it. */
article {
	float: left;
	overflow: auto;
	text-align: justify;
	padding: 20px;
	width: 710px;
}
/*A container is for styling the entire width of a section. 
A wrapper is for styling and centering the max-width content inside it.*/
#wrapper {
	background-color: #BAE4FF;
	border: 2px solid #00b7ba;
	margin: auto;
	width: 1000px;
}
footer {
	clear: both;
	color: #FFFFFF;
	text-align: center;
	background-color: #ffa673;
	border-top: 2px solid #459302;
	padding-top: 4px;
	padding-bottom: 2px;
}
/*The hyper-links in the footer*/
footer a {
	color: #FFFFFF;
	text-decoration: none;
}
/*The footer h6 heading only*/
footer h6 {
	margin: 0;
}
/*water activities and lodging girls pic*/
.alignleft {
	float: left;
	padding-right: 20px;
}
/*horseback riding, dining, and lodging boy*/
.alignright {
	float: right;
	padding-left: 20px;
}
/*register page only*/
form span {
	float: left;
	width: 200px;
}
/*water activities and dining only repeat external, internal, and in line*/
th, td {
	text-align: center;
	padding-left: 5px;
	padding-right: 5px;
}
/*index page paragraph*/
.quote_author {
	color: #459302;
	font-style: italic;
}
/*any h1 header*/
header h1 {
	margin: 0;
}

@keyframes flash-fade {
    0% { opacity: 1; }      /* Start visible */
    25% { opacity: 0; }     /* First flash off */
    50% { opacity: 1; }     /* First flash on */
    75% { opacity: 0; }     /* Second flash off */
    100% { opacity: 0; }    /* End hidden */
}

/* Apply the animation to the image */
.flash-and-fade {
    animation-name: flash-fade;         /* The name of our animation */
    animation-duration: 2s;             /* The total time the animation takes */
    animation-iteration-count: 1;       /* Run only once */
    animation-fill-mode: forwards;      /* Crucial: ensures the final state (opacity: 0) persists after the animation finishes */
    width: 500px; /* Optional: adjust as needed */
    height: auto;
}

.image-container {
  /* This creates a positioning context for the absolute children */
  position: relative;
  /* Optional: Ensure the container doesn't collapse if images are removed */
  display: inline-block;
}

.background-image {
  /* Keeps the image in the normal document flow and sizes the container */
  position: relative;
  top: 0;
  left: 0;
}

.overlay-image {
  /* Removes this image from the document flow for precise placement */
  position: absolute;
  /* Position it relative to the top-left corner of the container */
  top: 10px;    /* Adjust for desired vertical position */
  left: 10px;  /* Adjust for desired horizontal position */
  /* Ensure it is on top (higher z-index value means it's closer to the viewer) */
  z-index: 1;
  /* Optional: adjust size */
  width: 620px;
  height: 480px;