.side-caption-figure {
  display: flex; /* Aligns children (img and figcaption) horizontally */
  align-items: center; /* Vertically centers the items within the figure */
  gap: 1em; /* Adds some space between the image and the caption */
  margin: 0; /* Optional: Resets default figure margins */
  padding: 1em; /* Optional: Adds some internal padding */
  max-width: 600px; /* Optional: Limits the total width of the figure */
}

body,h1,h2,h3,h4,h5,h6,p {font-family: "Arial", sans-serif}
.w3-navbar,h1,button {font-family: "Arial", sans-serif}
.fa-anchor,.fa-coffee {font-size:150px}
 ul {background-color: #e31838;}
 a:hover {color: black}

 hr.rounded {
  border-top: 10px solid #bbb;
  border-radius: 0px;
  width:100%;
  display: inline-block;
  vertical-align:center;
}

.center-figure {
  display: block;   /* figure is a block-level element by default, but this ensures it */
  margin-left: auto;
  margin-right: auto;
  width: 50%;       /* Set a specific width */
}

.container {
  display: flex; /* Aligns child elements side by side */
  justify-content: space-between; /* Optional: Distributes space between elements */
  align-items: center; /* Optional: Vertically centers content */
  width: 100%; /* Ensures the container uses the full width */
}

.text-half {
  flex: 1; /* Makes this div take up equal space */
  padding: 20px; /* Adds some space around the text */
}

.image-half {
  flex: 1; /* Makes this div take up equal space */
  padding: 20px; /* Adds some space around the image */
}

.image-half img {
  max-width: 100%; /* Ensures the image is responsive and stays within its container */
  height: auto; /* Maintains the image's aspect ratio */
  display: block; /* Helps with alignment and margin issues */
}

/* Media query for responsiveness (optional: stacks content on smaller screens) */
@media (max-width: 620px) {
  .container {
    flex-direction: column; /* Stacks items vertically on small screens */
  }
}

.audio-player {
    width: 100%; /* Adjust the width of the entire control bar */
    border: 1px solid #ccc;
    border-radius: 5px; /* Adds rounded corners to the whole player */
    padding: 10px;
    margin: 15px 0;
    background-color: #f1f3f4; /* Changes background color */
    /* You can also use CSS filters for effects, e.g., sepia(100%) */

}