body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 20px;
}

header {
  background-color: darkblue;
  padding: 5px 0;
  text-transform: uppercase;
  font-size: larger;
}

footer {
  background-color: white;
  
}

nav ul {
  list-style-type: none;
  padding: 0;
}

nav ul li {
  display: inline;
  margin: 0 10px;
}

a {
  text-decoration: none;
  color: gray;
}

main {
  margin: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

h2 {
  color: #555;
}

ul {
  list-style-type: square;
  margin-left: 20px;
}

p {
  text-align: center;
  margin-left: 100px;
  margin-right: 100px;
  color: #777;
}

#conditionResult {
  color: red;
}


input[type="checkbox"] {
  margin-right: 10px;
  vertical-align: middle;
}

form {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff; /* Adding a white background if not present */
  width: 100%;
  max-width: 600px; /* Adjusted width */
  box-sizing: border-box; /* Include padding and border in the element's total width and height */
  text-align: left; 
}


button {
  display: block; /* Centers the button in the form */
  margin-top: 20px; /* Adds space above the button */
  padding: 10px 15px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: auto; /* Allows the button to size to its content */
}

.center-container {
  display: flex; /* Enable Flexbox */
  justify-content: center; /* Horizontally center the flex items */
  align-items: center; /* Vertically center the flex items (if needed) */
  flex-direction: column; /* Stack items vertically */
}



/* week3 edited on 1-19-24 */
label {
  display: block; /* Makes the label take the full width */
  margin-bottom: 10px; /* Adds space below the label */
}

input[type="email"], select, input[type="checkbox"] + label {
  width: calc(100% - 22px); /* Adjusts for padding and border */
  margin-bottom: 10px; /* Adds space below the input/select */
  box-sizing: border-box; /* Includes padding and border in the element's total width and height */
}

input[type="checkbox"] + label {
  display: inline-block; /* Allows the label to sit next to the checkbox */
  vertical-align: middle;
  width: auto; /* Prevents the label from taking full width */
  margin-right: 20px; /* Adds space to the right of the label */
}


button:hover {
  background-color: #0056b3;
}

/* Tooltip styles */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: lightyellow;
  color: black; 
  font-size: 0.75em; /* Adjusted Text size */
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 100%; /* Adjusted for better positioning */
  left: 50%;
  margin-left: -60px; /* Adjust as needed */
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}


/* slide styles */

div#gallery {
  display: flex;
  flex-flow: row wrap;
}

div#gallery figure {
  flex: 1 1 150px;
  margin: 5px;
  border: 1px solid black;
  background-color:hsl(129,23%,58%);
}

div#gallery figure img {
  display: block;
  width: 100%;
}

div#gallery figure figcaption {
  display: block;
  text-align: center;
  font-size: 0.85em;
  padding: 3px;
  font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}

/* Map Styles */

div#displayMap {
  width: 600px;  
  height: 400px; 
  padding-bottom: 30%;
  height: 0;
  margin: 20px auto;
  border: 3px solid gray;
}

#location-info {
  text-align: center;
  margin-top: 20px;
}

#location-info p {
  font-size: 16px;
  color: #333;
}


#cors-notice {
  background-color: red; /* Eye-catching background color */
  color: white; /* Contrast text color for readability */
  padding: 10px; /* Some padding around the text */
  margin: 10px auto; /* Margin for spacing, added auto to center the div horizontally*/
  border-radius: 5px; /* Rounded corners */
  text-align: center; /* Center the text */
  font-weight: bold; /* Bold font for urgency */
  width: 80%; /* Set the width of the div */
  max-width: 600px; /* Set a max-width if you want to limit how wide it can get */
  box-sizing: border-box; /* Ensures padding doesn't add to the total width */
  
}

#cors-notice p {
  margin: 0; /* Remove default margin of paragraph */
  font-size: 1.2em; /* Slightly larger font size */
  color: black; /* Black text for contrast */
}

#cors-notice a {
  color: yellow; /* Different color for the link for emphasis */
  text-decoration: underline; /* Underline to indicate it's a link */
}