/*
 * CSS for the weewx LiveSeasons skin's rain gauge.
 * Copyright (C) John Kline 2025
 * Distributed under terms of GPLv3.  See LICENSE.txt for your rights.
 */
.rain-gauge-container {
    position: relative; /* Allows positioning of inner and helper elements */
    width: 37.5px;
    height: 75px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* --- Cylinder Body (The main tube) --- */
.cylinder-body {
    width: 100%;
    height: 100%;
    background-color: #f8f8f8;
    border: 3px solid #333; /* The wall of the gauge */
    border-top: none; /* Let the top element cover the top border */
    position: relative;
    overflow: hidden; /* Important for keeping the water inside */
    border-radius: 0 0 10px 10px; /* Round the bottom slightly */
}

/* --- Cylinder Top (The ellipse) --- */
.cylinder-top {
    width: 100%;
    height: 15px;
    background: linear-gradient(to bottom, #444, #666); /* A subtle 3D effect */
    border-radius: 50%/100%; /* Creates an ellipse that looks like a lid */
    border: 3px solid #333;
    z-index: 10; /* Ensures it sits above the body */
}

/* --- Rainfall Level (The "Water") --- */
.rainfall-level {
    position: absolute;
    bottom: 0; /* Starts filling from the bottom */
    left: 0;
    width: 100%;
    /* * **This is the variable you change to show different rainfall amounts.**
     * 25% height means the cylinder is 1/4 full.
     */
    height: 25%; 
    background-color: #4682b4; /* Steel blue for water */
    transition: height 1s ease-out; /* Makes the fill change smoothly */
}