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

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

/*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 categorías.*/
.enlaceCategorias {
    text-decoration: underline;
    background-color: #ffffff;
    color: #00d4ff;
    border-radius: 1.25rem;/*20px*/
    padding: 0.625rem; /*10px*/
    width: 10.938rem; /*125px*/
    display: block;
}

/*Alinear horizontalmente el contenido en el centro y poner relleno arriba y abajo del elemento que tiene el id imagenes.*/
#imagenes {
    text-align: center; 
    padding: 1.5% 0;
}

/*Poner la fila 1 en una línea y margen abajo al div que tiene el id fila1.*/
#fila1 {
    display: block;
    margin-bottom: 2rem; /*32px*/
}

/*Poner la fila 2 en una línea diferente a la fila 1.*/
#fila2 {
    display: block;
}

/*Poner cada categoría de la misma fila al lado de la otra, poner margen para que las categorías estén separadas y alinear las categorías 
verticalmente en la parte superior a los elementos que tienen la clase categoria.*/
.categoria {
    display: inline-block;
    margin: 1rem; /*16px*/
    vertical-align: top;
}

/*Poner tamaño (anchura y altura (auto para que mantenga la proporción)) y borde redondeado a las imágenes de las categorías.*/
.categoria img {
    width: 18.75rem; /*300px*/
    height: auto;
    border-radius: 1.25rem;/*20px*/
}

/*Poner margen arriba, color de letra y la fuente en negrita de los parráfos que estén dentro de un elemento que tenga la clase categoria.*/
.categoria p {
    margin-top: 0.625rem;/*10px*/
    color: #090979;
    font-weight: bold;
}

/*Poner color de letra y eliminar subrayado de los enlaces que estén dentro de un elemento que tenga la clase categoria.*/
.categoria a {
    color: #090979;
    text-decoration: none;
}

/*Poner subrayado a los enlaces de los párrafos que estén dentro de un elemento que tenga la clase categoria cuando se pasa el ratón por 
encima de los enlaces.*/
.categoria p a:hover {
    text-decoration: underline;
}

/*Poner tamaño (altura) a los elementos de la clase torneo-online que estén dentro de un elemento que tenga la clase categoria.*/
.categoria .torneo-online {
    height: 18.814rem;/*301.03px*/
}

/*Poner margen abajo a los elementos que tengan la clase logotipo-aes.*/
.logotipo-aes {
    margin-bottom: 1.875rem;/*30px*/
}

/*Poner el texto alineado horizontalmente en el centro y márgenes a los elementos que tengan la clase boton-home.*/
.boton-home {
    margin: 1.5%;
    text-align: center;
}

/*Hacer que el elemento esté en forma de bloque para ponerle ancho y relleno, poner color de fondo, margen abajo, color de letra, 
eliminar subrayado, poner una transición, borde redondeado.*/
.boton-home a {
    display: block;
    width: 11.25rem; /*180px*/
    padding: 1.25rem; /*20px*/
    background-color: #00d4ff;
    margin-bottom: 1.5%;
    color: black;
    text-decoration: none;
    transition: color 1s ease;
    border-radius: 1.25rem;/*20px*/
}

/*Poner color de fondo, color de letra y subrayado a los enlaces que estén dentro de un elemento que tenga la clase boton-home cuando se 
pasa el ratón por encima de los enlaces.*/
.boton-home a:hover {
    background-color: #090979;
    color: #ffffff;
    text-decoration: underline;
}