/* styles.css */


@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&family=Roboto&display=swap');



h1 {
    font-family: 'Roboto', sans-serif;
    margin-left: 100px;  
    margin-bottom: 0px; 
    color: #afaeae; 
    font-weight: lighter;
}

.chart-container {
    width: 600px;
    height: 400px;
    position: relative;
}

.bar {
    fill: steelblue;
}

.bar:hover {
    fill: orange;
}

.tooltip {
    position: absolute;
    background: #333;
    color: #fff;
    padding: 10px;
    border-radius: 5px;
    display: none;
    pointer-events: none; /* This prevents the tooltip from blocking interactions with bars. */
}

/* styles.css */
.label {
    fill: #afaeae; /* Text color */
    font-size: 14px; /* Font size */
    font-weight: lighter; /* Font weight */
    font-family: 'Roboto', sans-serif;
}