#weather-box {
    position: absolute;

    right: 20px;
    bottom: 20px;

    width: 260px;

    padding: 15px;

    color: #ffffff;

    background: rgba(0, 0, 0, 0.35);

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 16px;

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);

    font-family: Arial, Helvetica, sans-serif;

    z-index: 9999;

    transition: opacity 0.4s ease;
}

#weather-title {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 12px;
}

.weather-row {
    display: flex;
    justify-content: space-between;

    padding: 4px 0;
}

.weather-label {
    opacity: 0.9;
}

.weather-value {
    font-weight: bold;
}

#weather-time {
    margin-top: 12px;

    font-size: 12px;

    opacity: 0.8;
}

@media (max-width: 768px) {

    #weather-box {

        width: 220px;

        right: 10px;
        bottom: 10px;

        padding: 12px;

        font-size: 14px;
    }
}
#weather-status {

    font-size: 13px;

    margin-bottom: 10px;

    opacity: 0.85;
}
#river-status {

    font-size: 13px;

    margin-top: 4px;

    opacity: 0.85;

}
.river-level-display {

    font-size: 22px;

    font-weight: bold;

    margin: 6px 0;

}


.river-time {

    font-size: 12px;

    opacity: 0.75;

}