body {
    font-family: Algerian;
}

#container
{
    width: 80%;
    height: 70%;
    margin: 0 auto;
    background-color:white ;
}

#topic
{
    font-size: 160px;
    color: black;
    text-align: center;
    width: 90%;
    height:90%;
    border-radius: 50%; 
    display: inline-block;   
    padding-top: 10%;
    background: radial-gradient(circle at 50% , #fcfcfc, #efeff1 90%, #9b5050 100%);
    overflow: hidden;
    transform: scale(0.5);
    animation: ballGrow 2s ease-out forwards;
    position: relative;
    text-align: center;
    line-height: 300px;
    color: blue;
    animation: ballRoll 2s ease-out;
    display: inline-block;
    width: 100%;
    height: 100%;
    margin: 0;
    border-radius: 50%;
    position: relative;
    background: radial-gradient(circle at 50% 40%, #fcfcfc, #efeff1 66%, #9b5050 100%);
    overflow: hidden;
    animation: ballGrow 2s ease-out forwards;
    transform: scale(0.5);
  }
  .topics:after {
    content: "";
    position: absolute;
    top: 5%;
    left: 10%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.8) 14%, rgba(255, 255, 255, 0) 24%);
    -webkit-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -moz-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -ms-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    -o-transform: translateX(-80px) translateY(-90px) skewX(-20deg);
    transform: translateX(-80px) translateY(-90px) skewX(-20deg);
  }
  


  #get-topic
  {
    font-size: 30px;
      width: 100%;
      height: 10%;
      background-color:white ;
  }


  .stage {
    width: 500px;
    height: 500px;
    display: inline-block;
    margin: 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%;
  }

.stage:nth-child(2) .ball,
.stage:nth-child(2) .number {
  animation-delay: 0.3s;
}

.stage:nth-child(2) .number:after,
.stage:nth-child(2) .number:before {
  animation-delay: 1.8s;
}

.stage:nth-child(3) .ball,
.stage:nth-child(3) .number {
  animation-delay: 0.6s;
}

.stage:nth-child(3) .number:after,
.stage:nth-child(3) .number:before {
  animation-delay: 2.1s;
}

.stage:nth-child(4) .ball,
.stage:nth-child(4) .number {
  animation-delay: 0.9s;
}

.stage:nth-child(4) .number:after,
.stage:nth-child(4) .number:before {
  animation-delay: 2.4s;
}