body {
    background: hsl(210, 30%, 10%);
    color: hsl(210, 30%, 80%);
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 32px;
    margin: 0px;
}
h3 {
    font-size: 1.1em;
}
a, a:visited {
    text-decoration: underline;
    color: hsl(210, 80%, 60%);
}
.card {
    padding: 0px 16px;
    margin: 16px;
    background-color: hsl(210, 30%, 20%);
    border-radius: 8px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
    text-align: center;
    box-sizing: border-box;
    width: 320px;
    display: inline-block;
    /* Ensure cards are displayed in a responsive grid */
    flex: 0 0 auto;
    margin-bottom: 16px; /* Add some spacing at the bottom for better grid layout */
}
.card img {
    border-radius: 8px;
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
}
.local {
    background-color: hsl(120, 30%, 20%);
}
.elsewhere {
    background-color: hsl(45, 30%, 30%);
}
.caption {
    font-size: 0.9em;
    font-style: italic;
}
.local h3 {
    color: hsl(120, 30%, 80%);
}
.elsewhere h3 {
    color: hsl(45, 30%, 80%);
}
.local .caption {
    color: hsl(120, 30%, 70%);
}
.elsewhere .caption {
    color: hsl(45, 30%, 70%);
}
progress {
    width: 290px;
    height: 48px;
}
.chart-container {
    width: 100%;
    height: 140px;
    margin-bottom: 16px;
}