/*Poner color fondo, color de la letra, subrayado, borde redondeado, y que el elemento esté en forma de bloque para ponerle ancho y 
relleno al elemento de menú de inicio.*/
.enlaceInicio {
    text-decoration: underline;
    background-color: #ffffff;
    color: #00d4ff;
    border-radius: 1.25rem;/*20px*/
    padding: 0.625rem; /*10px*/
    width: 9.375rem; /*100px*/
    display: block;
}

/*Poner color de fondo, color de letra y relleno al main (parte principal de la web).*/
main {
    background-color: #cff7ff;
    color: #000000;
    padding: 3%;
}

/*Poner color de fondo, borde, relleno y margen abajo, y overflow: auto para asegurarse que todo el contenido es accesible sin necesidad de 
que aparezcan barras de desplazamiento.*/
section {
    background-color: #ffffff;
    border: 0.0625rem solid #8cecff;/*1px*/
    overflow: auto;
    padding-bottom: 1.5%;
    margin-bottom: 1.5%;
}

/*Poner el texto alineado horizontalmente en el centro y relleno a los títulos 2.*/
h2 {
    text-align: center;
    padding: 1.5%;
}

/*Poner el texto alineado horizontalmente en el centro y relleno arriba a los títulos 2 que sean hijos directos de una sección. 
Eliminar relleno abajo, izquierda y derecha de los títulos 2 que sean hijos directos de una sección.*/
section > h2 {
    text-align: center;
    padding: 3% 0% 0%;
}

/*Hacer que la imagen flote a la izquierda, poner tamaño (anchura y altura) a la imagen y márgenes derecho, abajo e izquierdo a la imagen 
que flota a la izquierda.*/
#imagen-izquierda img {
    float: left;
    width: 25%;
    height: 25%;
    margin: 0% 10% 1.5% 3%;
}

/*Poner el texto justificado, margen derecho, abajo e izquierdo de los párrafos de las secciones, poner altura de línea para que las líneas 
de los párrafos estén más separadas.*/
section p {
    text-align: justify;
    margin-right: 3%;
    margin-left: 3%;
    line-height: 1.5;
    margin-bottom: 1.25rem; /*20px*/
}

/*Poner margen arriba al primer párrafo de cada sección.*/
section p:first-of-type {
    margin-top: 2.5%;
}

/*Poner la fuente en negrita de los span que sean hijos directos de un párrafo.*/
p > span {
    font-weight: bold;
}

/*Poner color de letra a los enlaces que estén dentro de un párrafo.*/
p a {
    color: #000000;
}

/*Poner color de letra, la fuente en negrita y subrayado a los enlaces de los párrafos cuando se pasa el ratón por encima de los enlaces de 
los párrafos.*/
p a:hover {
    color: #0000ff;
    font-weight: bold;
    text-decoration: underline;
}

/*Hacer que los elementos después de cada sección se muestren debajo de la sección para que no les afecte la propiedad float de la imagen.*/
section::after {
    clear: both;
}

/*Poner borde redondeado a las imágenes de las secciones.*/
section img {
    border-radius: 1.25rem;/*20px*/
}

/*Hacer que la imagen flote a la derecha, poner tamaño (anchura y altura) a la imagen y márgenes derecho, abajo e izquierdo a la imagen que 
flota a la derecha.*/
#imagen-derecha img {
    float: right;
    width: 25%;
    height: 25%;
    margin: 0% 3% 1.5% 10%;
}

/*Poner el texto alineado horizontalmente en el centro a los elementos que tienen la clase enlace-records-gallegos.*/
.enlace-records-gallegos {
    text-align: center;
}

/*Poner borde a la tabla, que los bordes de las celdas estén pegados, poner el texto centrado, poner tamaño (anchura y altura) a la tabla y
márgenes arriba, abajo e izquierdo.*/
table {
    border: 0.0625rem solid black;/*3px*/
    border-collapse: collapse;
    text-align: center;
    width: 90%;
    height: 90%;
    margin-left: 4.6875rem;/*75px*/
    margin-top: 1.25rem;/*20px*/
    margin-bottom: 3.125rem;/*50px*/
}

/*Poner relleno a los títulos de la tabla.*/
th {
    padding: 0.3125rem;/*5px*/
}

/*Poner relleno y color de letra a las celdas de la tabla.*/
td {
    padding: 0.3125rem;/*5px*/
    color: #666666;
}

/*Poner borde derecho (tamaño, tipo y color) a los elementos que tienen la clase border-right.*/
.border-right {
    border-right: 0.0625rem solid #000000;/*1px*/
}

