@keyframes wave{
  from{ transform: scale(0); opacity: 1; }
  to{ transform: scale(1); opacity: 0; }
}

@keyframes hoverScale {
  from{ transform: scale(1); }
  to{ transform: scale(1.35); }
}

body{
  margin: 0;
  width:100vw;
  height: 100vh;
  background-color: #181C21;
  overflow-x: hidden;
}

#bkg{
  width: 100vw;
}

#cube{
  display: inline-block;
  position: fixed;
  cursor: pointer;
  bottom: 0;
  right:0;
  margin: 40px 50px;
}

#cube canvas{
  position: relative;
}

#cube::before{
  content:'';
  width: 100%;
  height: 100%;
  border-radius: 100%;
  background-color: #E7E9E6;
  box-sizing: border-box;
  padding: 30px;
  position: absolute;
  top: 0px;
  left: 0px;

  animation-timing-function: ease-in-out;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

#cube_wave{
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #DD434F;
  border-radius: 100%;
  transform: scale(0);

  animation-timing-function: ease-in-out;
  animation-duration: 0.8s;
  animation-iteration-count: infinite;
}

#cube:hover::before{ animation-name: hoverScale; }
#cube:hover #cube_wave{ animation-name: wave; }