* {
  margin: 0;
  padding: 0;
}
#app {
  height: 90vh;
  // margin-top: 5vh;
  // box-sizing: border-box;
  // border: 1px solid #FFFF66;
  // border-radius: 30px;
  overflow-y: scroll;
}
.button, .play {
  display: inline;
  cursor: pointer;
  padding: 20px;
  line-height: 40px;
  text-align: center;
  border: 1px solid #ccc;
}
.loading-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba($color: #000000, $alpha: 0.7);
}
.loading{
  width: 60px;
  height: 60px;
  margin: 0 auto;
  margin-top:30%;
  position: relative;
  animation: load 3s linear infinite;
}
.loading div{
  width: 100%;
  height: 100%;
  position: absolute;
}
.loading span{
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #99CC66;
  position: absolute;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  animation: changeBgColor 3s ease infinite;
}
@keyframes load{
  0%{
      transform: rotate(0deg);
  }
  33.3%{
      transform: rotate(120deg);
  }
  66.6%{
      transform: rotate(240deg);
  }
  100%{
      transform: rotate(360deg);
  }
}
@keyframes changeBgColor{
  0%,100%{
      background: #99CC66;
  }
  33.3%{
      background: #FFFF66;
  }
  66.6%{
      background: #FF6666;
  }
}
.loading div:nth-child(2){
  transform: rotate(120deg);
}
.loading div:nth-child(3){
  transform: rotate(240deg);
}
.loading div:nth-child(2) span{
  animation-delay: 1s;
}
.loading div:nth-child(3) span{
  animation-delay: 2s;
}