/* General styles */
body {
  margin: 0;
  padding: 0;
  background-color: #D9FBFD; /* Uniform light blue background */
  font-family: 'Lora', serif; /* Lora with a serif fallback */
}

.container {
  width: 100%; /* Adjusted to take full width */
  margin: 0 auto; /* Center the container with no horizontal margin */
}

.header {
  position: relative; /* Allows absolute positioning of elements inside */
  text-align: center;
  padding: 0;
}

.banner-image {
  width: 100%; /* Ensures the image takes full width */
  height: 200px; /* Fixed height */
  object-fit: cover; /* Ensures the image covers the area without distorting aspect ratio */
}

.banner-trees {
  position: absolute;
  top: 0; /* Align to the top of the header */
  left: 0; /* Align to the left of the header */
  width: 100%; /* Ensures the overlay image takes full width */
  height: 200px; /* Fixed height to match the banner */
  object-fit: cover; /* Ensures the image covers the area without distorting aspect ratio */
}

.logo-image {
  position: absolute;
  top: 50%; /* Center vertically */
  left: 50%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust to exact center */
  width: 250px; /* Adjusted width */
  height: auto; /* Adjusted height for auto-scaling */
}

.flag-icon {
  position: absolute;
  top: 10px; /* Adjust as necessary */
  right: 10px; /* Adjust as necessary */
  width: 32px; /* Size of the flag icon */
  height: auto; /* Maintain aspect ratio */
  cursor: pointer; /* Indicates the icon is clickable */
}

.logo-text {
  position: absolute;
  top: 50%;
  left: 130px;
  transform: translate(-50%, -50%);
  width: 200px; /* Adjusted width */
  height: auto; /* Adjusted height for auto-scaling */
  object-fit: contain;
}

.navbar {
  display: flex;
  justify-content: flex-start;
  background-color: #333;
  overflow: visible; /* Ensure dropdown is not clipped */
}

.navbar a, .dropbtn {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  z-index: 100;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.content {
  background: white;
  padding: 20px;
  margin-top: 0;
}

.salto-angel-image {
  max-width: 340px; /* Half of the width based on your provided link's width parameter */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Ensures it doesn't inline with other content by default */
  margin: 20px auto; /* Centers the image horizontally and adds vertical space */
}

/* Specific styles for the cute gif */
.cute-gif {
  max-width: 25%; /* Reduce size to half of its original container's width */
  height: auto; /* Maintains aspect ratio */
  display: block; /* Ensures it doesn't inline with other content by default */
  margin: 20px auto; /* Centers the image horizontally and adds vertical space */
}

/* Additional style for <pre> tags */
pre {
  white-space: pre-wrap;
  word-wrap: break-word;
  background-color: #f4f4f4;
  padding: 15px;
  border-radius: 5px;
  border: 1px solid #ccc;
  margin-top: 20px;
  font-family: 'Lora', serif;
}