body {



    /*font-family: Verdana,sans-serif;
    font-size: 14px;
    font-weight:normal; */

    font: normal 14px Verdana, sans-serif;
    line-height: 1.6em;
    margin: 1.5%;
    height: 100vh;
    cursor: url("img/foam ball 3.png"), auto;
}

.cursor {
width: 4%;
height: 4%;
border: 1px solid white;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
}

.titel {
  margin-bottom: 1%;
  width: 100%;
  margin-left:%;
  height:auto;
}

.pion {
  width: 11%;
  position: relative;
  margin-left: 11%;
  margin-top: 1%;
  margin-bottom: 1%;
  transition: transform 0.5s ease;
  transform: translateY(30%);
}

.pion:hover {
 transform: translateY(0%);
}

.categorie {
  width: 11%;
  position: relative;
  margin-left: 11%;
  margin-top: 2%;
}

.aanmelden {
  width: 50%;
  margin-left: 50%;
  margin-bottom:-5%;
  margin-top: 2%;
  position:
}
.daar {
fill: red;
}

.klikdaar {
  width: 30%;
  margin-top: 5%;
}

.hier {
fill: blue;
}

.muziekradio {
  width: 50%;
  margin-left: -15%;
  margin-bottom:-5%;
  margin-top: -2%;
  position: absolute;
}

.ookaanmelden {
  width: ;
  margin-top: 100%;
  margin-bottom: 5%;
  margin-left: ;
}


.cirkelspelregels
{
  opacity: 0%;
}

svg:hover .cirkelspelregels {
  opacity: 100%;
}
.cirkelmedia
{
  opacity: 0%;
}

svg:hover .cirkelmedia {
  opacity: 100%;
}

.cirkelnieuws
{
  opacity: 0%;
}

svg:hover .cirkelnieuws {
  opacity: 100%;
}

.cirkelhistorie
{
  opacity: 0%;
}

svg:hover .cirkelhistorie {
  opacity: 100%;

}

.rondjeaanmelden
{
  opacity: 100%;
}

svg:hover .rondjeaanmelden {
  opacity: 100%;
  fill: orange;

}

.zon2
{
  opacity: 0%;
  fill: red;
}

svg:hover .zon2 {
  opacity: 100%;
  fill: orange;

}

.zon1
{
  opacity: 100%;
  fill: orange;
}

svg:hover .zon1 {
  opacity: 0%;
  fill: red;

}