div {

   text-align: center;

 }

 body {
   background-color: black;
   margin-top: 0px;
   align-items: center;
 }


 .header-musicBot {

   background-color: white;
   margin-top: 6px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   text-align: center;
   width: 100%;
   align-items: center;

 }

 .header-abc {

   background-color: black;
   margin-top: 6px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   text-align: center;
   width: 100%;
   align-items: center;

 }

 .centerDiv {

   background-color: rgb(12, 136, 245);
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   text-align: center;
   width: 100%;
   align-items: center;
   z-index: 1;
   color: white;
   /* Color blanco para el texto */
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .centerDiv {
     background-color: rgb(12, 136, 245);
     margin-top: 0px;
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 0px;
     text-align: center;
     max-width: 76%;
     align-items: center;
     z-index: 1;
     color: white;
     /* Color blanco para el texto */
   }
 }

 .centerDiv-musicBot {

   background-color: rgb(12, 136, 245);
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   text-align: center;
   width: 100%;
   align-items: center;
   z-index: 1;
   color: white;
   /* Color blanco para el texto */
   padding-top: 3px;
   /* Elimina el relleno predeterminado del cuerpo */

 }

 .centerDiv-abc {

   background-color: rgb(12, 136, 245);
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   text-align: center;
   width: 100%;
   align-items: center;
   z-index: 1;
   color: white;
   /* Color blanco para el texto */
   padding-top: 3px;
   /* Elimina el relleno predeterminado del cuerpo */

 }

 .seccionDiv {

   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 0px;

 }

 .seccionDiv-musicBot {

   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 0px;

 }

 .seccionDiv-abc {

   margin-top: 0px;
   margin-left: 10px;
   margin-right: 10px;
   margin-bottom: 0px;
   max-width: 100%;
   width: auto;
   text-align: center;
   align-items: center;

 }

 .seccionHidden {

   display: none;
   /* Oculto por defecto */
   position: fixed;
   /* Posición fija */
   top: 0;
   /* Posicionado en la parte superior */
   left: 0;
   /* Posicionado en la izquierda */
   width: 90%;
   /* Ancho casi completo */
   height: 90%;
   /* Altura casi completa */
   z-index: 99;
   /* Superposición a los demás elementos */
   background-color: rgba(0, 0, 0, 0.5);
   /* Fondo translúcido */

 }

 .modal {
   display: none;
   /* Oculto por defecto */
   position: fixed;
   /* Posición fija */
   top: 0;
   /* Posicionado en la parte superior */
   left: 0;
   /* Posicionado en la izquierda */
   width: 90%;
   /* Ancho casi completo */
   height: 90%;
   /* Altura casi completa */
   z-index: 100;
   /* Superposición a los demás elementos */
   background-color: rgba(0, 0, 0, 0.5);
   /* Fondo translúcido */
 }

 .modal-content {
   background-color: #fff;
   /* Fondo blanco */
   margin: 10% auto;
   /* Márgenes para centrar */
   padding: 20px;
   /* Relleno */
   border-radius: 10px;
   /* Bordes redondeados */
 }

 .btn-cerrar {
   float: right;
   /* Posición a la derecha */
   margin-top: 10px;
   /* Margen superior */
   padding: 5px 10px;
   /* Relleno */
   border: 1px solid #ccc;
   /* Borde */
   border-radius: 5px;
   /* Bordes redondeados */
   cursor: pointer;
   /* Cursor de mano */
 }

 .btn-cerrar:hover {
   background-color: #ccc;
   /* Color de fondo al pasar el cursor */
 }


 h1 {
   font-family: Arial;
 }

 h2 {
   font-family: Arial;
 }

 .h3 {
   font-family: Arial;
 }

 h4 {
   font-family: Arial;
 }

 h5 {
   font-family: Arial;
 }

 h6 {
   font-family: Arial;
 }

 p {
   font-family: Arial;
   margin-left: 5%;
   margin-right: 5%;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   p {
     font-family: Arial;
     margin-left: 25%;
     margin-right: 25%;
   }
 }

 .p-musicBot {
   font-family: Arial;
   margin-left: 10%;
   margin-right: 10%;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .p-musicBot {
     font-family: Arial;
     margin-left: 25%;
     margin-right: 25%;
   }
 }

 .p-abc {
   font-family: Arial;
   margin-left: 10%;
   margin-right: 10%;
 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .p-abc {
     font-family: Arial;
     margin-left: 25%;
     margin-right: 25%;
   }
 }

 a {
   font-family: Arial;
   font-style: italic;
   align-items: center;
   text-decoration: none;
   /* Para quitar el subrayado predeterminado */
   color: white;
   /* Color blanco para los enlaces no visitados */
 }

 a:visited {
   color: white;
   /* Color blanco para los enlaces visitados */

 }

 .mixcloud-player {
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   width: 100%;
   height: 60px;
   border: 3px solid white;

 }

 @media (min-width: 768px) {

   .mixcloud-player {
     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     width: 100%;
     height: 120px;
     border: 3px solid white;

   }

 }

 .spotify-player {

   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   margin-bottom: 0px;
   width: 100%;
   border-radius: '12px';
   border: 3px solid white;
   background-color: rgb(18, 18, 18);

 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .spotify-player {

     margin-top: 0px;
     margin-left: 0px;
     margin-right: 0px;
     margin-bottom: 0px;
     max-width: 60%;
     border-radius: '12px';
     border: 3px solid white;
     background-color: rgb(18, 18, 18);

   }
 }

 .spotify-player-release {

   width: 100%;
   border: 3px solid white;
   border-radius: 12px;

 }

 @media (min-width: 768px) {

   /* Estilos para pantallas más grandes (escritorio) */
   .spotify-player-release {

     max-width: 100%;
     border: 3px solid white;
     border-radius: 12px;

   }
 }

 video {

   border: 3px solid white;

 }

 /*
 .album-containers {
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  align-items: center;
}
*/
 .footer-container {
   background-color: rgb(12, 136, 245);
   margin-top: 0px;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 0px;
   text-align: center;
   width: 100%;
   align-items: center;
   z-index: 1;
   color: white;
   /* Color blanco para el texto */
 }

 /* Estilos para el indicador de carga */
#loading-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.loading-spinner {
  border: 4px solid #f3f3f3;
  border-top: 4px solid #3498db;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: 20% auto;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.loading-text {
  text-align: center;
  margin-top: 20px;
  font-size: 18px;
}

.btn {
  display: inline-flex; /* Cambiado a inline-flex */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  padding: 10px 20px 10px 10px; /* Ajustado para añadir más espacio a la derecha */
  font-size: 16px;
  color: #fff;
  background-color: #007BFF;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn:hover {
  background-color: #0056b3;
}

.btn-back {
  display: inline-flex; /* Cambiado a inline-flex */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  padding: 10px 0px 10px 10px; /* Ajustado para añadir más espacio a la derecha | top right bottom left */
  font-size: 16px;
  color: #fff;
  background-color: #000000;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-back:hover {
  background-color: #3d3d3d;
}

.btn-more {
  display: inline-flex; /* Cambiado a inline-flex */
  align-items: center; /* Centrar verticalmente */
  justify-content: center; /* Centrar horizontalmente */
  padding: 10px 10px 10px 10px; /* Ajustado para añadir más espacio a la derecha | top right bottom left */
  font-size: 16px;
  color: #fff;
  background-color: #000000;
  border: none;
  border-radius: 5px;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.btn-more:hover {
  background-color: #3d3d3d;
}

.material-icons {
  margin-right: 5px; /* Espacio entre el icono y el texto */
}