body {
  margin: 0px;
  font-family: Arial, Helvetica, sans-serif;
}
/* 
#container {
  display: flex;
} */

header {
  height: 100px;
}

input#hide_achieved_check:checked ~#achievements div.achieved {
  display: none;
}

div#achievements {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-around;
}

div.achievement {
  display: flex;
  margin: 5px;
  width: 30%;
  align-items: center;
}

div.achievement img {
  max-width: 20%;
}

div.filtered {
  display: none;
}

div.achievement:after {
  content: attr(data-title)": "attr(data-description)": "attr(data-percentage)"%";
  margin: 5px;
}

div.achieved {
  color: green;
}