.body{
  background-color: darkslategray;
  padding:0;
  margin:0;
  height:100vh;
  width:100vh;
  overflow:hidden;
  font-family: 'Cherry Cream Soda', cursive;
  font-weight: bold;
  box-sizing: border-box;
}

.biljart{
  position: absolute;
  left: 150px;
  box-sizing: border-box;
  top:130px;
}

.canvas1 {
  position:absolute;
  top: 60px;
  left:60px;
  z-index: 40;
  justify-content: center;
  text-align: center;
}

.canvas2 {
  position:absolute;
  top: 75px;
  left:75px;
  z-index: 42;
}

.canvas3 {
  position:absolute;
  top: 0px;
  left: 0px;
  z-index: 20;
  border-radius: 30px;
  border-color: lightyellow;
  border-style: solid;
}

.drawlineson{
  position:absolute;
  top: 30px;
  left: 30px;
  z-index: 65;
  display: none;
  cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><text y='50%'>✍️</text></svg>") 5 20,auto;
}

.drawlinesof{
  position:absolute;
  top: 30px;
  left: 30px;
  z-index: 65;
  cursor: auto;
}


.stroke-color {
  border-radius: 25%;
  width: 130px;
  height: 70px;
  position:relative;
  border: 1px black solid;
  font-size: 1vw;
}

.stroke-color2{
  border-radius: 25%;
  width: 80px;
  height: 80px;
  position:relative;
  border: 1px black solid;
}

.span{
  position: relative;
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  align-items: center;
  align-content: center;
  line-height: 20px;
}

.exportArea {
  position: absolute;
  height:1300px;
  width:2000px;
  left:80px;
  top:130px;
  z-index: 0;
  background-color: transparent;
}

.mydiv {
  position: absolute;
  display: table;
  text-align: center;
  cursor:move;
  z-index: 70;
  left:0px;
  top:0px;
  width: 3rem;
  aspect-ratio: 1/1;
  border-radius: 50%;
  }

.uitvoerblok2{
  position:absolute;
  top:  1150px;
  left: 1750px; 
  cursor: move;
}

.balgeeldikte {
  position: absolute;
  display: table;
  text-align: center;
  z-index: 100;
  left:0px;
  top:0px;
  width: 160px;
  aspect-ratio: 1/1;
  border-radius: 50%;
  background-color: yellow;
  box-shadow: -0.3rem 0.3rem 0.3rem hsl(0 0% 0% / .5);
  background-image: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9));;
  cursor: auto;
}

.effectbal{
  position:absolute;
  width: 160px;
  height:160px;
  display: flex;
  background-color: white;
  opacity: 0.6;
  border-radius: 50%;
  z-index: 950;
  box-shadow: -0.3rem 0.3rem 0.3rem hsl(0 0% 0% / .5);
  background-image: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9));;
  cursor: move;
  /*#content {transition: transform 6s ease-in infinite;}*/
}

.uureffect{
 position:relative;
  z-index: 1000;
  left:65px;
  top:5px;
  width: 30px;
  height:30px;
  border-radius: 50%;
  background-color: black;
  border: solid black 1px;
  font-size: 1vw;
}


.balwit {
  position: absolute;
  z-index: 70;
  left:1405px;
  top:490px;
  width: 2.5rem;
  box-shadow: -0.3rem 0.3rem 0.3rem hsl(0 0% 0% / .5);
  background-color: white;
  background-image: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9));;
}

.balrood {
  width: 2.5rem;
  z-index: 70;
  left:605px;
  top:590px;
  background-color: red;
  box-shadow: -0.3rem 0.3rem 0.3rem hsl(0 0% 0% / .5);
  background-image: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9));;
}

.balgeel {
  width: 2.5rem;
  z-index: 70;
  left:1405px;
  top:590px;
  background-color: yellow;
  box-shadow: -0.3rem 0.3rem 0.3rem hsl(0 0% 0% / .5);
  background-image: radial-gradient(100% 100% at 70% 15%, hsl(0 0% 100%/.5), hsl(0 0% 100%/.2) 10%, hsl(0 0% 0%/.6) 60%, hsl(0 0% 0%/.9));;
}

div{
  position:relative;
    cursor: default;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.div-stylen{
  position:absolute;
  left:1100px;
  top: 200px;
  display:none;
  z-index: 200;
  width:25vw;
  background-color: transparent;
  font-family: 'Cherry Cream Soda', cursive;
 border: solid 3px white;
 border-radius: 20px;
 padding-left: 20px;
 text-align: left;
 justify-content: center;
}

.menu{
  position:absolute;
  left:2000px;
  top:140px;
  width:300px;
  height:1000px;
  display: inline-block;
  color: yellow;
  font-family: 'Cherry Cream Soda', cursive;
  font-weight: bold;
  z-index: 400;
  text-align: center;
}

.twee{
  position: absolute;
  left: 2320px;
}


button {
 margin: 5px;
 font-family: 'Cherry Cream Soda', cursive;
 font-weight: bold;
 font-size: 1.5vw;
 width:220px;
 height: 100px;
 position: relative;
 background-color: darkslategray;
 border-radius: 5px;
 color: whitesmoke;
 border: solid 1px yellow;
 cursor: pointer;
 box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 z-index: 1000;
}

button:hover {
  transform: translateY(4px);
  box-shadow:0 20px 30px 0 lightgreen;
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  .prev, .next,.text {font-size: 11px}
}

.div-nummering{      /* !!!!!!   INSTELLINGEN CANVAS COORDINATEN VAN ALLE SYSTEMEN*/
  position:fixed;
  display:none;
  left:0px;
  top: 0px;
  z-index: -10;
}

#touch{
  position:relative;
  top: -115px;
  left: -115px;
}

a{
  position:relative;
  justify-content: center;
  text-align: center;
  font-size: 1vw;
}

.videocss{
  top:60px;
  display: none;
  grid-template-columns: 500px 500px;
}

.video{
  width: 450px;
  padding: 15px;
}

#logo{
  color: blue;
  position:absolute;
  display: block;
  font-family: 'Cherry Cream Soda', cursive;
  font-weight: bold;
  font-size: 5vw;
  left: 320px;
  top: 275px;
  text-align: center;
  background-color: lightblue;
  opacity: 0.04;
  z-index: 60;
  line-height: 200px;
  text-align: center;
}