.lijst{
position:absolute;
display: inline-block;
background-color: white;
width:10vw;
left:1vw;
top:19vh;
text-align: center;
pointer-events:none;
cursor: none;
color: black;
z-index: 700;
animation-name: animate-pop;
animation-duration: 8s;
   overflow:auto;
   overflow-x: auto;
   scrollbar-width: none;
}

.koplijst{
position:absolute;
display: inline-block;
background-color: white;
width:10vw;
left:1vw;
top:15vh;
text-align: center;
pointer-events:none;
cursor: none;
color: black;
z-index: 700;
animation-name: animate-pop;
animation-duration: 8s;
   overflow:auto;
   overflow-x: auto;
   scrollbar-width: none;
}


.lijst2{
  left:88vw;
  background-color: green;
}

.table{
margin:0;
width:4vw;
height:4vh;
border: 1px solid black;
background-color: white;
font-weight: bold;
font-size: 1.8rem;
text-align: center;
}

.table2{
  background-color: yellow;
}

.beurten{
  width: 2vw;
  background-color: black;
  color: white;
}


.punten{
position:absolute;
display: inline-block;
background-color: white;
width:40vw;
height: 30vh;
left:0vw;
top:13vh;
text-align: center;
font-size: 22rem;
pointer-events:none;
cursor: none;
color: black;
z-index: 300;
animation-name: animate-pop;
animation-duration: 8s;
}

.punten2{
background-color: yellow;
left:60vw;
}

@keyframes gelatine {
  from, to { transform: scale(1, 1); }
  25% { transform: scale(0.8, 1.0); }
  50% { transform: scale(1.0, 0.8); }
  75% { transform: scale(0.85, 0.95); }
}

#aantal{
position:absolute;
display: inline-block;
background-color: black;
width: 20vw;
height: 10vh;
left: 40vw;
top:43vh;
font-size: 3rem;
color: white;
pointer-events: none;
text-align: center;
line-height: 10vh;
cursor: none;
border: 1px solid blue;
animation-name: animate-pop;
animation-duration: 8s;
z-index: 700;
}

#gemiddelde{
position:absolute;
display: inline-block;
background-color: black;
width: 20vw;
height: 10vh;
left: 40vw;
top:53vh;
font-size: 3rem;
color: white;
pointer-events: none;
text-align: center;
align-items: center;
line-height: 10vh;
cursor: none;
border: 1px solid blue;
animation-name: animate-pop;
animation-duration: 8s;
z-index: 700;
}

#menu{
position:absolute;
display: inline-block;
background-color: black;
color: coral;
width: 20vw;
height: 13vh;
left: 40vw;
top: 0vh;
align-items: center;
font-size: 3rem;
text-align: center;
align-items: center;
z-index: 1;
cursor:grabbing;
line-height: 8vh;
z-index: 12;
border: 4px solid blue;
animation-name: animate-pop;
animation-duration: 8s;
}


#onderbalk{
position:absolute;
display: inline-block;
background-color: black;
width: 100vw;
height: 5vh;
left: 0vw;
top:94vh;
color: white;
font-size: 2rem;
text-align: center;
cursor: grabber;
}

#hoogste{
position:absolute;
display: inline-block;
background-color: black;
width: 20vw;
height: 10vh;
left: 40vw;
top:63vh;
font-size: 3rem;
color: white;
pointer-events: none;
text-align: center;
line-height: 10vh;
border: 1px solid blue;
cursor: none;
animation-name: animate-pop;
animation-duration: 8s;
z-index: 700;
}

#datamidden{
  position: absolute;
  width: 20vw;
  height: 60vh;
  top: 13vh;
  left: 40vw;
  border: 6px solid blue;
  z-index: 400;
  animation-name: animate-pop;
animation-duration: 8s;
}

#klapmenu{
position: absolute;
display: inline-block;
width: 20vw;
height: 60vh;
background-color: black;
left: 40vw;
top: 13vh;
z-index: 750;
border: 10px solid blue;
text-align: center;
align-items: center;
color: coral;
cursor: grab;
animation-name: animate-pop;
animation-duration: 1s;
}

#actief{
  position: relative;
  display: none;
  color: white;
  z-index: 1500;
  border: 4px solid blue;
  width: 18vw;
  height: 14vh;
  background-color: black;
  top: 80vh;
  font-size: 2rem;
}