* {
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  margin: 0 1em;
}

h1 {
  font-style: italic;
  color: #373fff;
}

.app {
  max-width: 600px;
  margin: 2em auto;
}

.day {
  font: .8rem sans-serif;
  dominant-baseline: middle;
  text-anchor: middle;
  fill: #666;
}

.temp {
  text-anchor: middle;
  dominant-baseline: middle;
  font: .8rem sans-serif;
  font-weight: normal;
  stroke: none;
  fill: #000;
}

.dot {
  stroke: #08c;
  fill: #fff;
  stroke-width: 2;
}

button {
  border: 2px solid currentColor;
  padding: .5em 2em;
  font: inherit;
  font-size: .8em;
  border-radius: .5em;
  cursor: pointer;
  background: #f0f0f0;
}

button:hover {
  background: #f8f8f8;
}

.reset {
  border-width: 1px;
  font-size: 1em;
  padding: .25em .5em;
  border-radius: .25em;
}

footer {
  border-top: 1px solid #ccc;
  margin: 2em 0;
  padding: 1em 0;
  font-size: .8em;
}