body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f6f6f6;
    color: #333;
    
}

header {
  background-color: black; /* Grey background */
  padding: 10px 30px; /* Some padding */
  color: white;
  text-align: center; /* Centered text */
  font-size: 20px; /* Big font size */
  font-weight: bold;
  text-shadow: 1px 1px 2px black, 0 0 25px #ff8300, 0 0 5px darkblue;
  background-image: url("header.jpg");

}

h1 {
    margin: 0;
}

main {
    padding: 2em;
    max-width: 1600px;
    margin: auto;
}

h2 {
    
    padding-bottom: 0.5em;
}

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

li {
    margin: 0.5em 0;
}

.yt {
    aspect-ratio: 16 / 9;
  width: 100%;
}

a {
    text-decoration: none;
    color: #007BFF;
}

a:hover {
    text-decoration: underline;
}

footer {
    text-align: center;
    padding: 0,5em 0;
    background-color: #222;
    color: white;
    margin-top: 1em;
   
}
.category {
            margin-top: 50px;
            margin-bottom: 2em;
            border: 1px solid #cccccc;
            padding: 20px;
            background-color:white;
            border-radius:10px;
            box-shadow: 10px;
        }
        .pdf-container {
            margin-top: 20px;
            border: 1px solid #cccccc;
            padding: 10px;
            display: none;
        }
        .pdf-container > embed {
            width: 100% !important;
            height: 500px !important;
        }
        .category h2 {
            margin-top: 0px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        
        .category ul {
            padding: 0;
        }
        .category ul li {
            margin-bottom: 20px;
        }
        .category ul li:last-child {
            margin-bottom: 0;
        }
        .category ul li:not(a) {
            margin-top: 0;
        }
        
.mapa {
    
 
  width: 100%;
  aspect-ratio: 1 / 1;

}

  
  
.player-container {
      background: white;
      padding: 20px;
      margin-bottom: 40px;
      border-radius: 10px;
     
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }

    audio {
      width: 100%;
      margin-top: 1em;
    }

    h3 {
      margin: 0 0 10px;
    }

    .sliders {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
  width: 100%;
  gap: 12px;
  margin-top: 20px;
  overflow-x: auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.slider-group {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slider {
  writing-mode: vertical-lr;
  -webkit-appearance: slider-vertical;
  appearance: slider-vertical;
  width: 100%; /* Width of the "bar" */
  height: 150px;
  background: transparent;
}

.slider::-webkit-slider-thumb {
  background: #007BFF;
}

.slider-label {
  margin-top: 0.5em;
  font-size: 0.75em;
  text-align: center;
  white-space: nowrap;
}