body {
    font-family: "Kalam";
    margin: 0;
    padding: 0;
    background-color: black;
    background-image: url('Fondo.jpg'); /* Cambia la ruta por la ubicación de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el recuadro */
    background-position: center; /* Centra la imagen en el recuadro */

}


h1, h2 {
    text-align: center;
    font-size: 50px;
    margin-bottom: 5px;
}

p {
    margin-top: 5px; /* Ajusta el espacio encima del <p> */
    font-size: 20px;
}

.book {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Altura total de la ventana */
    perspective: 1500px; /* Para un efecto 3D de las páginas */
}

.split-screen {
    display: flex;
    width: 80%;
    height: 80%;
    transform-style: preserve-3d;
    position: relative;
    transform: rotateY(0deg); /* Ajusta esto si necesitas inclinar el libro */
    transition: transform 0.6s;
}

.left, .right {
    width: 50%;
    padding: 60px;
    padding-top: 37px;
    box-sizing: border-box;
    color: rgb(11, 5, 56);
    overflow-y: auto;
    height: 100%;
}

.subrayado {
    text-decoration: underline;
    font-size: 23px;
    text-align: center;
}


.left {
    background-image: url('Lado\ izquierdo.png'); /* Cambia la ruta por la ubicación de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el recuadro */
    background-position: center; /* Centra la imagen en el recuadro */
    transform: rotateY(0deg);
    transform-origin: left;
    display: flex;
    flex-direction: column;  /* Para alinear elementos verticalmente */
    justify-content: center;  /* Para centrar verticalmente */
    align-items: center;  /* Para centrar horizontalmente */
    height: 100%;  /* Asegura que el contenido ocupe toda la altura del recuadro */
    overflow: hidden;  /* Oculta cualquier contenido que se desborde */
}

form, #resultado {
    max-height: 100%;  /* Limita la altura máxima del formulario y del resultado */
    overflow-y: auto;  /* Agrega un desplazamiento vertical interno solo si es necesario */
}

.right {
    text-align: justify;
    background-image: url('Lado\ derecho.png'); /* Cambia la ruta por la ubicación de tu imagen */
    background-size: cover; /* Asegura que la imagen cubra todo el recuadro */
    background-position: center; /* Centra la imagen en el recuadro */
    transform: rotateY(0deg);
    transform-origin: right;
    display: flex;
    flex-direction: column;  /* Para alinear elementos verticalmente */
    align-items: center;  /* Para centrar horizontalmente */
    height: 100%;  /* Asegura que el contenido ocupe toda la altura del recuadro */
    overflow: hidden;  /* Oculta cualquier contenido que se desborde */
}

.right p::first-letter {
    font-family: "Rye", serif; /* Fuente específica para la primera letra */
    font-size: 4em; /* Tamaño más grande para la primera letra */
    font-weight: 400; /* Grosor de la letra */
    font-style: normal; /* Estilo normal */
    color: rgb(11, 5, 56); /* Color de la letra */
    padding: 10px; /* Espacio alrededor de la letra */
    margin-right: 10px; /* Espacio entre la letra y el texto siguiente */
    border: 4px solid rgb(11, 5, 56); /* Borde alrededor de la letra */
    float: left; /* Permite que el texto fluya alrededor de la letra */
    line-height: 1; /* Ajusta la altura de la línea para evitar superposición */
}


form {
    display: flex;
    flex-direction: column;
}

form p {
    margin-bottom: 15px;
}

#submitBtn {
    display: block; /* Necesario para que margin auto funcione */
    margin: 10px auto; /* Centra el botón horizontalmente */
    padding: 8px 16px; /* Ajusta el tamaño del botón (más pequeño) */
    background-color: #292c58; /* Color morado */
    color: #ffffff; /* Color del texto blanco */
    font-weight: bold;
    cursor: pointer;
    width: 30%;
    align-items: center;
    border-radius: 50px; /* Bordes completamente redondeados */
    border: none; /* Sin borde */
    font-family: "Kalam"; /* Fuente (opcional) */
    font-size: 16px; /* Tamaño de la fuente */
    transition: background-color 0.3s; /* Transición suave para el cambio de color */
}

#submitBtn:hover {
    background-color:#20234b; /* Morado más oscuro en hover */
}

#resultado {
    white-space: pre-wrap; /* Mantener los saltos de línea */
}

input[type="text"], select {
    border-radius: 50px; /* Bordes redondeados */
    border: none; /* Color del borde */
    padding: 5px;
    font-family: "Kalam";
    font-size: 17px; /* Tamaño de la tipografía */
    text-align: center;
    color: rgb(11, 5, 56); /* Color del texto */
    background-color: #c6b597; /* Color de fondo */
    margin-bottom: 10px;
    width: 32%; /* Ajusta el ancho del campo de entrada */
    max-width: 400px; /* Ajusta el ancho máximo si lo deseas */
    box-sizing: border-box; /* Incluye el padding y el borde en el tamaño total del campo */
}

input[type="text"]::placeholder {
    color: #7b6c53; /* Color del placeholder */
    font-family: "Kalam";
    font-size: 20px; /* Tamaño del texto del placeholder */
    text-align: center;
}

input[type="text"]:focus, select:focus {
    outline: none;
    border-color: #c6b597; /* Color del borde cuando está enfocado */
    text-align: center;
    font-size: 20;
    font-weight: 400;
}

html {
    scrollbar-color: rgb(94, 84, 144) #2e2661;
    scrollbar-width: thin;
}