*{ margin: 0; padding: 0; border: 0; }
html, body{width:100%;height:100%;cursor:pointer;overflow:hidden;}


.circle {
  display: block;
  border-radius: 50%;
  height: 60px;
  width: 60px;
  margin: 0;
  position:absolute;
  top:300px;
  left:100px;
  background: radial-gradient(circle at 10px 10px, #5cabff, #000);
  
}

.stage {
  width: 100%;
  height: 100%;
  display: inline-block;
  /* perspective: 2000px; */
  /* perspective-origin: 45% 45%; */
}

.ball {
  display: block;
  margin: 0;
  border-radius: 50%;
  position:absolute;
  height: 100px;
  width: 100px;
  background: radial-gradient(circle at 100px 100px, #94141e, #FF1325);
  z-index: 20;
  
}

/* .ball .shadow { */
  /* position: absolute; */
  /* width: 200px; */
  /* background:radial-gradient(circle at 49% 50%, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4) 20%, red 20%); */
  /* transform: rotateX(90deg) translateZ(-180px); */
  /* z-index: 10; */
  /* left:-50px; */
/* } */

.shadow {
  position: absolute;
  border-radius: 50%;
  height: 100px;
  width: 150px;
  margin: 0;
  position:absolute;
  background:radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.8) 30%, rgba(0, 0, 0, 0.2) 100%);
  z-index: 10;
}

#div1 {
    position: relative;
    height: 150px;
    width: 150px;
    margin: 50px;
    padding: 10px;
    border: 1px solid black;
    -webkit-perspective: 150px; /* Chrome, Safari, Opera  */
    perspective: 150px;
}

#div2 {
   padding: 50px;
    position: absolute;
    /* border: 1px solid black; */
    background-color: rgb(255, 0, 0);
    color: red;
    -webkit-transform: rotateX(45deg);
    transform: rotateX(45deg);
    width: 1000px;
    left: 400px;
    top: 431px;
    left: -100px;
}

canvas {position:absolute;top:0;left:0;}
#space {z-index:0;}
#loading{z-index:100;}