nav li a:hover {
    background-color: green;
    font-size: 150%;
}

/* Aplica estilos cuando el usuario está activamente interactuando con el elemento */
nav li a:active {
    background-color: darkblue;
}

/* Aplica estilos cuando el elemento tiene el foco del teclado o es seleccionado */
#nombre:focus, #apellidos:focus{
    outline: none; /* Quita la línea naranja que aparece por defecto al tener el foco */
    border-color: fuchsia;
}

/* Aplica estilos a los elementos de formulario seleccionados (como checkboxes o radio buttons) */
input[type="radio"]:checked {
box-shadow: 0 0 0 3px red;
}

/* Aplica estilos a un elemento basado en su posición dentro de un contenedor */
.calendar li:nth-child(odd) {
    background-color: lightgray;
}

/* Aplica estilos a un elemento basado en su posición entre elementos del mismo tipo dentro de un contenedor
p:nth-of-type(2n) {
    color: red;
} */

/* Aplica estilos al primer hijo de un elemento */
ol li:first-child {
    font-weight: bold;
    color: yellow;
}

/* Aplica estilos al último hijo de un elemento */
ul li:last-child {
    font-style: italic;
}

/* Aplica estilos al n-ésimo hijo contando desde el final de un elemento */
ol li:nth-last-child(14) {
    color: red;
    filter: drop-shadow(0px 10px 5px green);
}


/* Aplica estilos a los elementos de formulario que son válidos según sus restricciones */
input:valid {
    border: 2px solid green;
}

/* Aplica estilos a los elementos de formulario que no son válidos según sus restricciones */
input:invalid {
    border: 2px solid red;
}

/* Aplica estilos a los elementos de formulario que son obligatorios */
input:required {
    border-color: red;
}