* {
  box-sizing: border-box;
  position: relative;
}

#svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  background: #eee;
}

#circle {
  fill: transparent;
  stroke: transparent;
  stroke-width: 3;
}

.hand {
  fill: transparent;
  stroke: transparent;
  stroke-width: 5;
}

.cube-container {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;  
}

.wrapper { 
    
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: -1;
    width: 100%;
   /* max-width: 1500px;*/
    height: 700px;
    top: 0;
    margin: 0 auto;
    padding: 0;

}

.stage {
   
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    margin:0;
    padding:0;
    cursor: pointer;
}

.stage:after { 

  display: block;
  content: "";
}

.cubes {
  
  position:absolute;
  border-radius: 20%;
  transform: rotate(-20deg);
  background: #EEBF5A;
  opacity: 0.9;
  z-index: 1000;
  
}

.cubes:before { 

  display:none;
  content:"";
  width:100%;
  height:100%;
  background: skyblue;
  opacity: 0.5; 
}

/* Colors */

.ten1 { 

  background: #379634; 

}

.ten2 { 

  background: #379634;
}

.ten3 {

  background: #A8FF3B;
}

.ten4 { 

  background: #379634;
}

.ten5 { 

  background: #0A3200;

}

.ten6 { 
 
  background: #A8FF3B;
}

.ten7 {

  background: #7FBC7D;
}

.ten8 { 

  background:#379634;
}

.ten9 { 

  background:#379634;
}