.antwoordbox {
  flex: 1 1 57%;
  display: flex;
  flex-direction: row;
  width: 100%;
}

.antwoordbox + .points {
  flex: 0 1 43%;
}

ul.puzzels {
  display: none;
  width: 75%;
  height: 100%;
  flex-direction: row;
  flex-wrap: wrap;
  list-style: none;
  margin: 2rem;
}

li.puzzelbox {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  width: 22%;
  height: 30%;
  padding: 0.2rem;
  margin: 0.5rem;
  color: white;
  box-shadow: 5px 5px 10px rgb(58, 10, 10);
  font-family: 'URW Topic W01 Bold Italic', sans-serif;
  text-transform: uppercase;
  font-size: 2rem;
  word-wrap: break-word;
  overflow: fragments;
}

.point {
  color: white;
  font-family: 'URW Topic W01 Bold Italic', sans-serif;
}

.bol {
  padding: 10px;
  margin-right: 6px;
  border-radius: 50%;
  box-shadow: 5px 5px 10px rgb(58, 10, 10);
}

.pink {
  background-color: #C70039;
}

.pinkpurple {
  background-color: #900C3F;
}

.purple {
  background: #581845;
}

.antwoorden {
  width: 25%;
  margin-left: 5%;
  padding-top: 5%;
}

.antwoorden h2 {
  margin: 50px 0;
  text-transform: uppercase;
  font-size: 2rem;
}

@media (min-width: 768px) and (max-width: 1024px) {
  li.puzzelbox {
    display: inline-flex;
    vertical-align: middle;
    font-size: 1.5rem;
  }
}