body *, *::before, *::after {
    content: "";
    display: block;
    position: absolute;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    /*transition: 0.1s linear;*/
  }
  
  html, body {
    margin: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#048, #0FF);
    overflow: hidden;
  }
  
  #intro {
    top: 20vh;
    left: 20vw;
    right: 20vw;
    background: #DA7;
    padding: 2vw;
    font-size: 2vw;
    font-family: serif;
    color: #530;
    border: 1vw solid #973;
    border-radius: 4vw;
    box-shadow: 0.5vw 0.5vw 2vw rgba(0,0,0,0.6)
  }
  .vertical #intro {
    font-size: 4vw;
    text-align: center;
  }
  #intro * {
    position: relative;
  }
  #intro h1 {
    color: #963;
    text-shadow: 0.2vw 0.2vw 0.2vw #B84;
    text-align: center;
    margin-bottom: 3vh;
  }
  #start-bt {
    text-align: right;
    padding-right: 1vw;
  }
  .vertical #start-bt { padding: 2vh 1vw 1vh }
  #intro button {
    display: inline-block;
    font-size: 3vw;
    font-family: serif;
    font-weight: bold;
    color: #963;
    background: #EC9;
    border: 3px solid #973;
    border-radius: 1vw;
    padding: 1px 1vw;
  }
  .vertical #intro button {
    font-size: 6vw;
  }
  
  #ctrl {
    top: 0;
    right: 0;
    height: 50%;
    width: 100%;
  }
  
  #jumpP, #lifeP {
    bottom: 0;
    right: 20px;
    width: 30px;
    height: 70%;
    background: rgba(0,0,0,0.1);
    border: 3px solid rgba(0,0,0,0.3);
    border-radius: 8px;
  }
  
  #jumpPF, #lifePF {
    bottom: 0;
    right: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(#F00, #800);
    border-radius: 5px;
  }
  
  #lifeP {
    right: auto;
    left: 20px;
  }
  #lifePF {
    background: #0F0;
    box-shadow: inset 0 0 20px #070;
    transition: 0.5s;
  }
  
  .vertical #jumpP, .vertical #lifeP {
    width: 20px;
    border: 2px solid rgba(0,0,0,0.3);
  }
  
  #jumpP p {
    font-family: sans-serif;
    font-size: 20px;
    line-height: 20px;
    transform: rotate(-90deg);
    top: 30px;
    left: -15px;
    color: rgba(255,255,255,0.5);
  }
  .vertical #jumpP p {
    font-size: 17px;
    left: -14px;
  }
  
  #lifeP carrot-wrap {
    transform: rotate(-45deg);
    left: -1px;
    top: 14px;
  }
  #lifeP carrot::before {
    box-shadow: -2px 0px 7px rgba(0,0,0,0.5);
  }
  .vertical #lifeP carrot-wrap {
    left: -6px;
  }
  
  #distEl {
    top: 20px;
    width: 100%;
    text-align: center;
    color: #FFF;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 30px;
    text-shadow: 1px 1px 4px rgba(0,0,0,0.7);
  }
  #distEl div {
    top: 150px;
    width: 100%;
    font-size: 22px;
  }
  
  #canvas {
    bottom: 0;
    left: 50%;
  }
  
  #e { /* earth */
    left: -1500px;
    width: 3000px;
    height: 3000px;
  }
  #e::after {
    background: radial-gradient(#380 65%, #8C0 70%);
    width: 100%;
    height: 100%;
  }
  
  bg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  #bg2 {
    opacity: 0.6;
  }
  
  m { /* mountain */
    background: linear-gradient(90deg, #4A0, #380);
    left: 50%;
    top: 50%;
    height: 500px;
    margin-top: -250px;
  }
  
  bw { /* bunny wrapper */
    left: 50%;
    top: 50%;
    width: 80px;
    height: 80px;
    margin: -40px 0 0 -40px;
    z-index:20;
  }
  b { /* bunny */
    top: -30px;
    left: -30px;
    height: 60px;
    width: 60px;
    background: linear-gradient(160deg, #FFF 40%, #CCC);
    transform: rotate(-1deg);
    transition: 0s;
  }
  bw *, bw *::before, bw *::after {
    transition: 0.3s;
  }
  bw.landing b {
    transform: rotate(20deg);
    transition: 1.5s;
  }
  @keyframes tail-shake {
    08.5% { top: 20px }
    10.0% { top: 18px }
    11.5% { top: 22px }
    13.0% { top: 18px }
    14.5% { top: 22px }
    16.0% { top: 18px }
    17.5% { top: 22px }
    19.0% { top: 18px }
    20.5% { top: 20px }
  }
  b::before { /* bunny tail */
    left: -15px;
    top: 20px;
    width: 20px;
    height: 20px;
    background: #FFF;
    animation: tail-shake 7s linear infinite;
  }
  b::after { /* bunny front leg */
    right: 0px;
    bottom: -6px;
    width: 12px;
    height: 50px;
    border-radius: 6px;
    background: #FFF;
    transform: rotate(-15deg);
  }
  bw.stopped b::after {
    transition: 0s;
  }
  bw.jump b::after {
    right: -20px;
    bottom: 10px;
    transform: rotate(-90deg);
  }
  bw.landing b::after {
    right: -10px;
    bottom: -6px;
    transform: rotate(-50deg);
  }
  bl { /* bunny back leg */
    left: -5px;
    bottom: -5px;
    width: 40px;
    height: 40px;
    background: #FFF;
    transition: 0s;
  }
  bl::before {
    left: 0px;
    bottom: 0px;
    width: 50px;
    height: 10px;
    border-radius: 5px;
    background: #FFF;
  }
  bw.jump bl {
    bottom: -15px;
    transform: rotate(90deg);
  }
  bw.jump bl::before {
    bottom: -13px;
    transform: rotate(45deg);
  }
  bw.landing bl {
    left: 0;
    bottom: -15px;
    transform: rotate(-20deg);
  }
  bw.landing bl::before {
    Xtransition: bottom 0.1s;
  }
  bh { /* bunny head */
    right: -10px;
    top: -20px;
    width: 37px;
    height: 37px;
    background: #FFF;
  }
  @keyframes head-shake {
    30% { top: -20px }
    31% { top: -15px }
    32% { top: -20px }
    33% { top: -15px }
    34% { top: -20px }
  }
  bw.stopped bh {
    animation: head-shake 9s linear infinite;
  }
  bw.landing bh {
    top: 0;
    transform: rotate(45deg);
  }
  bh::before {
    left: 5px;
    top: -30px;
    width: 10px;
    height: 35px;
    background: #FFF;
    transform: rotate(-10deg);
    transition: 0.5s;
  }
  bh::after {
    left: -5px;
    top: -25px;
    width: 10px;
    height: 35px;
    background: #FFF;
    transform: rotate(-30deg);
  }
  @keyframes ear-before-shake {
    15% { transform: rotate(-10deg); left: 5px }
    20% { transform: rotate( 10deg); left:15px }
    22% { transform: rotate(-10deg); left: 5px }
    24% { transform: rotate( 10deg); left:15px }
    26% { transform: rotate(-10deg); left: 5px }
  }
  bw.stopped bh::before {
    animation: ear-before-shake 8s linear infinite;
  }
  @keyframes ear-after-shake {
    15% { transform: rotate(-30deg); left:-5px }
    20% { transform: rotate(-40deg); left:-8px }
    22% { transform: rotate(-30deg); left:-5px }
    24% { transform: rotate(-40deg); left:-8px }
    26% { transform: rotate(-30deg); left:-5px }
  }
  bw.stopped bh::after {
    animation: ear-after-shake 8s linear infinite;
  }
  bw.prepare bh {
    top: -10px;
  }
  bw.prepare bh::before {
    left: 9px;
    transform: rotate(0deg);
  }
  bw.prepare bh::after {
    left: -1px;
    transform: rotate(-20deg);
  }
  bw.jump bh::before, bw.landing bh::before {
    left: -10px;
    top: -16px;
    height: 40px;
    transform: rotate(-90deg);
  }
  bw.jump bh::after, bw.landing bh::after {
    left: -15px;
    top: -4px;
    transform: rotate(-100deg);
  }
  
  bw.dead b {
    transform: rotate(-135deg);
  }
  bw.dead.hunted b {
    transform: rotate(45deg);
  }
  
  bw.dead *, bw.dead *::before, bw.dead *::after {
    border-right: 7px solid #B00;
  }
  bw.dead b::after {
    left: 52px;
    transform: rotate(-40deg);
    xborder: none;
    border-right: 5px solid #B00;
  }
  bw.dead bl::before {
    bottom: -13px;
    transform: rotate(45deg);
    border: none;
    border-top: 5px solid #B00;
  }
  bw.dead bh {
    left: 30px;
    transform: rotate(40deg);
    border: none;
    border-top: 7px solid #B00;
  }
  bw.dead.hunted bh {
    transform: rotate(110deg);
  }
  
  @keyframes flower-wave {
    10% { left: -7px }
    12% { left: -9px }
    14% { left: -5px }
    16% { left: -9px }
    18% { left: -5px }
    20% { left: -9px }
    22% { left: -5px }
    24% { left: -7px }
  }
  f { /* flor */
    left: 50%;
    top: 50%;
    width: 3px;
    height: 100px;
    margin-top: -50px;
    border-radius: 0;
    background: #070;
  }
  f::before {
    width: 10px;
    height: 4px;
    background: #081;
    border-bottom: 3px solid #070;
    left: 2px;
    top: 20px;
  }
  f::after {
    width: 6px;
    height: 6px;
    background: #FC0;
    border: 5px solid #F0C;
    left: -7px;
    top:  -1px;
    Xanimation: flower-wave 20s linear infinite;
  }
  
  
  carrot-wrap {
    left: 50%;
    top: 50%;
  }
  
  carrot::before {
    background: orange;
    width: 40px;
    height: 8px;
    transform: rotate(-45deg);
  }
  leaves::before, leaves::after {
    left: 29px;
    top: -23px;
    width: 30px;
    height: 30px;
    border-right: 4px solid #060;
    transform: rotate(-95deg) skewX(20deg);
  }
  leaves::after {
    top: -21px;
    left: 34px;
    width: 20px;
    transform: rotate(-74deg) skewX(20deg);
  }
  
  #fireWrap {
    left: 50%;
    top: 50%;
    z-index: 30;
  }
  
  #fire {
    transform: translate(-300px,-1500px);
    width: 600px;
    height: 60px;
    Xbackground: #800;
  }
  
  #fire > w {
    z-index: 2;
    animation: fire 2s linear infinite;
  }
  #fire > w::before {
    width: 0;
    height: 0;
    top: -80px;
    left: 0;
    border: 60px solid transparent;
    border-bottom: 100px solid #F00;
    border-top: none;
    border-radius: 60px;
  }
  #fire > w::after {
    width: 0;
    height: 0;
    top: -140px;
    left: 20px;
    border: 40px solid transparent;
    border-bottom: 135px solid #FD0;
    border-top: none;
    border-radius: 40px;
    filter: blur(8px);
  }
  #fire > w.fireBig::after {
    filter: blur(12px);
  }
  
  #fire .fireEdge { top: 35px }
  #fire > .fireEdge::before { border-left-width: 30px; border-right-width: 30px; border-radius: 30px }
  #fire > .fireEdge::after { border-width: 0 20px 70px 20px; border-radius: 20px; top: -60px; left: 10px; }
  
  #fire .fireBackEdge { top: 20px }
  #fire > .fireBackEdge::before { border-left-width: 45px; border-right-width: 45px }
  #fire > .fireBackEdge::after { border-width: 0 30px 70px 30px; border-radius: 30px; top: -60px; left: 15px; }
  
  #fire .fireBack { top: 15px }
  #fire .fireMid { top: 55px }
  #fire > .fireBig::before { border-bottom: 200px solid #F00; top: -190px }
  
  @keyframes fire {
    0% { transform: scale(1, 1) translate(0, 0) skewX(5deg) }
    25% { transform: scale(1, 0.5) translate(0, -10px) skewX(0deg) }
    50% { transform: scale(1, 1) translate(0, 0) skewX(-5deg) }
    75% { transform: scale(1, 0.5) translate(0, -10px) skewX(0deg) }
    100% { transform: scale(1, 1) translate(0, 0) skewX(5deg) }
  }
  
  bird-wrap {
    left: 50%;
    top: 50%;
    z-index: 30;
  }
  
  bird {
    left: -90px;
    top: 0px;
    width: 180px;
    height: 80px;
    background: #630;
    border-radius: 0 0 100px 100px;
    z-index: 2;
  }
  
  bird::before {
    right: -30px;
    top: -10px;
    height: 20px;
    border-radius: 0;
    border: 0 solid transparent;
    border-right-color: #630;
    border-width: 15px 70px 35px 0;
  }
  
  bird head {
    top: -3px;
    left: -40px;
    width: 0;
    height: 20px;
    border-radius: 0;
    border: 0 solid transparent;
    border-right-color: #840;
    border-width: 8px 55px 30px 0;
  }
  
  bird head::before {
    left: -20px;
    top: 3px;
    border-radius: 0;
    border: 0 solid transparent;
    border-right-color: #DA0;
    border-width: 15px 20px 2px 0;
  }
  
  bird head::after {
    left: 10px;
    top: 5px;
    border-radius: 0;
    border: 0 solid transparent;
    border-right-color: #520;
    border-width: 8px 15px 0 0;
  }
  
  bird-wrap .wing {
    top: 10px;
    left: -50px;
  }
  
  bird-wrap .wing::before {
    background: linear-gradient(#630, #520 50%);
    width: 100px;
    height: 80px;
    border-radius: 0 0 0 100%;
    animation: fly 10s linear infinite;
  }
  
  @keyframes fly {
      0% { transform: skewX(30deg) scale(1, 0.9) translate(8px, -8px) }
      2% { transform: skewX(20deg) scale(1, 1.1) translate(0px, -0px) }
      4% { transform: skewX(30deg) scale(1, 0.9) translate(8px, -8px) }
      8% { transform: skewX(20deg) scale(1, 1.1) translate(0px, -0px) }
     10% { transform: skewX(30deg) scale(1, 0.9) translate(8px, -8px) }
     12% { transform: skewX(20deg) scale(1, 1.1) translate(0px, -0px) }
     14% { transform: skewX(30deg) scale(1, 0.9) translate(8px, -8px) }
     16% { transform: skewX(20deg) scale(1, 1.1) translate(0px, -0px) }
     18% { transform: skewX(30deg) scale(1, 0.9) translate(8px, -8px) }
     20% { transform: skewX(20deg) scale(1, 1.1) translate(0px, -0px) }
    100% { transform: skewX(30deg) scale(1, 0.9) translate(8px, -8px) }
  }
  
  bird-wrap wing-left {
    z-index: 3;
  }
  bird-wrap wing-right.wing {
    top: 5px;
    left: -40px;
  }
  bird-wrap wing-right.wing::before {
    background: #582800;
  }
  
  @keyframes capim-wave {
    10% { transform: rotate( 0deg) }
    20% { transform: rotate(-8deg) }
    30% { transform: rotate( 0deg) }
    40% { transform: rotate(-8deg) }
    50% { transform: rotate( 0deg) }
  }
  k, k::before, k::after { /* grass (capim) */
    left: 50%;
    top: 50%;
    width: 1px;
    height: 1px;
    margin-top: -15px;
    border-radius: 0;
    border: 4px solid transparent;
    border-top: 0 solid transparent;
    border-bottom: 30px solid #8C0;
  }
  k::before{
    top: 20px;
    left: -12px;
    /*animation: capim-wave 6s linear infinite; disable to reduce CPU load*/
  }
  k::after {
    top: 20px;
    left: 4px;
    /*animation: capim-wave 6s linear infinite; disable to reduce CPU load*/
  }