#x-canvas{
    opacity:0.5
  }
  
  .box {
    position: relative;
    width: 100%;
    height: 90vh;
    overflow: hidden;
  }

  .ball1 {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #3a3a3a;
    position: absolute;
    -webkit-animation: moveX 6.45s ease-in-out 0s infinite alternate, moveY 7.4s ease-in-out 0s infinite alternate;
    -moz-animation: moveX 6.45s ease-in-out 0s infinite alternate, moveY 7.4s ease-in-out 0s infinite alternate;
    -o-animation: moveX 6.04s ease-in-out 0s infinite alternate, moveY 7.4s ease-in-out 0s infinite alternate;
    animation: moveX 6.45s ease-in-out 0s infinite alternate, moveY 7.4s ease-in-out 0s infinite alternate;
  }
  
  .ball2 {
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #909190;
    position: absolute;
    -webkit-animation: moveX 11.45s ease-in-out 0s infinite alternate, moveY 9.4s ease-in-out 0s infinite alternate;
    -moz-animation: moveX 11.45s ease-in-out 0s infinite alternate, moveY 9.4s ease-in-out 0s infinite alternate;
    -o-animation: moveX 11.04s ease-in-out 0s infinite alternate, moveY 9.4s ease-in-out 0s infinite alternate;
    animation: moveX 11.45s ease-in-out 0s infinite alternate, moveY 9.4s ease-in-out 0s infinite alternate;
  } 

  
  
  .ball3 {
    display: block;
    width: 85px;
    height: 85px;
    border-radius: 50%;
    background-color: #767676;
    position: absolute;
    -webkit-animation: moveX 8.15s linear 0s infinite alternate, moveY 5.8s linear 0s infinite alternate;
    -moz-animation: moveX 8.15s linear 0s infinite alternate, moveY 5.8s linear 0s infinite alternate;
    -o-animation: moveX 8.15s linear 0s infinite alternate, moveY 5.8s linear 0s infinite alternate;
    animation: moveX 8.15s linear 0s infinite alternate, moveY 5.8s linear 0s infinite alternate;
  }
  
  .ball4 {
    display: block;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #e6e8e6;
    position: absolute;
    -webkit-animation: moveX2 10.09s linear 0s infinite alternate, moveY2 9.4s linear 0s infinite alternate;
    -moz-animation: moveX2 10.09s linear 0s infinite alternate, moveY2 9.4s linear 0s infinite alternate;
    -o-animation: moveX2 10.09s linear 0s infinite alternate, moveY2 9.4s linear 0s infinite alternate;
    animation: moveX2 10.09s linear 0s infinite alternate, moveY2 9.4s linear 0s infinite alternate;
  }
  
  .ball5 {
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #3a3a3a;
    position: absolute;
    -webkit-animation: moveX2 13.09s linear 0s infinite alternate, moveY2 7.4s linear 0s infinite alternate;
    -moz-animation: moveX2 13.09s linear 0s infinite alternate, moveY2 14.4s linear 0s infinite alternate;
    -o-animation: moveX2 13.09s linear 0s infinite alternate, moveY2 14.4s linear 0s infinite alternate;
    animation: moveX2 13.09s linear 0s infinite alternate, moveY2 14.4s linear 0s infinite alternate;
  }
  
  .square1 {
    display: block;
    width: 45px;
    height: 45px;
    background-color: #3a3a3a;
    position: absolute;
    -webkit-animation: moveX 12.34s linear 0s infinite alternate, moveY 15.06s linear 0s infinite alternate, spin 40000ms linear 0s infinite alternate;
    -moz-animation: moveX 12.34s linear 0s infinite alternate, moveY 15.06s linear 0s infinite alternate, spin 40000ms linear 0s infinite alternate;
    -o-animation: moveX 12.34s linear 0s infinite alternate, moveY 15.06s linear 0s infinite alternate, spin 40000ms linear 0s infinite alternate;
    animation: moveX 12.34s linear 0s infinite alternate, moveY 15.06s linear 0s infinite alternate, spin 40000ms linear 0s infinite alternate;
  
  }
  
  .square2 {
    display: block;
    width: 45px;
    height: 55px;
    background-color: #909190;
    position: absolute;
    -webkit-animation: moveX 9.74s linear 0s infinite alternate, moveY 20.06s linear 0s infinite alternate, spin 50000ms linear 0s infinite alternate;
    -moz-animation: moveX 9.34s linear 0s infinite alternate, moveY 20.06s linear 0s infinite alternate, spin 50000ms linear 0s infinite alternate;
    -o-animation: moveX 9.34s linear 0s infinite alternate, moveY 20.06s linear 0s infinite alternate, spin 50000ms linear 0s infinite alternate;
    animation: moveX 9.34s linear 0s infinite alternate, moveY 20.06s linear 0s infinite alternate, spin 50000ms linear 0s infinite alternate;
  
  }
  
  .square3 {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #909190;
    position: absolute;
    -webkit-animation: moveX 19.74s linear 0s infinite alternate, moveY 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
    -moz-animation: moveX 19.34s linear 0s infinite alternate, moveY 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
    -o-animation: moveX 19.34s linear 0s infinite alternate, moveY 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
    animation: moveX 19.34s linear 0s infinite alternate, moveY 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
  
  }
  .square4 {
    display: block;
    width: 50px;
    height: 50px;
    background-color: #3a3a3a;
    position: absolute;
    -webkit-animation: moveX2 19.74s linear 0s infinite alternate, moveY2 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
    -moz-animation: moveX2 19.34s linear 0s infinite alternate, moveY2 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
    -o-animation: moveX2 19.34s linear 0s infinite alternate, moveY2 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
    animation: moveX2 19.34s linear 0s infinite alternate, moveY2 17.06s linear 0s infinite alternate, spin 63000ms linear 0s infinite alternate;
  
  }
  
  .triangle1 {
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 80px solid transparent; 
    border-left: 75px solid #3a3a3a;
      position: absolute;
    -webkit-animation: moveX 30.74s linear 0s infinite alternate, moveY 12.06s linear 0s infinite alternate, spin 75300ms linear 0s infinite alternate;
    -moz-animation: moveX 30.34s linear 0s infinite alternate, moveY 12.06s linear 0s infinite alternate, spin 75300ms linear 0s infinite alternate;
    -o-animation: moveX 30.34s linear 0s infinite alternate, moveY 12.06s linear 0s infinite alternate, spin 75300ms linear 0s infinite alternate;
    animation: moveX 30.34s linear 0s infinite alternate, moveY 12.06s linear 0s infinite alternate, spin 75300ms linear 0s infinite alternate;
  }
  
  .triangle2 {
    width: 0; 
    height: 0; 
    border-top: 43px solid transparent;
    border-bottom: 30px solid transparent; 
    border-left: 65px solid #3a3a3a;
      position: absolute;
    -webkit-animation: moveX 24.34s linear 0s infinite alternate, moveY 16.06s linear 0s infinite alternate, spin 55300ms linear 0s infinite alternate;
    -moz-animation: moveX 24.34s linear 0s infinite alternate, moveY 16.06s linear 0s infinite alternate, spin 55300ms linear 0s infinite alternate;
    -o-animation: moveX 24.34s linear 0s infinite alternate, moveY 16.06s linear 0s infinite alternate, spin 55300ms linear 0s infinite alternate;
    animation: moveX 24.34s linear 0s infinite alternate, moveY 16.06s linear 0s infinite alternate, spin 55300ms linear 0s infinite alternate;
  }
  .triangle3 {
    width: 0; 
    height: 0; 
    border-top: 30px solid transparent;
    border-bottom: 50px solid transparent; 
    border-left: 45px solid #3a3a3a;
      position: absolute;
    -webkit-animation: moveX2 6.45s ease-in-out 0s infinite alternate, moveY 6.4s ease-in-out 4s infinite alternate;
    -moz-animation: moveX2 6.45s ease-in-out 0s infinite alternate, moveY 6.4s ease-in-out 4s infinite alternate;
    -o-animation: moveX2 6.04s ease-in-out 0s infinite alternate, moveY 6.4s ease-in-out 4s infinite alternate;
    animation: moveX2 6.45s ease-in-out 0s infinite alternate, moveY 6.4s ease-in-out 4s infinite alternate;
  }
  
  .triangle4 {
    width: 0; 
    height: 0; 
    border-top: 40px solid transparent;
    border-bottom: 60px solid transparent; 
    border-left: 75px solid #909190;
      position: absolute;
      -webkit-animation: moveX2 11.45s ease-in-out 3s infinite alternate, moveY2 3s ease-in-out 0s infinite alternate;
    -moz-animation: moveX2 11.45s ease-in-out 3s infinite alternate, moveY2 3s ease-in-out 0s infinite alternate;
    -o-animation: moveX2 11.04s ease-in-out 3s infinite alternate, moveY2 3s ease-in-out 0s infinite alternate;
    animation: moveX2 11.45s ease-in-out 3s infinite alternate, moveY2 3s ease-in-out 0s infinite alternate;
  }
  
  .triangle4:hover {
    width: 100px;
    height: 100px;
    -webkit-transition: 1s;
    -moz-transition: 1s;
    -ms-transition: 1s;
    -o-transition: 1s;
    transition: 1s;
  }
  
  /* 2.2 Keyframes for Floating Geometry  */
  @-webkit-keyframes spin {
      from {
          -webkit-transform:rotate(0deg);
        }
  
      to {
          -webkit-transform:rotate(360deg);
        }
  }
  
  @-webkit-keyframes moveX {
    from { left: 0; } to { left: 100%; }
  }
  @-webkit-keyframes moveX2 {
    from { right: 30%; } to { right: 100%; }
  }
  @-webkit-keyframes moveY {
    from { top: 0; } to { top: 90%; }
  }
  @-webkit-keyframes moveY2 {
    from { top: 50%; } to { top: 90%; }
  }


  @-moz-keyframes moveX {
    from { left: 0; } to { left: 100%; }
  }
  @-moz-keyframes moveX2 {
    from { right: 30%; } to { right: 100%; }
  }
  @-moz-keyframes moveY {
    from { top: 0; } to { top: 80%; }
  }
  @-moz-keyframes moveY2 {
    from { top: 50%; } to { top: 80%; }
  }
  
  
  @-o-keyframes moveX {
    from { left: 0; } to { left: 100%; }
  }
  @-o-keyframes moveX2 {
    from { right: 30%; } to { right: 100%; }
  }
  @-o-keyframes moveY {
    from { top: 0; } to { top: 80%; }
  }
  @-o-keyframes moveY2 {
    from { top: 50%; } to { top: 80%; }
  }



  @keyframes moveX {
    from { left: 0; } to { left: 100%; }
  }
  @keyframes moveX2 {
    from { right: 30%; } to { right: 100%; }
  }
  @keyframes moveY {
    from { top: 0; } to { top: 80%; }
  }
  @keyframes moveY2 {
    from { top: 50%; } to { top: 80%; }
  }