body {
font-family: sans-serif;
}
.amarillo {
background-color: yellow;
}
.berdea {
background-color: #fff;
text-align: center; /* Centra el texto del elemento */
}
.grisa {
background-color: #333;
text-align: center; /* Centra el texto del elemento */
}
nav {
background-color: #333; /* Color de fondo del menú */
}
nav ul {
list-style: none; /* Quita los bullets de la lista */
margin: 0; /* Quita el margen por defecto de la lista */
padding: 0; /* Quita el padding por defecto de la lista */
display: flex; /* Crea un contenedor flexible para los elementos del menú */
}
nav ul li {
flex: 1; /* Los elementos ocupan el mismo ancho */
text-align: center; /* Centra el texto del elemento */
position: relative; /* Establece la posición relativa para el elemento */
}
nav ul li:hover {
background-color: #555; /* Cambia el color de fondo cuando se pasa el cursor */
}
nav ul ul {
position: absolute; /* Establece la posición absoluta para los submenús */
top: 0; /* Coloca el submenú en la misma posición que el elemento padre */
left: 100%; /* Alinea el submenú con el borde derecho del elemento padre */
background-color: #333; /* Color de fondo del submenú */
display: none; /* Oculta el submenú por defecto */
width: 100%; /* Establece el ancho del submenú al 100% */
margin-top: -1px; /* Agrega un desplazamiento hacia abajo para evitar superposiciones*/
}

nav ul li:hover > ul {
display: block; /* Muestra el submenú cuando se pasa el cursor */
}
nav ul ul li {
width: 100%; /* Establece el ancho del submenú al 100% */
}
nav ul ul li a {
color: #fff; /* Color del texto del submenú */
padding: 10px; /* Añade padding al texto del submenú */
}
nav ul li a {
color: #fff; /* Color del texto del menú */
display: block; /* Convierte el texto del menú en un elemento de bloque */
padding: 10px; /* Añade padding al texto del menú */
text-decoration: none; /* Quita el subrayado del texto del menú */
}
nav ul ul li a.urdin {
color: #02d7ff;
text-decoration: underline;
}
nav ul ul li a.hori {
color: #02d7ff;
}
.menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.menu > li {
position: relative;
flex: 1;
}
.menu > li > a {
display: block;
color: #fff;
text-align: center;
padding: 15px;
text-decoration: none;
}
.menu > li > ul {
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #333;
display: none;
}
.menu > li:hover > ul {
display: block;
}
.menu > li > ul > li {
position: relative;
width: 100%;
}
.menu > li > ul > li > a {
display: block;
color: #fff;
text-align: center;
padding: 10px;
text-decoration: none;
}
nav ul ul.right {
left: auto; /* Elimina la alineación a la derecha del submenú */
right: 100%; /* Alinea el submenú a la izquierda del elemento padre */
}
.menu > li > ul.right > li:hover > ul {
left: auto; /* Elimina la alineación a la derecha del submenú */
right: 100%; /* Alinea el submenú a la izquierda del elemento padre */
}
.edukia {
text-align: right; /* Para alinear el texto con respecto a la imagen */
}
.irudiaren-testua {
max-width: 60%; /* Ajusta el ancho máximo según el ancho de la imagen */
margin: 0 auto; /* Centra el texto horizontalmente */
text-align: right;
font.size: 2em;
}
.header {
height: 200px;
background-color: #f2f2f2;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
margin: 20px;
}
.columna {
flex-basis: 100%;
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}

.columna p {
text-align: justify;
text-justify: distribute-all-lines;
}


.contenedornoticia /*Esto es solo para las noticias, para poder separar el tipo de alineacion de parrafo*/
{
flex-basis: 100%;
background-color: #f2f2f2;
padding: 20px;
border-radius: 5px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.gorputza p {
text-align: justify;
text-justify: distribute-all-lines;
}/*esto permite el alineacion a ambos lados en el cuerpo de la noticia*/


.titulo {
text-align: center;
margin: 20px;
font-size: 20 px;
}
.header img {
width: 100%;
height: auto;
}
p.gorri {
text-align: center;
color: red;
}
a.urdin {
color: #02d7ff;
text-decoration: underline;
}
img.berria{
width: 60%; /* Cambiado a 80% para centrar la imagen */
display: block;
margin: 20px auto; /* Alinear la imagen al centro */
}
.edukia {
text-align: right; /* Para alinear el texto con respecto a la imagen */
}
.irudiaren-testua {
max-width: 60%; /* Ajusta el ancho máximo según el ancho de la imagen */
margin: 0 auto; /* Centra el texto horizontalmente */
text-align: right;
}