/* Contenerdor del Banner */
.banner__container {
    max-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Estilo del contenedor del banner */
.banner {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to bottom, #0000ff, #ffffff);
}

/* Estilo del título del banner */
.banner__title {
    z-index: 2;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2.7em;
    text-align: center;
    font-family: "Alfa Slab One", serif;
    font-weight: 400;
    background: linear-gradient(to right, #274476, #da2222, #fcf36f, #274476);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Aplica la animación a cada imagen */
.banner__image {
    z-index:  1;
    display: inline-block;
    position: absolute;
    opacity: 0;
    visibility: hidden;
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    top: 0;
    left: 0;
}

/* Establece un retraso específico para cada imagen con un intervalo de 1.5 segundos */
.banner__image--multiplication {
    animation-delay: 0s;
}

.banner__image--addition {
    animation-delay: 1.5s;
}

.banner__image--subtraction {
    animation-delay: 3s;
}

.banner__image--equality {
    animation-delay: 4.5s;
}

.banner__image--division {
    animation-delay: 6s;
}

.banner__image--ingles {
    animation-delay: 7.5s;
}

.banner__image--sistemasolar {
    animation-delay: 9s;
}


/* Definir animación para mover las imágenes dentro de los límites del banner */
@keyframes moveWithinBounds {
    0% {
        transform: translate(10px, -10px);
        opacity: 5;
        visibility: visible;
    }

    25% {
        transform: translate(calc(100vw - 100px), 0);
    }

    50% {
        transform: translate(calc(50vw - 10px), calc(80vh - 100px));
    }

    75% {
        transform: translate(0, calc(20vh - 100px));
    }

    100% {
        transform: translate(calc(60vw - 50%), calc(50vh - 50px));
    }
}







/* Contenedor de las Materias */

.contenedor__materias {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    /* Define tres columnas de igual ancho */
    gap: 10px;
    /* Ajusta el espacio entre las columnas y filas */
    margin-left: 10px;
    margin-top: 10px;
    margin-right: 10px;
}

.contenedor__materias>div {
    /* Selecciona los elementos hijos directos del contenedor */
    width: 200px;
    /* Ajusta el ancho según sea necesario */
    height: 400px;
    /* Ajusta el alto según sea necesario */
    display: flex;
    align-items: center;
    /* Centra el contenido verticalmente */
    justify-content: center;
    /* Centra el contenido horizontalmente */
}




.container_materia {
    border-radius: 20px;
    border: 5px solid #ff6600;
    background: linear-gradient(180deg, #ff6600, #ffffff);
    color: #000000;
    font-family: "Alfa Slab One", serif;
    font-size: 2rem;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;


}

.container_materia:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
    background: linear-gradient(180deg, #ffffff, #ff6600);
    border-color: #f5a46f;
}

.container_materia a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Estilos específicos para cada tipo de operación */
.container__materia--matematicas {

    background: linear-gradient(180deg, #ffff00, #ffffff);
    border: 5px solid #ffff00;
}

.container__materia--lenguacastellana {

    background: linear-gradient(180deg, #1133f6, #ffffff);
    border: 5px solid #1133f6;
}

.container__materia--cienciassociales {

    background: linear-gradient(180deg, #fe0000, #ffffff);
    border: 5px solid #fe0000;
}

.container__materia--cienciasnaturales {

    background: linear-gradient(180deg, #04ff00, #ffffff);
    border: 5px solid #04ff00;
}

.container__materia--ingles {

    background: linear-gradient(180deg, #00ffe1, #ffffff);
    border: 5px solid #00ffe1;
}

.container__materia--sistemasolar {

    background: linear-gradient(180deg, #7b00ff, #ffffff);
    border: 5px solid #7b00ff;
}


.images__materia {
    display: block;
    /* Asegura que la imagen sea un bloque */
    margin: 0 auto;
    /* Centra la imagen horizontalmente */
    width: 180px;
    /* Ajusta el tamaño de la imagen */
    padding-top: 15px;
    /* Ajusta el espacio superior si es necesario */
    margin-bottom: 40px;
    /* Ajusta el espacio inferior para separar de otros elementos */
}











/* Contenedor principal */
.container__principal {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-left: 20px;
    margin-top: 10px;
    margin-right: 20px;
    /* Agrega margen en la parte derecha */
}

.container__principal>div {
    /* Selecciona los elementos hijos directos del contenedor */
    width: 300px;
    /* Ajusta el ancho según sea necesario */
    height: 350px;
    /* Ajusta el alto según sea necesario */
    display: flex;
    align-items: center;
    /* Centra el contenido verticalmente */
    justify-content: center;
    /* Centra el contenido horizontalmente */
}


/* Contenedor principal lengua castellana */
.container__principal_1 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin-left: 20px;
    margin-top: 10px;
    margin-right: 20px;
    /* Agrega margen en la parte derecha */
}

.container__principal_1>div {
    /* Selecciona los elementos hijos directos del contenedor */
    width: 230px;
    /* Ajusta el ancho según sea necesario */
    height: 350px;
    /* Ajusta el alto según sea necesario */
    display: flex;
    align-items: center;
    /* Centra el contenido verticalmente */
    justify-content: center;
    /* Centra el contenido horizontalmente */
}



/* Estilos para los contenedores de operaciones */
.container_operacion {
    margin: 10px;
    padding: 10px;
    border-radius: 20px;
    border: 5px solid #ff6600;
    background: linear-gradient(180deg, #ff6600, #ffffff);
    color: #000000;
    font-family: "Alfa Slab One", serif;
    font-size: 1.5rem;
    transition: transform 0.3s ease-in-out, background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.container_operacion:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transform: scale(1.03);
    background: linear-gradient(180deg, #ffffff, #ff6600);
    border-color: #f5a46f;
}

.container_operacion a {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

/* Estilos específicos para cada tipo de operación */
.container__operaciones--suma {
    background: linear-gradient(180deg, #1133f6, #ffffff);
    border: 5px solid #1133f6;
}

.container__operaciones--resta {
    background: linear-gradient(180deg, #7411f6, #ffffff);
    border: 5px solid #7411f6;
}

.container__operaciones--multiplicacion {
    background: linear-gradient(180deg, #11f615, #ffffff);
    border: 5px solid #11f615;
}

.container__operaciones--division {
    background: linear-gradient(180deg, #eef611, #ffffff);
    border: 5px solid #eef611;
}

.container__operaciones--igual {
    background: linear-gradient(180deg, #c2066a, #ffffff);
    border: 5px solid #fc1892;
}

/* Estilo para el contenedor de imágenes */
.images__container {
    width: 150px;
    padding-left: 20px;
    margin-bottom: 40px;
    margin-right: 50px;
}

/* Estilo para el título del contenedor */
.container__title {
    font-size: 1.9rem;
    font-family: "Alfa Slab One", serif;
    margin-top: 30px;
    text-align: center;
    /* Centra el texto dentro del contenedor */
    margin-left: auto;
    margin-right: auto;
    width: max-content;
    /* Ajusta el ancho del contenedor según el contenido */
}

/* Estilos para el botón de menú y volver atrás */
.volver_menu {
    background: linear-gradient(180deg, #fe0040, #ffffff);
    border: solid #711818;
    font-family: "Alfa Slab One", serif;
    margin-right: auto;
    margin-left: 30px;
    margin-top: 20px;
    color: #000000;
    font-size: 1.5rem;
    padding-right: 50ppx
    ;
}
.volver_menu_lenguaje {
    background: linear-gradient(180deg, #fe0040, #ffffff);
    border: solid #711818;
    font-family: "Alfa Slab One", serif;
    margin-right: 1000;
    margin-left: 10px;
    margin-top: 10px;
    color: #000000;
    font-size: 1.5rem;
    width: 290px; 
}

/* Estilo para el contenedor principal para respuestas */
.container__respuestas {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

/* Estilos para las preguntas */
.operaciones {
    font-size: 4rem;
    font-weight: 900;
    text-align: center;
    color: #fd7e00;
    margin-top: 20px;
}

.operaciones_lenguaje {

    font-size: 3rem;
    font-weight: 900;
    text-align: center;
    color: #fd7e00;
    margin-top: 20px;

}

/* Estilo para el input "escribe tu respuesta" */
.respuesta_operacion {
    font-family: "Alfa Slab One", serif;
    color: #000000;
    font-size: 1.5rem;
    text-align: center;
    border: 2px solid #ed9e3d;
    background-color: #ffffff;
    width: 600px;
    margin-left: 350px;
    /* Centra el input horizontalmente */
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 60px;
}

/* Estilo para el botón "Responder" */
.btn_responder {
    background: linear-gradient(180deg, #029115, #ffffff);
    border: 3px solid #187125;
    font-family: "Alfa Slab One", serif;
    color: #000000;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 1.2rem;
    text-align: center;
    display: inline-block;
    text-decoration: none;
    margin-right: auto;
    cursor: pointer;
    margin-top: -110px;
    margin-left: 990px;
}



/* Estilo general para el botón Volver Atrás */
.menu-button {
    font-family: "Alfa Slab One", serif;
    color: #c10909;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 1.6rem;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

/* Estilo para el botón "Volver Atrás" */
.volver-atras {
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #d70909, #ffffff);
    border: 2px solid #620707;
    border-radius: 8px;
    color: #000000;
    font-size: 16px;
    cursor: pointer;
    text-decoration: none;
    margin-right: auto;
    margin-left: 10px;
}



/* Estilo del contador de preguntas */
.question-counter {
    font-family: "Alfa Slab One", serif;
    font-size: 1.8rem;
    color: #10047e;
    text-align: center;
    margin-bottom: 10px;
}

/* Estilo general para las respuestas y el botón */
.container__respuetas,
.btn_responder {
    display: block;
}

.btn_responder:disabled {
    opacity: 0.5;
}


/* Estilos del contenedor del juego de matemáticas */
#math-game {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    display: flex;
}





/* Estilo para el título del contenedor */
.container__title--materia {
    font-size:1.5rem;
    text-align: center;
    /* Centra el texto horizontalmente */
    margin-top: 20px;
    /* Ajusta el espacio superior para separar de otros elementos */
}



















/* Respuesta para el slider */
/* Definir animación para mover las imágenes dentro de los límites del banner */
@keyframes moveWithinBounds {
    0% {
        transform: translate(10px, -10px);
        opacity: 1;
        visibility: visible;
        /* Se hace visible */
    }

    25% {
        transform: translate(calc(100vw - 100px), 0);
        /* Se mueve a la derecha */
    }

    50% {
        transform: translate(calc(50vw - 10px), calc(80vh - 100px));
        /* Se mueve hacia el centro y hacia abajo */
    }

    75% {
        transform: translate(0, calc(20vh - 100px));
        /* Regresa a la izquierda */
    }

    100% {
        transform: translate(calc(60vw - 50%), calc(50vh - 50px));
        /* Se posiciona en el centro */
    }
}

/* Media query para tablets */
@media (min-width: 769px) and (max-width: 1024px) {
    .banner {
        height: 250px;
        /* Ajusta la altura del banner para tablets */
    }

    .banner__title {
        font-size: 1.5em;
        /* Ajusta el tamaño de la fuente del título para tablets */
    }

    .banner__image {
        animation: moveWithinBoundsTablet 9s ease-in-out infinite alternate;
        /* Nueva animación para tablets */
        width: 95px;
    }
}

/* Definir animación para dispositivos tablets */
@keyframes moveWithinBoundsTablet {
    0% {
        transform: translate(10px, -10px);
        opacity: 1;
        /* Se hace visible */
        visibility: visible;
    }

    25% {
        transform: translate(calc(100vw - 90px), 0);
        /* Se mueve a la derecha */
    }

    50% {
        transform: translate(calc(50vw - 20px), calc(70vh - 90px));
        /* Se mueve hacia el centro y hacia abajo */
    }

    75% {
        transform: translate(0, calc(15vh - 90px));
        /* Regresa a la izquierda */
    }

    100% {
        transform: translate(calc(50vw - 40%), calc(45vh - 40px));
        /* Se posiciona en el centro */
    }
}

/* Establece un retraso específico para cada imagen con un intervalo de 1.5 segundos */
.banner__image--multiplication {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 0s;
    /* Inicia de inmediato */
}

.banner__image--addition {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 1.5s;
    /* Inicia 1.5 segundos después */
}

.banner__image--subtraction {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 3s;
    /* Inicia 3 segundos después */
}

.banner__image--equality {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 4.5s;
    /* Inicia 4.5 segundos después */
}

.banner__image--division {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 6s;
    /* Inicia 6 segundos después */
}

.banner__image--ingles {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 7.5s;
    /* Inicia 7.5 segundos después */
}

.banner__image--sistemasolar {
    animation: moveWithinBounds 10s ease-in-out infinite alternate;
    animation-delay: 9s;
    /* Inicia 9 segundos después */
}

/* Media query para dispositivos móviles */
@media (max-width: 768px) {
    .banner {
        height: 200px;
        /* Reduce la altura del banner en móviles */
    }

    .banner__title {
        font-size: 0.7em;
        /* Ajusta el tamaño de la fuente del título para móviles */
    }

    .banner__image {
        animation: moveWithinBoundsMobile 8s ease-in-out infinite alternate;
        /* Aplica una animación específica para móviles */
        width: 90px;
    }
}

/* Define la animación para pantallas móviles */
@keyframes moveWithinBoundsMobile {
    0% {
        transform: translate(5px, -5px);
        opacity: 1;
        /* Se hace visible */
        visibility: visible;
    }

    25% {
        transform: translate(calc(100vw - 80px), 0);
        /* Se mueve a la derecha */
    }

    50% {
        transform: translate(calc(50vw - 10px), calc(60vh - 80px));
        /* Se mueve hacia el centro y hacia abajo */
    }

    75% {
        transform: translate(0, calc(10vh - 80px));
        /* Regresa a la izquierda */
    }

    100% {
        transform: translate(calc(40vw - 30%), calc(40vh - 30px));
        /* Se posiciona en el centro */
    }
}

/* Aplica el retraso de las animaciones para las imágenes en móviles */
.banner__image--multiplication {
    animation-delay: 0s;
    /* Inicia de inmediato */
}

.banner__image--addition {
    animation-delay: 1.5s;
    /* Inicia 1.5 segundos después */
}

.banner__image--subtraction {
    animation-delay: 3s;
    /* Inicia 3 segundos después */
}

.banner__image--equality {
    animation-delay: 4.5s;
    /* Inicia 4.5 segundos después */
}

.banner__image--division {
    animation-delay: 6s;
    /* Inicia 6 segundos después */
}

.banner__image--ingles {
    animation-delay: 7.5s;
    /* Inicia 7.5 segundos después */
}

.banner__image--sistemasolar {
    animation-delay: 9s;
    /* Inicia 9 segundos después */
}









/* respoce para las materias*/

/* Para dispositivos móviles (pantallas pequeñas) */
@media only screen and (max-width: 700px) {
    .contenedor__materias {
        grid-template-columns: repeat(1, 1fr);
        gap: 5px;
        margin: 5px;
    }

    .container_operacion {
        grid-template-columns: repeat(1, 1fr);
        margin-left: -5px;

    }

    .contenedor__materias>div {
        width: 93%;
        height: 250px;
        margin: 10px;
    }

    .container_materia {
        font-size: 1.5rem;
        border-width: 3px;
    }

    .images__materia {
        width: 120px;
        padding-top: 10px;
        margin-bottom: 20px;
    }
}

/* Para tablets (pantallas medianas) */
@media only screen and (min-width: 601px) and (max-width: 1024px) {
    .contenedor__materias {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        margin: 10px;
    }

    .contenedor__materias>div {
        width: 98%;
        height: 300px;
    }

    .container_materia {
        font-size: 1.75rem;
        border-width: 4px;
    }

    .images__materia {
        width: 140px;
        padding-top: 12px;
        margin-bottom: 30px;
    }
}







/* Media Queries para tabletas y teléfonos */
@media (max-width: 1200px) {
    .container__principal {
        grid-template-columns: repeat(2, 1fr);
        /* Cambia a 3 columnas */
    }

    .container__principal_1 {
        grid-template-columns: repeat(3, 1fr);
        /* Cambia a 3 columnas */
    }

    .container__principal>div,
    .container__principal_1>div {
        width: 100%;
        /* Ajusta el ancho al 100% */
    }
}

@media (max-width: 800px) {

    .container__principal_1 {
        grid-template-columns: repeat(2, 1fr);
        /* Cambia a 2 columnas */
        width: 93%;
        margin-left: 10px;

    }
    .images__container {
        text-align: center;
        margin-left: 50px;

    }

    .respuesta_operacion {

        width: 95%;
        /* Ajusta el ancho al 90% */
        margin-left: 20px;
    }


    .btn_responder {
        width: 20%;
        /* Ajusta el ancho al 90% */
        height: 50px;
        margin-left: 20px;
        margin-top: -40px;
    }

    .volver-atras {
        width: 25%;
        /* Ajusta el ancho al 90% */
        margin-top: 70px;
    }
}

@media (max-width: 768px) {
    .container__principal {
        grid-template-columns: repeat(1, 1fr);
        /* Cambia a 2 columnas */


    }

    .container__principal_1 {
        grid-template-columns: repeat(1, 1fr);
        /* Cambia a 2 columnas */

    }


    .container__principal>div,
    .container__principal_1>div {
        height: auto;
        /* Ajusta la altura automáticamente */
    }

    .respuesta_operacion {
        width: 92%;
        /* Ajusta el ancho al 90% */


    }

    .btn_responder {
        width: 32%;
        /* Ajusta el ancho al 90% */
        margin-left: 10px;
        margin-top: -40px;
    }

    .volver-atras {
        width: 40%;
        /* Ajusta el ancho al 90% */
        margin-top: 70px;
    }
}


@media (max-width: 480px) {
    .container__principal_1 {
        margin-left: 10px;
        
    }

    .images__container {
        text-align: center;
        margin-left: 65px;

    }

    .container__title,
    .operaciones,
    .operaciones_lenguaje {
        font-size: 1.5rem;
        /* Ajusta el tamaño de la fuente para pantallas más pequeñas */
    }

    .container__title--materia {
        font-size: 1.5rem;
   

    }


    .btn_responder,
    .volver-atras {
        font-size: 1rem;
        /* Ajusta el tamaño de la fuente para botones en pantallas más pequeñas */
    }

    .question-counter {
        font-size: 1.3rem;
        /* Ajusta el tamaño del contador de preguntas */
    }

    .volver_menu {
        margin-left: 1px;
    }
}








/*responce de las ventanas emergentes*/

@media (max-width: 800px) {
    .modal-content {
        width: 90%; /* Asegura que ocupe todo el ancho disponible en móviles */
        height: 35%;
        padding: 10px;
        font-size: 16px; /* Reduce aún más el tamaño de la fuente */
        margin-top: 200px;
    }

    .ok-button_1,
    .ok-button_2,
    .ok-button_3,
    .ok-button_4 {
        font-size: 16px; /* Reduce el tamaño del texto de los botones */
        margin-top: 50px;
        padding: 8px;
        width: 100%;
        max-width: 160px; /* Ajusta el ancho máximo de los botones */
    }
.operaciones_lenguaje{
    font-size: 2em;
}
    .modal-content p {
        margin-top: -270px;
        font-size: 20px; /* Ajusta el tamaño del texto en móviles */
        margin-bottom: 200px; /* Ajusta el margen inferior */
    }

    .resultado {
        font-size: 14px; /* Reduce el tamaño de la fuente aún más */
    }

}
/* Estilos específicos para tablets y teléfonos */
@media (max-width: 768px) {
    .modal-content {
        width: 95%; /* Ocupa el 95% del ancho disponible en tablets */
        padding: 15px; /* Reduce el padding para pantallas más pequeñas */
        font-size: 18px; /* Ajusta el tamaño de fuente */
    }

    .ok-button_1,
    .ok-button_2,
    .ok-button_3,
    .ok-button_4 {
        font-size: 20px; /* Reduce el tamaño del texto de los botones */
        padding: 10px;
        width: 100%;
        max-width: 180px; /* Ajusta el ancho máximo de los botones */
    }
    .operaciones_lenguaje{
    font-size: 2em;
}

    .modal-content p {
        font-size: 24px; /* Ajusta el tamaño del texto en tablets */
        margin-bottom: 100px; /* Ajusta el margen inferior */
    }

    .resultado {
        font-size: 16px; /* Reduce el tamaño de la fuente para pantallas más pequeñas */
    }
}

/* Estilos específicos para teléfonos móviles */
@media (max-width: 480px) {
    .banner__title {
        font-size: 1.3em;
      }
    .modal-content {
        margin-top: 150px;
        width: 96%; /* Asegura que ocupe todo el ancho disponible en móviles */
        height: 38%;
        padding:20px;
        font-size: 16px; /* Reduce aún más el tamaño de la fuente */
    }

    .ok-button_1,
    .ok-button_2,
    .ok-button_3,
    .ok-button_4 {
        font-size: 16px; /* Reduce el tamaño del texto de los botones */
        padding: 8px;
        width: 100%;
        max-width: 160px; /* Ajusta el ancho máximo de los botones */
    }
    .respuesta_operacion {
        width: 92%;
        margin-left: 20px;
        font-size: 1rem;
      }
   
    .modal-content p {
        margin-top: -200px;
        font-size: 17px; /* Ajusta el tamaño del texto en móviles */
        margin-bottom: 120px; /* Ajusta el margen inferior */
    }
 

    .resultado {
        font-size: 14px; /* Reduce el tamaño de la fuente aún más */
    }
}
/* Estilos específicos para teléfonos móviles */
@media (max-width: 360px)and (max-width: 760px) {

    .banner__title {
        font-size: 1em;
      }
    .modal-content {
        margin-top: 150px;
        width: 96%; /* Asegura que ocupe todo el ancho disponible en móviles */
        height: 45%;
        padding:20px;
        font-size: 16px; /* Reduce aún más el tamaño de la fuente */
    }

    .ok-button_1,
    .ok-button_2,
    .ok-button_3,
    .ok-button_4 {
        font-size: 16px; /* Reduce el tamaño del texto de los botones */
        padding: 8px;
        width: 100%;
        max-width: 160px; /* Ajusta el ancho máximo de los botones */
    }
   

    .modal-content p {
        margin-top: -170px;
        font-size: 17px; /* Ajusta el tamaño del texto en móviles */
        margin-bottom: 120px; /* Ajusta el margen inferior */
    }
    .respuesta_operacion {
        width: 92%;
        margin-left: 20px;
        font-size: 1rem;
      }
      .btn_responder,
      .volver-atras {
          font-size: 0.9rem;
          /* Ajusta el tamaño de la fuente para botones en pantallas más pequeñas */
      }

    .resultado {
        font-size: 14px; /* Reduce el tamaño de la fuente aún más */
    }


}


/* Estilos para los contenedores de operaciones */