main.css

/* general */

body {
  background: #222428;
}
h1 {
  color: #eee;
  text-align: center;
  margin: 20px 0;
  text-transform: uppercase;
}
h5 {
  padding: 5px 10px;
  color: #eee;
}

p{
  color: #eee;
  display: inline-block;
}

/* chart */
.chart {
  text-align: right;
}
svg {
  width: 150px;
  border-radius: 50%;
  background:#bbbbbb;
  transform: rotate(-90deg);
}

circle {
  fill: none;
  stroke-width: 32;
  r: 16;
  cx: 16;
  cy: 16;
}

circle.first {
  stroke: #ffdb66;
}

circle.second {
  stroke: #fac000;
}

/* button */
.unit > p {
  margin: 10px 0 0 0;
}

.col-auto {
  padding: 0;
}

.btn {
  height: 10px;
  width: 10px;
  padding: 0;
  border: none;
  border-radius: 0;
}

.summ {
  display: inline-block;
  margin: auto;
  width: 10px;
  height: 10px;
  background: #bbbbbb;
}

.topic {
  display: inline-block;
  float: left;
  margin: 1px;
  width: 10px;
  height: 10px;
  background: #bbbbbb;
  vertical-align: top;
}

.done {
  background: #fac000;
}

.almost {
  background-color: #ffdb66;
}