html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  background-color: rgb(79, 167, 240);
  display: flex;
  justify-content: center; /* Horizontaal centreren */
  /* align-items: center; Verticaal centreren */
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

h1{
  color: rgb(203, 230, 252);
  font-size: 3em;
}

#hoofdContainer{
  background-color: #252e5f;
  display: flex;
   align-items: center; /* Verticaal centreren */
  flex-direction: column; /* Stel flex-direction in op 'column' om divs onder elkaar te plaatsen */
  width: 1000px;
  height: max-content;
}


#buttonbar{
  margin-bottom: 50px;
  display: flex;
  justify-content: center; /* Horizontale centrering van de knoppen */
  align-items: center; /* Verticale centrering van de knoppen */
  height: 80px;
  width: 910px;
  background-color: rgb(144, 187, 221);
  border-radius: 20px;
}

button {
    background-color: rgb(203, 230, 252);
    margin: 15px;
    border-radius: 15px;
    color: #252e5f;
    width: 70px;
    height: 50px;
    margin: 15px;
    font-size: 12pt;
    border: 0;
    cursor: pointer;
}

button.selected {
    background-color: rgb(79, 167, 240);
    color: #fff;
    border: solid 1px;
    border-color: #252e5f;
}

button {
  outline: none;
}

#soundContainer {
  display: flex;
  justify-content: center;
  align-items: center;
}

#soundbar{
position: relative;
display: inline-block;
height: 300px;
width: 900px;
}

.toetsen{
  height: 115px;
  width: 80px;
  margin: 5px;
  position: absolute;
}

/* De postitie van elke toets bepalen */
#toon1 {
  left: 0;
  bottom: 0;
}
#toon2 {
  left: 90px;
  bottom: 20px;
}
#toon3 {
  left: 180px;
  bottom: 40px;
}
#toon4 {
  left: 270px;
  bottom: 60px;
}
#toon5 {
  left: 360px;
  bottom: 80px;
}
#toon6 {
  left: 450px;
  bottom: 100px;
}
#toon7 {
  left: 540px;
  bottom: 120px;
}
#toon8 {
  left: 630px;
  bottom: 140px;
}
#toon9 {
  left: 720px;
  bottom: 160px;
}
#toon10 {
  left: 810px;
  bottom: 180px;
}

img {
    width: 80px;
    height: 115px;
  }

#touchbar{
  margin-top: 50px;
  display: flex;
  justify-content: center; /* Horizontale centrering van de knoppen */
  align-items: center; /* Verticale centrering van de knoppen */
  height: 100px;
  width: 910px;
  background-color: rgb(144, 187, 221);
  border-radius: 20px;
}

.touchknop{
  height: 58px;
  width: 58px;
  display: flex;
  justify-content: center; /* Horizontale centrering */
  align-items: center; /* Verticale centrering */
  background-color: rgb(203, 230, 252);
  border: solid 1px;
  border-color: rgb(203, 230, 252);
  margin: 15px;
  border-radius: 15px;
  font-size: 20pt;
  cursor: pointer;
}

.ingedrukt{
  background-color: rgb(79, 167, 240);
  font-size: 24pt;
  color: #fff;
  border-color: #252e5f;
}

#uitleg{
  color: rgb(203, 230, 252);
}

#copy{
  color:rgb(79, 167, 240);
  font-size: small;
}

a{
color:rgb(79, 167, 240);
}

a:hover{
  color: rgb(203, 230, 252);
}