body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 0px;
        }
        .location {
            margin: 10px;
        }
        .weather-card {
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 15px;
            margin: 10px auto;
            width: 275px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        .forecast-container {
            display: flex;
            justify-content: center;
            gap: 20.5px;
            margin-top: 20px;
        }
        .forecast-card {
            border: 1px solid #ddd;
            border-radius: 10px;
            padding: 7.5px;
            gap: 7.5px;
            width: 70.5px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            font-size: 0.85em; /* Tamaño de fuente reducido */
            line-height: 0.8; /* Espaciado entre líneas reducido */
        }
        h1 {
            margin-bottom: 20px;
        }
        .locations-container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: flex-start; 
            gap: 15px;
        }
        .location-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .location-group h2 {
    margin-top: 40px; /* Reduce la separación superior */
    margin-bottom: 3px; /* Reduce la separación inferior */
    text-align: center; /* Centra el texto si no está ya centrado */
}
            .weather-icon-big {
            width: 80px;
            height: 80px;
        }
        .weather-icon {
            width: 50px;
            height: 50px;
        }
        .weather-icon-small {
            width: 30px;
            height: 30px;
        }

.weather-code-container {
    margin-top: 30px;
    text-align: left;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacio entre los códigos */
    justify-content: center; /* Centrar los códigos horizontalmente */
}

.weather-code-item {
    display: flex;
    flex-direction: column; /* Para alinear icono y texto verticalmente */
    align-items: center; /* Centrar los elementos */
    gap: 5px;
    width: 80px; /* Ancho fijo para consistencia */
}

.weather-code-icon {
    width: 30px; /* 40px reducido en un 20% */
    height: 30px; /* 40px reducido en un 20% */
}

.weather-code-item span {
    font-size: 0.8em; /* Reduce el texto en un 20% */
}
                .big-arrows {
            width: 15px;
            height: 15px;
        }
                .small-arrows {
            width: 10px;
            height: 10px;
        }
        h2 {
            margin-top: 30px;
        }



#Gijon .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));

    border-radius: 10px;
}

#Oviedo .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Aviles .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Langreo .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Llanes .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Luarca .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Tineo .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Mieres .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

#Ribadesella .weather-card {
    background: linear-gradient(to bottom, rgba(0, 0, 255, 0.05), rgba(255, 255, 255, 0));
    border-radius: 10px;
}

.divider {
    border: none;
    height: 2px;
    background-color: black;
    margin: 20px 0;
}

.weather-card .location-title {
    font-size: 1.5em; /* Ajusta el tamaño del texto */
    font-weight: bold; /* Negrita para resaltar */
    text-align: center; /* Centrado */
    margin-bottom: 10px; /* Separación con el resto de los elementos */
    margin-top: 10px; /* Reduce la separación superior */
}


/* Relativo al icono de más información */
/* Contenedor del ícono */
.icon-container {
    position: relative; /* Necesario para posicionar el popup relativo al ícono */
}

/* Estilo del ícono */
.more-info-icon {
    position: absolute;
    top: 5px; /* Ajusta según sea necesario */
    right: 5px; /* Ajusta según sea necesario */
    width: 20px; /* Tamaño del ícono */
    height: 20px;
    cursor: pointer;
}

/* Estilo del popup */
.popup {
    position: absolute;
    top: 20; /* 20 por debajo del icono */
    right: 10%; /* Justo a la derecha del ícono */
    background-color: rgba(255, 255, 255, 0.95); /* Fondo blanco con 90% de transparencia */
    border: 1px solid #ddd;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 10px;
    white-space: nowrap;
    z-index: 10;
    display: none; /* Ocultado por defecto */
}

/* Mostrar el popup cuando esté activo */
.popup.active {
    display: block;
}


/* tamaño del icono en smartphones */
@media (max-width: 600px) { /* Ajusta el tamaño máximo según sea necesario */
    .more-info-icon {
        width: 15px; /* Tamaño más pequeño del ícono */
        height: 15px; /* Tamaño más pequeño del ícono */
        top: 3px; /* Ajusta la posición superior */
        right: 3px; /* Ajusta la posición derecha */
    }

    .popup {
        top: 20; /* 20 por debajo del icono */
        right: 10%; /* Asegúrate de que el popup se vea bien en pantallas pequeñas */
        font-size: 0.85em; /* Reduce el tamaño de la fuente si es necesario */
    }
}
/* tamaño del icono en smartphones */