body, html
  margin: 0
  background-image: linear-gradient(60deg,cyan, pink)
  width: 100%
  height: 100%

/** Heart **/

#heart
{
  position : absolute;
  top : 30%;
  left : 50%;
  
  -webkit-animation : beat 2s linear infinite;
  animation : beat 2s linear infinite;
}

#heart:before, #heart:after
{
  position : absolute;
  margin : -100px -50px;
  content: "";
  
  width : 100px;
  height : 150px;
  
  background : pink;
  
  border-radius : 60px 60px 0 0;
  
  -webkit-transform : rotate(45deg);
  transform : rotate(45deg);
}

#heart:after
{
  -webkit-transform : rotate(-45deg);
  transform : rotate(-45deg);
  left : -35px;
}


@keyframes beat
{
  0%{
    transform : scale(1);
  }
  10%{
    transform : scale(1.3);
  }
  30%{
    transform : scale(1);
  }
  40%{
    transform : scale(1.2);
  }
  60%{
    transform : scale(1);
  }
}
@-webkit-keyframes beat
{
  0%{
    -webkit-transform : scale(1);
  }
  10%{
    -webkit-transform : scale(1.3);
  }
  30%{
    -webkit-transform : scale(1);
  }
  40%{
    -webkit-transform : scale(1.2);
  }
  60%{
    -webkit-transform : scale(1);
  }
}

/** Cardio Box **/
#cardio
{
  position : absolute;
  top : 60%;
  left : 50%;
  margin-left : -150px;
  
  width : 300px;
  height : 150px;
  
  background : #071706;
  border : 3px solid gray;
  
  overflow: hidden;
}

.pointer
{
  width : 20px;
  height : 20px;
  border-radius : 20px;
  
  position : absolute;
  top : 45%;
  left : 45%;
  
  background : #B83535;
  
  -webkit-animation : point 2s linear infinite;
  animation : point 2s linear infinite;
}

@-webkit-keyframes point
{
  0%{
    -webkit-transform : translateY(0px);
  }
  10%{
    -webkit-transform : translateY(-28px);
  }
  20%{
    -webkit-transform : translateY(16px);
  }
  30%{
    -webkit-transform : translateY(0px);
  }
  40%{
    -webkit-transform : translateY(-28px);
  }
  50%{
    -webkit-transform : translateY(16px);
  }
  60%{
    -webkit-transform : translateY(0px);
  }
}
@keyframes point
{
  0%{
    transform : translateY(0px);
  }
  10%{
    transform : translateY(-28px);
  }
  20%{
    transform : translateY(16px);
  }
  30%{
    transform : translateY(0px);
  }
  40%{
    transform : translateY(-28px);
  }
  50%{
    transform : translateY(16px);
  }
  60%{
    transform : translateY(0px);
  }
}

.line
{
  width : 30px;
  height : 2px;
  
  position : absolute;
  top : 50%;
  
  background : #BA6E6E;
  
  -webkit-animation : lines 2s linear infinite;
  animation : lines 2s linear infinite;
}

.start
{
  width : 180px;
  -webkit-transform : translateX(-150px);
  transform : translateX(-150px);
}

.up1
{
  -webkit-transform : translateX(20px) translateY(-17px) rotate(-60deg) ;
  transform : translateX(20px) translateY(-17px) rotate(-60deg) ;
  width : 40px;
}

.up2
{
  -webkit-transform : translateX(53px) translateY(12px) rotate(-60deg) ;
  transform : translateX(53px) translateY(12px) rotate(-60deg) ;
  width : 30px;
}

.down
{
  -webkit-transform : translateX(25px) translateY(-5px) rotate(80deg) ;
  transform : translateX(25px) translateY(-5px) rotate(80deg) ;
  width : 60px;
}

.shortEnd
{
  -webkit-transform : translateX(75px);
  transform : translateX(75px);
  width : 10px;
}

.longEnd
{
  width : 150px;
  -webkit-transform : translateX(75px);
  transform : translateX(75px);
}

.right
{
  left : 55px;
}

@-webkit-keyframes lines
{
  0%{
    margin-left : 130px;
  }
  10%{
    margin-left : 95px;
  }
  20%{
   margin-left : 85px;
  }
  30%{
    margin-left : 70px;
  }
  40%{
     margin-left : 45px;
  }
  50%{
    margin-left : 30px;
  }
  70%{
    margin-left : 0px;
  }
  100%{
    margin-left : -120px;
  }
}
@keyframes lines
{
  0%{
    margin-left : 130px;
  }
  10%{
    margin-left : 95px;
  }
  20%{
   margin-left : 85px;
  }
  30%{
    margin-left : 70px;
  }
  40%{
     margin-left : 45px;
  }
  50%{
    margin-left : 30px;
  }
  70%{
    margin-left : 0px;
  }
  100%{
    margin-left : -120px;
  }
}

#hide
{
  position : absolute;
  left : 52%;
  
  width : 50%;
  height : 100%;
  background : #071706;
  border-left : 2px dotted rgba(200,200,200,0.2);
}

#notaline
{
  width : 300px;
  height : 2px;
  
  position : absolute;
  top : 50%;
  
  background : #BA6E6E;
}