body{
    background-image: url(css/fondo.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
}

.caja1{
    width: 40%;
    height: 35em;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2.5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    align-self: center;
    margin: auto;
    margin-top: 6.5%;
    border-radius: 2.5em;
}

.caja1 h1 {
    font-size: 2.5em;
    text-transform: uppercase;
}
.caja1 .caja1-formulario{
    width: 50%;
}

.caja1 .caja1-formulario form{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}


.caja1 .caja1-formulario p{
    font-size: 1.025em;
}

.caja1 .caja1-formulario input{
    width: 75%;
}

.caja1 .caja1-formulario form #enviar{
    margin: 3em 0em 0em 0em;
    background-color: ghostwhite;
    color: black;
    border: none;
    border-radius: 1em;
    transition: background-color 0.25s;
    width: 25%;
}

.caja1 .caja1-formulario form #enviar:hover{
    background-color:rgb(236, 235, 235);
}

.caja1 .caja1-formulario form #borrar{
    margin: 1em 0em 0em 0em;
    background-color: ghostwhite;
    color: black;
    border: none;
    border-radius: 1em;
    transition: background-color 0.25s;
    width: 25%;
}

.caja1 .caja1-formulario form #borrar:hover{
    background-color:rgb(236, 235, 235);
}

.caja1 #boton-volver{
    background-color: ghostwhite;
    border: none;
    border-radius: 2em;
    margin: 1em 0em 1em 0em;
    transition: background-color 0.25s;
    width: 25%;
}

.caja1 #boton-volver:hover{
    background-color: rgb(236, 235, 235);
    cursor: default;
}

.caja1 #boton-volver a{
    color:black;
    text-decoration: none;
    font-size: 1em;
    text-transform: uppercase;
}
.caja1 #boton-volver a:link{
    color:black;
    cursor: default;
}
.caja1 #boton-volver a:visited{
    color:black;
    cursor: default;
}
.caja1 #boton-volver a:active{
    color:black;
    cursor: default;
}
.caja1 #boton-volver a:hover{
    color: black;
    cursor: default;
}

                            /* ESTILO PARA LA PAGINA DE INICIO DE SESIÓN */

.caja1 img{
    width: 15%;
    height: 15%;
    margin-top: -1em;
    margin-bottom: -1em;
}

                                /* ESTILO PARA LA PAGINA DE OPCIONES */

.caja1 .caja1-opciones{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
}

.caja1 .caja1-opciones button{
    background-color: white;
    border: none;
    border-radius: 1em;
    margin: 1em 0em 1em 0em;
    transition: background-color 0.25s;
    width: 80%;
}

.caja1 .caja1-opciones button:hover{
    background-color: whitesmoke;
    cursor: default;
}

.caja1 .caja1-opciones button a{
    color:lightslategrey;
    text-decoration: none;
    font-size: 1.15em;
    text-transform: uppercase;
    transition: font-size 0.25s;
}
.caja1 .caja1-opciones button a:link{
    color:lightslategrey;
    cursor: default;
}
.caja1 .caja1-opciones button a:visited{
    color:lightslategrey;
    cursor: default;
}
.caja1 .caja1-opciones button a:active{
    color:lightslategrey;
    cursor: default;
}
.caja1 .caja1-opciones button a:hover{
    color: black;
    font-size: 1.20em;
    cursor: default;
}

/* ESTILO PARA LAS PÁGINAS CON PHP SOLO PARA CALCULADORA, OPERACIONES Y PAR O IMPAR */

.caja1 .caja1-peachepe{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 25%;
    height: 25%;
}

/* ESTILO PARA LAS PÁGINAS CON PHP SOLO PARA LAS TABLAS DE MULTIPLICAR */

.caja1 .caja1-peachepe-tabla{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 50%;
}

.caja1 .caja1-peachepe-tablas{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 50%;
    height: 50%;
    overflow-y: auto;
}


/* ESTILO PARA LA PÁGINA DE SUCESION PARA EL PHP*/

.caja1-sucesion{
    width: fit-content;
    min-width: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(2.5px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:center;
    align-self: center;
    margin: auto;
    margin-top: 6.5%;
    border-radius: 2.5em;
}

.caja1-sucesion h1 {
    font-size: 2em;
    text-transform: uppercase;
}

.caja1 .caja1-peachepe-sucesion{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.caja1-sucesion #boton-volver{
    background-color: ghostwhite;
    border: none;
    border-radius: 2em;
    margin: 1em 0em 1em 0em;
    transition: background-color 0.25s;
    width: 25%;
}

.caja1-sucesion #boton-volver:hover{
    background-color: rgb(236, 235, 235);
    cursor: default;
}

.caja1-sucesion #boton-volver a{
    color:black;
    text-decoration: none;
    font-size: 1em;
    text-transform: uppercase;
}
.caja1-sucesion #boton-volver a:link{
    color:black;
    cursor: default;
}
.caja1-sucesion #boton-volver a:visited{
    color:black;
    cursor: default;
}
.caja1-sucesion #boton-volver a:active{
    color:black;
    cursor: default;
}
.caja1-sucesion #boton-volver a:hover{
    color: black;
    cursor: default;
}