* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

section, article, aside, footer, header, nav {
  display: block;
}

svg {
  margin: 3rem auto 4rem;
  display: block;
  width: 80%;
}

path {
  fill: white;
  stroke: #A5A49F;
}

path.inactive {
  fill: #ECECEC;
}

path.green {
  fill: #7CFF4E;
}

path.yellow {
  fill: #FCF551;
}

path.red {
  fill: #FF4848;
}

#timestamp, #class_id {
  display: none;
}

.green {
  background: #D7FEC9;
}

.yellow{
  background: #FFFCAF;
}

.red {
  background: #FDE4E4;
}

p {
  margin: auto;
  width: 90%;
  margin-bottom: 20px;
  padding: 0.7rem;
  cursor: pointer;
}

@media only screen and (min-width: 1000px) {
  .main {
    margin: auto;
    width: 360px;
    border: 1px solid black;
  }
}