body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #fafafa;

}
h1 { max-width: 980px; margin: 2rem auto; font-weight: normal; }

.value { margin-bottom: 0.5rem; /*border-bottom: 1px dotted #eee;*/ display: flex; width: 300px; }
.value > div:nth-child(1) { flex-grow: 1; }
.value .speed, .value .gust, .value .direction { font-size: 100%; font-weight: bold; color: black; text-align: right; }
.value .gust { color: gray; }
.links { margin-top: 2rem; }

.card h2 { padding-top: 0; margin-top: 0;  border-bottom: 1px solid #f1f1f1; padding-bottom: 0.2rem; font-weight: normal; }
.card { background-color: white; padding: 0.8rem 1rem; margin: 0.5rem auto;  max-width: 980px; box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14),0 3px 1px -2px rgba(0,0,0,0.2),0 1px 5px 0 rgba(0,0,0,0.12); }

.flex { display: flex; }
.flex > div:nth-child(1) { flex-grow: 1; }
.flex .uplot { display: inline-block; }

.rose { margin: 0 1rem; }
.chart { width: 500px; }

a:hover, a:focus { color: #23527c; text-decoration: underline; }
a:active, a:hover { outline: 0; }
a { color: #337ab7; text-decoration: none; }

a.detail { float: right; margin-top: 0.3rem; }

@media only screen and (max-width: 750px) {
    .chart { width: auto; }
    .card { max-width: 400px; }
    .flex { flex-direction: column; }
    .value { width: auto; }
    .rose { width: 80%; margin: auto; }
    .rose svg { width: 100%;}
    .flex .column:nth-child(1) { order: 2; margin-bottom: 1.5rem; }
    .flex .column:nth-child(2) { order: 1}
    .flex .column:nth-child(3) { order: 3}
}