body{
    background-color: black;
}

.bg-dark-custom {
    background-color: #171717; /* Puedes ajustar este color según tus preferencias */
}

.container-fluid {
    max-width: 1510px; /* Puedes ajustar este valor según tus necesidades */
    margin-right: auto;
    margin-left: auto;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
}

.navbar {
    padding-bottom: 7px;
    margin-top: 10px;
}

.bg-secondarybutton {
    background-color: #ffffff; 
    padding: 12px 33px !important; 
}

.rounded-pill {
    border-radius: 50px; 
}

.rounded-pillBarra {
    border-radius: 10px; 
}
.botones{
    padding-right: 30px;

}
/*
.buttonA{
    margin-right: 24px;
    padding-top: 12px;
}
*/

.col-lg-3{
    padding-right: 7px;
    padding-left: 8px;

}

.col-lg-9{
    padding: 0;
    padding-right: 7px;
}

.list-unstyled{
    font-size:small;
    padding-left: 10px;
    padding-top: 45px;
}

.footer-wrapper {
    background-color: #171717; 
    padding: 10px; 
    border-radius: 10px;
    margin-top: 10px; 
}
.footer{
    margin: 0; 
}

.footer a {
    color: gray; 
    text-decoration: none; 
}

.footer a:hover {
    color: gray; 
    text-decoration: none; 
}

.footer ul {
    display: flex;
    flex-wrap: wrap; 
    gap: 20px;
}

.rounded-pillBtn {
    border: 0.5px solid white;
    border-radius: 50px; 
    padding: 6px 15px; 
    display: inline-block; 
    text-decoration: none; 
    font-size: 13px;

}

.btnIdioma{
    padding-top: 20px;
}

.text-gray{
    color: gray;
}

.btnLista{
    background-color: white;
}
.bg-gray{
    background-color: rgb(42, 41, 41);
}

.biblioteca{
    padding-bottom: 20px;
}

.textoEtiqueta1{
    padding-top: 20px;
    padding-left: 20px;
}

.textoEtiqueta2{
    padding-top: 0px;
    padding-left: 20px;
}

.footerFinal{
    text-align: left;
}

.gradient-bg {
    background: linear-gradient(to right, #aa2e9a, #718bda); /* Cambia los colores según tus preferencias */
}

<!-- Nuevo-->

.scroll {
    overflow-y: auto;
    max-height: calc(100vh - 60px); /* Ajusta la altura según sea necesario, restando el espacio del encabezado */
}

.scroll-horizontal {
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 10px; /* Agrega un poco de espacio inferior para evitar que el contenido se solape con la barra de desplazamiento */
}

.artista-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrar horizontalmente */
    justify-content: center; /* Centrar verticalmente */
    padding: 10px;
    padding-top: 10px;
}

.artista-item img:hover {
    transform: scale(1.1); /* Cambia el valor según la cantidad que desees agrandar la imagen */
    transition: transform 0.3s ease; /* Agrega una transición suave para que el cambio de tamaño sea más gradual */

}

.artista-item img:hover {
    transform: scale(1.1); /* Cambia el valor según la cantidad que desees agrandar la imagen */
    transition: transform 0.3s ease; /* Agrega una transición suave para que el cambio de tamaño sea más gradual */
  }

.container-principal { /*borde del contenedor de artistas*/
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    margin-top: 10px; /* Ajusta este valor según sea necesario */
}

/* Agregamos margen a los elementos dentro del main */
#main > header,
#main > .scroll {
    margin: 7px;
}