/* Autora: Rubí */
body
{
    margin:0;
    background: rgb(201, 201, 201);
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
main
{
    background:white;
    padding:20px;
    padding-bottom: 100px;
}
header
{
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size:xx-large;
}
nav
{
    position: sticky;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin:auto;
    z-index: 10;
    top:0;
    background: rgb(201, 201, 201);
}
h3,p
{
    margin-left:30px;
}
li
{
    margin-left:80px;
    padding-bottom:10px;
}
pre 
{
    white-space: pre-wrap;/* Para impedir que excedan el ancho de la página */
}
/* Asignación de padding-left con combinador para los párrafos hijos de los divs de las cabeceras h3.
    Los divs están dentro de las secciones h3 o engloban varios h3 para ahorrar escribir muchas veces
    una clase para el padding para todos los párrafos de cabecera h3 que existen */
.divparrafoh3 p
{
	padding-left:30px;
}
.instruccionSQL
{
    color:blue;
    font-weight: bold;
}
.cursiva
{
    font-style: italic;
}
.itemNav
{
    width:20%;
    text-decoration: none;
    color:darkred;
    display:flex;
    text-align: center;
    justify-content: center;
}
.itemNav:hover
{
    transition:0.5s;
    background-color:rgba(90, 90, 90, 0.282);
    border-radius:20px;
}
.itemNav:active
{
    transition:0.1s;
    width:19%;
}
.botonModoAlterno
{
    border-radius:20px;
    background:darkred;
    color:white;
    font-weight: bold;
    padding:10px;
    font-size:medium;
    text-decoration:none;
}
.botonModoAlterno:hover
{
    padding:15px;
    transition: 0.5s;
}
body.oscuro
{ 
    background-color: rgb(25, 25, 25);
    color: #ffffff;
}
main.oscuro
{ 
    background-color: #9d9c9c; 
    color: #000000;
}
nav.oscuro
{
    background-color: rgb(25, 25, 25);
}
body.claro
{ 
    background-color: rgb(201, 201, 201); 
    color: #000000; 
}
main.claro
{ 
    background-color: #ffffff; 
    color: #000000; 
}
nav.claro
{
    background-color: rgb(201, 201, 201); 
}
#separadorC{
    background: linear-gradient(90deg, rgba(168, 8, 8, 0.884), rgba(255, 0, 0, 0.884), rgba(168, 8, 8, 0.884));
    font-weight: bold;
    text-shadow: 3px -2px 6px rgb(0, 0, 0);
    text-align: center;
    font-size: xx-large;
    color:white;
    border-radius: 20px;
    font-style: italic;
}
#separadorJava{
    background: linear-gradient(90deg, rgba(49, 2, 80, 0.842), rgba(143, 53, 204, 0.842), rgba(49, 2, 80, 0.842));
    font-weight: bold;
    text-shadow: 2px -2px 3px rgb(255, 69, 0);
    text-align: center;
    font-size: xx-large;
    color:white;
    border-radius: 20px;
    font-style: italic;
}