p{
    margin-top: 10px;
    margin-left: 50px;
    margin-right: 50px;
    font-size: 40px;
    text-align: justify;
    /*font-family: cursive;*/
    font: oblique bold 350% cursive;
    color: black;
}
.container_biblia, .biblia-content {
    display: flex;
    justify-content: center;
    align-items: center;
}
.container_biblia {
    width: 100%;
    height: 100%;
    background: #78c3ee;
}
.biblia-content{
    width: 100%;
    min-width: 250px;
    max-width: 900px;
    height: 590px;
    position: relative;
    perspective: 1000px;
    transition: 0.3s;
}
.biblia, .biblia-portada{
    position: absolute;
    width: 100%;
    height: 100%;
    transition: 1s;
    transform-style: preserve-3d;
    transform-origin: left;
}
.face-front, .face-back{
    width: 100%;
    height: 100%;
    /*background: white;*/
    padding: 15px;
    box-sizing: border-box;
    overflow: hidden;
}
.face-back, .face-front{
    background: url('../../../../static/img/Lienzo-desgastado.jpg');
}
.face-back, .face-front{
    background-size: 100% 100%;
}
.face-front{
    box-shadow: inset 3px 0px 20px -7px black;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    box-shadow: inset 3px 0px 20px -7px black;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
}
.face-back{
    position: absolute;
    top: 0;
    left: 0;
    transform: translateZ(-1px) rotateY(180deg);
    box-shadow: inset 3px 0px 20px -7px black;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;

}
#portada{
    background: url('../../../../static/img/logoIgl.jpeg');
}
#portada-back{
    background: url('../../../../static/img/logoIgl.jpeg');
}
#portada, #portada-back{
    background-size: 100% 100%;
}

/* Class que se agregan con Javascript*/

.trnsf{
    transform: translateX(450px);
}
.trnsf-reset{
    transform: translateX(0px);
}

/*Estilo modal versiculos */
.letrParrafo {
    align-items: center;
    font-weight: bold;
    font-size: 80px;
}

/* Estilo básico para el modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
}

.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    width: 80%; /* Modifica esto según tus necesidades */
    height: 80%; /* Modifica esto según tus necesidades */
}
/* Botón de cierre (X) */
.close {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    cursor: pointer;
    color: rgba(255,0,0,0.7);
}

/* Estilo para la tarjeta (card-body) */
.card-body {
    background-position: center;  /* Alinea la imagen en el centro */
    background-color: #eee;  /* Cambia a tu color de fondo deseado */
    background-repeat: no-repeat;
  }
  
/* Estilo para las imágenes pequeñas en el modal */
.small-image {
    width: 100px; /* Ajusta según el tamaño deseado */
    height: 100px; /* Ajusta según el tamaño deseado */
    margin: 5px; /* Ajusta según el espacio deseado entre imágenes */
    cursor: pointer; /* Cambia el cursor al pasar sobre la imagen */
    border: 1px solid #ddd; /* Agrega un borde a las imágenes */
    border-radius: 5px; /* Ajusta según el radio de borde deseado */
  }