/* 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-color: black;
  color: white;
  font-family: 'Quicksand', sans-serif;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.image-gallery-fixed {
  position: fixed;       /* Keeps it locked to the viewport */
  bottom: 20px;          /* Distance from the very bottom edge */
  left: 50%;             /* Move the left edge to the middle of the screen */
  transform: translateX(-50%); /* Perfectly offsets the container back to center */
  
  display: flex;         /* Arranges images in a horizontal row */
  gap: 15px;             /* Spacing between the images */
  z-index: 999;          /* Ensures images stay on top of other content */
}

.fixed-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding: 45px 0;
}


.sharp-image {
  /* For Firefox */
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
  
  /* For Chrome, Edge, and Safari */
  image-rendering: pixelated;
}


.audio-player {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  font-family: sans-serif;
}

.audio-player button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: white;
  font-size: 15px;
  cursor: pointer;
}

.audio-player button:hover {
  opacity: 0.7;
}

.audio-player span {
  color: white;
  font-size: 16px;
}

.audio-player audio {
  display: none;
}