.horz{
  display:flex;
  flex-direction:row;
  justify-content: space-evenly;
}
.getal{
  margin-right:20px;
}
.horz > input{
  margin-left:20px;
  height:25px;
}
.vert{
  display:flex;
  flex-direction:column;
  justify-content: space-evenly;
}
.vert >div>input{
  accent-color: #800000;
}
.naamval{
align-items: center;
}
.naamval > input{
  width:200px;
  height:30px;
  margin-left:50px;
  border: 1px solid #a78164;
  border-radius:3px;
}
#naamvvraag{
  width:auto;
  text-align: center;
  border: 1px solid #a78164;
  border-radius:3px;
  padding:10px;
  border-radius:5px;
  margin: 0px;
  display:inline-block;
  background-color:white;
}
.quote{
  margin: 10px 0px;
}
.button{
  margin: 20px 60px;
}
.examen{
  display:flex;
  flex-direction:column;
  flex-wrap: wrap;
  max-height: 40vh;
}
.selectbuttons{
  padding:0px;
}
.selectbuttons > button{
  margin: 20px 20px;
  width:150px;
  padding:10px;
}

#knoppencontainer{
  display:grid;
  grid-template-columns: auto auto auto;
}

#knoppencontainer > div >input{
    accent-color: #800000;
  }
#knoppencontainer {
  font-size:0.8em;
  border: 1px solid #a78164;
  border-radius: 5px;
  margin:10px;
  padding:10px;
  background-color: #f0e6db;
}

#knoppencontainer > div{
  padding:5px 7px;
  margin:2px;
}
#knoppencontainer > div:has(> input:checked){
  padding:5px 5px;
}
#knoppencontainer > div:has(> label:hover){
  padding:5px 5px;
}
#knoppencontainer>div>input {
    height: 0px;
    width: 0px;
    margin-left:0px;
}
#knoppencontainer > div > label{
  padding:5px;
  text-align: center;
  transition: background-color 0.5s ease-out,border-radius 0.5s ease-out;
}
#knoppencontainer > div > label:hover{
  background-color:#f5e1d2;
  border:2px solid #a78164;
  border-radius:0.8em;
}
#knoppencontainer > div >input:checked + label {
    background:#f5e1d2;
    border:2px solid #a78164;
    border-radius:0.8em;
}




@media (orientation: portrait){
  .getallen{
    display:flex;
    flex-direction: column;
    align-items:center;
  }
  .horz{
    flex-direction:column;
  }
  .instellingendiv{
    flex-direction:column;
    justify-content: space-evenly;
    align-items:center
  }
  .chaptersdiv{
    font-size:2em;
  }
  .examen{
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
    max-height:60vh;
  }
  .hfds >div >input{
    height:0.8em;
    width:0.8em;
  }
  .selectbuttons{
    flex-direction:row;
    font-size:1.0em;
  }
  .selectbuttons > button{
    width:auto;
  }
}