body {
    overflow: hidden;
    /* background: linear-gradient(to right, #a8c0ff, #3f2b96);  */
    background-size: cover; 
    background-repeat:no-repeat;
    background-position: center;
}
.container{
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.ball_container{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.d1_ball_container{
    justify-content: center;
    display: flex;
}
.d2_ball_container{
    justify-content: center;
    display: flex;
}
.d3_ball_container{
    justify-content: center;
    display: flex;
}
/* .d1_ball{
    background: rgba(255, 218, 0, 0.51);
    height: 100px;
    width: 100px;
    border-radius: 180%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(4.8px);
-webkit-backdrop-filter: blur(4.8px);
border: 1px solid rgba(255, 218, 0, 0.3);
} */
/* .d2_ball1{
    background-color: rgba(63, 240, 21, 0.54);
    height: 100px;
    width: 100px;
    border-radius: 180%;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.8px);
-webkit-backdrop-filter: blur(4.8px);
border: 1px solid rgba(63, 240, 21, 0.3);
} */
.ball {
    display: block;
    background: black;
    margin: 0;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: radial-gradient(circle at 100px 100px, #fcff5c, #000);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .shadow {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.1) 40%, rgba(0, 0, 0, 0) 50%);
  -webkit-transform: rotateX(90deg) translateZ(-150px);
  -moz-transform: rotateX(90deg) translateZ(-150px);
  -ms-transform: rotateX(90deg) translateZ(-150px);
  -o-transform: rotateX(90deg) translateZ(-150px);
  transform: rotateX(90deg) translateZ(-150px);
  z-index: -1;
  }
  .ball-2 {
    display: block;
    background: black;
    margin: 0;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: radial-gradient(circle at 100px 100px, #5cff7f, #000);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .ball-3 {
    display: block;
    background: black;
    margin: 0;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: radial-gradient(circle at 100px 100px, #7f5cff, #000);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .ball-4 {
    display: block;
    background: black;
    margin: 0;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: radial-gradient(circle at 100px 100px, #ff37ee, #000);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .ball-5 {
    display: block;
    background: black;
    margin: 0;
    border-radius: 50%;
    height: 100px;
    width: 100px;
    background: radial-gradient(circle at 100px 100px, #05d5fa, #000);
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  }
  .stage {
    width: 100px;
    height: 100px;
    -webkit-perspective: 1200px;
    -moz-perspective: 1200px;
    -ms-perspective: 1200px;
    -o-perspective: 1200px;
    perspective: 1200px;
    -webkit-perspective-origin: 50% 50%;
    -moz-perspective-origin: 50% 50%;
    -ms-perspective-origin: 50% 50%;
    -o-perspective-origin: 50% 50%;
    perspective-origin: 50% 50%;
  }
  .d2-buy{
    position: absolute;
    top: 28%;
    left: 37%;
    color: white;
    font-size: 30px;
  }
  /* body {
    width: 300px;
    margin: 20px auto;
    background: linear-gradient(to bottom, rgba(100, 100, 100, 0.2) 0%, rgba(255, 255, 255, 0.5) 40%, #ffffff 100%);
    background-repeat: no-repeat;
  } */

@media only screen and (max-width: 600px) {
    
}

@media only screen and (max-width: 320px) {
    
}