common.css

@font-face {
  font-family: Source Sans Pro;
  font-style: normal;
  font-weight: 200;
  src: local(Source Sans Pro ExtraLight),
       local(SourceSansPro-ExtraLight),
       url(https://fonts.gstatic.com/s/sourcesanspro/v9/toadOcfmlt9b38dHJxOBGIAPdqzPmKFFIYQ-46z3JxY.woff2) format('woff2');
}

* {
  margin: 0;
  padding: 0;
}

body {
  font: .9em/1.2em Source Sans Pro;
  color: rgb(43, 6, 1);
}

h1 {
  text-align: center;
  margin: 1em 0;
}

a {
  color: inherit;
}

.infos {
  text-align: center;
  margin-bottom: 3em;
}

h2 {
  margin-bottom: 1em;
  line-height: 1.3em;
}

[data-result-level="error"] {
  fill: rgb(244, 96, 37);
  stroke: rgb(244, 96, 37);
  background-color: rgba(244, 96, 37, .1);
}

  [data-result-level="error"] h2 {
    color: rgb(244, 96, 37);
  }

[data-result-level="warning"] {
  fill: rgb(254, 178, 54);
  stroke: rgb(254, 178, 54);
  background-color: rgba(254, 178, 54, .1);
}

  [data-result-level="warning"] h2 {
    color: rgb(254, 178, 54);
  }

[data-result-level="notice"] {
  fill: rgb(10, 172, 207);
  stroke: rgb(10, 172, 207);
  background-color: rgba(10, 172, 207, .1);
}

  [data-result-level="notice"] h2 {
    color: rgb(10, 172, 207);
  }

text[data-result-level],
[data-result-level] text {
  fill: #000;
}

.pie {
  display: block;
  margin: 2em auto;
  max-width: 200px;
  border-radius: 50%;
  background-color: rgb(105, 211, 141);
}

.pie circle {
  stroke-width: 32;
  fill: none;
}

.pie text {
  font-size: .5em;
  color: inherit;
  stroke: none;
  text-anchor: middle;
  dominant-baseline: middle;
  visibility: hidden;
}

.pie [data-result-text-level="error"] > text {
  visibility: visible;
}

.pie circle[data-result-level="warning"]:hover ~ [data-result-text-level="error"] > text,
.pie circle[data-result-level="notice"]:hover ~ [data-result-text-level="error"] > text {
  visibility: hidden;
}

.pie circle[data-result-level="warning"]:hover ~ [data-result-text-level="warning"] > text,
.pie circle[data-result-level="notice"]:hover ~ [data-result-text-level="notice"] > text {
  visibility: visible;
}

#controls {
  margin: 0 2em 2em;
}

#controls::after {
  content: '';
  display: block;
  clear: both;
}

#controls > p {
  display: inline-block;
}

#controls > p + p {
  margin-left: 3em;
}

#controls > .all-notes {
  float: right;
  width: 40%;
  max-height: 1.1em;
  overflow: hidden;
  transition: max-height .5s ease-in-out;
}

  #controls > .all-notes:hover {
    max-height: 1000px;
  }

  #controls > .all-notes > p {
    cursor: pointer;
    text-align: right;
    text-decoration: underline;
    margin-bottom: .7em;
  }

  #controls > .all-notes > ul {
    list-style: none;
    -moz-column-width: 3.5em;
    -moz-column-gap: 2.5em;
    -webkit-column-width: 3.5em;
    -webkit-column-gap: 2.5em;
    column-width: 3.5em;
    column-gap: 2.5em;
  }

  #controls > .all-notes > ul > li > small {
    float: right;
  }