/*Poner borde abajo (tamaño, tipo y color) a los elementos que tienen la clase border-bottom.*/
.border-bottom {
    border-bottom: 0.0625rem solid #000000;/*1px*/
}

/*Poner color de fondo a las filas pares.*/
tr:nth-child(even)  {
    background-color: #8cecff;
}

/*Poner color de fondo a las filas impares.*/
tr:nth-child(odd) {
    background-color: #ffffff;
}

/*Poner color de letra y eliminar subrayado a los enlaces de la tabla.*/
table a {
    color: #666666;
    text-decoration: none;
}

/*Poner color de letra, la fuente en negrita y subrayado cuando se pasa el ratón por encima de los enlaces cuya URL de la página a la que 
se dirige el enlace contenga "persons".*/
a[href*="persons"]:hover {
    color: #ff0000;
    font-weight: bold;
    text-decoration: underline;
}

/*Poner color de letra, la fuente en negrita y subrayado cuando se pasa el ratón por encima de los enlaces que estén dentro de una sección 
cuya URL de la página a la que se dirige el enlace contenga "persons".*/
section a[href*="persons"]:hover {
    color: #0000ff;
    font-weight: bold;
    text-decoration: underline;
}

/*Poner color de letra a los elementos que tengan la clase rojo.*/
.rojo {
    color: #ff0000;
}

/*Poner la primera letra en mayúscula de las palabras que estén en un span dentro de los títulos 2.*/
h2 span {
    text-transform: capitalize;
}

/*Poner margen arriba al div que tiene el id imagen-izquierda-formulario.*/
#imagen-izquierda-formulario {
    margin-top: 1.5%;
}

/*Hacer que la imagen flote a la izquierda, poner tamaño (anchura y altura) a la imagen y márgenes a la imagen que flota a la izquierda del 
formulario.*/
#imagen-izquierda-formulario img {
    float: left;
    width: 40%;
    height: 40%;
    margin: 1.5% 10% 1.5% 3%;
}

/*Poner el texto alineado horizontalmente en el centro y rellenos arriba y derecho al formulario.*/
form {
    text-align: center;
    padding-top: 12.5%;
    padding-right: 5%;;
}

/*Poner margen izquierdo, que se ponga al lado del input para darle un tamaño (inline-block), poner tamaño (altura) y poner el texto alineado 
verticalmente en el medio de los elementos que tienen la clase campoObligatorio (*).*/
.campoObligatorio {
    margin-left: 0.625rem;/*10px*/
    display: inline-block;
    height: 0.9375rem;/*15px*/
    vertical-align: middle;
}

/*Poner margen abajo al div que tiene el id nombreFormulario*/
#nombreFormulario {
    margin-bottom: 1.25rem;/*20px*/
}

/*Poner margen abajo y la fuente en negrita al div que tiene el id labelNombre.*/
#labelNombre {
    margin-bottom: 0.625rem;/*10px*/
    font-weight: bold;
}

/*Poner relleno, color de borde y borde redondeado al input del nombre del formulario.*/
#nombre {
    padding: 0.469rem;/*7.5px*/
    border-color: #0000ff;
    border-radius: 0.625rem;/*10px*/
}

/*Poner margen abajo al div que tiene el id correoFormulario*/
#correoFormulario {
    margin-bottom: 1.875rem;/*30px*/
}

/*Poner margen abajo y la fuente en negrita al div que tiene el id labelCorreo.*/
#labelCorreo {
    margin-bottom: 0.625rem;/*10px*/
    font-weight: bold;
}

/*Poner relleno, color de borde y borde redondeado al input del correo electrónico del formulario.*/
#correo {
    padding: 0.469rem;/*7.5px*/
    border-color: #0000ff;
    border-radius: 0.625rem;/*10px*/
}

/*Poner margen abajo, relleno, color de fondo, color de la letra, poner en negrita, eliminar el borde y poner el borde redondeado del botón 
de suscribirse.*/
form input[type="submit"] {
    margin-bottom: 1.25rem;/*20px*/
    padding: 0.938rem 2.188rem;/*15px 35px*/
    background: linear-gradient(0deg, rgba(0,212,255,1) 0%, #090979 100%);
    color: #ffffff;
    font-weight: bold;
    border: none;
    border-radius: 1.25rem;/*20px*/
}

/*Poner subrayado y cambiar el cursor cuando se pasa el ratón por encima del botón de suscribirse.*/
form input[type="submit"]:hover {
    text-decoration: underline;
    cursor: pointer;
}