/* style.css */

body {

  font-family: Arial, sans-serif;

  background: #111;

  color: #fff;

  padding: 20px;

}



h1 {

  text-align: center;

  margin-bottom: 30px;

}



h1 .h1-sub {

  font-size: 14px;

  font-style: italic;

  font-weight: normal;

}



.categories {

  display: flex;

  flex-wrap: wrap;

  gap: 20px;

  justify-content: center;

}



.category {

  background-color: #222;

  border-radius: 8px;

  padding: 15px;

  width: 100%;

  max-width: 400px;

  box-shadow: 0 0 10px rgba(0,0,0,0.5);

}



.category h2 {

  color: #0cf;

  margin-top: 0;

}



.track {

  margin: 10px 0;

/*  cursor: pointer;*/

  color: #0f0;

/*  text-decoration: underline;*/

}



audio {

  display: block;

  width: 100%;

  margin-top: 5px;

}



@media  screen and (max-width: 600px){

  

  .category {

    width: 100%;

  }

}