.card {
   border-radius: 15px;
   /* Establece el radio del borde */
   overflow: hidden;


   border-radius: 20px;
   border-color: #2c2c2c;
   background-color: rgba(26, 26, 26, 0.5);
   /* Fondo semi-transparente */
   backdrop-filter: blur(10px);
   /* Desenfoque de 10px, ajusta según desees */
   /* Oculta el contenido que sobresale */
}


.cardd {
   border-radius: 13px;
   transition: background-color 0.2s;

}

.post-image {
   width: 100%;
   /* Ajusta la imagen al ancho del card */
   border-radius: 15px 15px 0 0;
   /* Establece el radio del borde solo en las esquinas superiores */
}

.card-content {
   padding: 15px;
   /* Agrega un relleno al contenido del card */
}

body {
   background-color: #0C0C0C;
}

.navbar {
   background-color: #100f10;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   /* Evita que la imagen se repita */
}

.swal2-popup {
   font-size: 10px;
}



.form-control {
   background-color: #100f10;
   border-radius: 5px;
   /* Agrega un borde redondeado */
   padding: 0.5rem 1rem;
   /* Agrega relleno interno */
   width: 100%;
   /* Ocupa todo el ancho disponible */
   box-sizing: border-box;
   /* Incluye el relleno y el borde en el ancho total */
   color: #B8ACF6;
   /* Color del texto */
}

.navbar-nav .nav-link {

   /* Color de texto predeterminado */
   transition: .2s;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
   /* Sombra de texto predeterminada */
}

.navbar-nav .nav-link:hover {
   color: #B8ACF6;
   /* Color de texto al hacer hover */
   text-shadow: none;
   /* Quita la sombra de texto al hacer hover */
}


.overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   /* Ajusta el valor alpha para cambiar la opacidad */
   pointer-events: none;
   /* Evita que la capa capture eventos del ratón */
}

.btn {
   border-radius: 10px;
}


::selection {
   background-color: #B8ACF6;

   color: #000000;

}

::-moz-selection {
   background-color: #B8ACF6;

   color: #000000;

}

@media (min-width: 768px) {
   .container-small {
      width: 300px;
   }

   .container-medium {
      width: 600px;
      /* Puedes ajustar este valor según tus necesidades */
   }

   .container-large {
      width: 970px;
   }
}

@media (min-width: 992px) {
   .container-small {
      width: 500px;
   }

   .container-medium {
      width: 800px;
      /* Puedes ajustar este valor según tus necesidades */
   }

   .container-large {
      width: 1170px;
   }
}

@media (min-width: 1200px) {
   .container-small {
      width: 700px;
   }

   .container-medium {
      width: 1000px;
      /* Puedes ajustar este valor según tus necesidades */
   }

   .container-large {
      width: 1500px;
   }
}

.container-small,
.container-medium,
.container-large {
   max-width: 100%;
}


footer {
   position: relative;
   text-align: center;
   color: #8E8E8E;
   margin-top: 0;
   z-index: 10;
   padding: 4em;
   padding-top: 1em;
}


.truncate {
   overflow: hidden;
   position: relative;
   filter: blur(2px);
   z-index: -1;

}

.fade-out {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 100%;
   backdrop-filter: blur(1px);
   background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #131313);

   /* Desvanecimiento gradual */
}

a {
   color: #B8ACF6;
}

.link-discovery {
   color: #c7bdfc !important;
}

.form-control:focus {
   border-color: #6e5dc6 !important;
}

@media (max-width: 1000px) {
   .escritorio {
      display: none;
   }
}

@media (min-width: 1000px) {
   .movil {
      display: none;
   }
}

/* Estilos para el reproductor de álbumes */
.btn-white {
   background-color: #100f10;
   color: #B8ACF6;
   transition: .2s;
   text-align: left;
   width: 100%;
   border: none;
}

.btn-white:hover {
   background-color: #1a1a1a;
   color: #c7bdfc;
}

.btn-discovery {
   background-color: #6e5dc6 !important;
   color: #fff !important;
}

.btn-repeat {
   background-color: #100f10;
   color: #B8ACF6;
   transition: .2s;
}

.btn-repeat:hover {
   background-color: #1a1a1a;
   color: #c7bdfc;
}

.btn-repeat.btn-discovery {
   background-color: #6e5dc6 !important;
   color: #fff !important;
}

.btn-subtle {
   padding: 0.5rem 1rem;
}

.list-group-item {
   background: transparent;
   border: none;
   padding: 5px 0;
}