body {
  margin: 0%;
  padding: 0%;
  background: radial-gradient(circle at 50% 55%, hsl(212, 55%, 53%), hsl(212, 55%, 43%), hsl(212, 55%, 23%));
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  overflow: hidden;
}

#tree {
  z-index: 1;
  width: 100vw;
  height: 100vh;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
}

#canvas {
  position: absolute;
  z-index: 2;
  height: 100vh;
  width: 100vw;
}

.red {
  fill: #aa1231;
  -webkit-animation: 0.6s red-flash ease-in-out infinite;
  animation: 0.6s red-flash ease-in-out infinite;
}

@-webkit-keyframes red-flash {
  40% {
    fill: #ea385c;
  }

  80% {
    fill: #aa1231;
  }
}

@keyframes red-flash {
  40% {
    fill: #ea385c;
  }

  80% {
    fill: #aa1231;
  }
}

.gold-lt {
  fill: #c1881c;
  -webkit-animation: 0.6s gold-lt-flash ease-in-out infinite;
  animation: 0.6s gold-lt-flash ease-in-out infinite;
}

@-webkit-keyframes gold-lt-flash {
  40% {
    fill: #e7b75c;
  }

  80% {
    fill: #c1881c;
  }
}

@keyframes gold-lt-flash {
  40% {
    fill: #e7b75c;
  }

  80% {
    fill: #c1881c;
  }
}

.blue-lt {
  fill: #1f3e64;
  -webkit-animation: 0.6s blue-lt-flash ease-in-out infinite;
  animation: 0.6s blue-lt-flash ease-in-out infinite;
}

@-webkit-keyframes blue-lt-flash {
  40% {
    fill: #386fb1;
  }

  80% {
    fill: #1f3e64;
  }
}

@keyframes blue-lt-flash {
  40% {
    fill: #386fb1;
  }

  80% {
    fill: #1f3e64;
  }
}

.blue-dk {
  fill: #0f1f2f;
  -webkit-animation: 0.6s blue-dk-flash ease-in-out infinite;
  animation: 0.6s blue-dk-flash ease-in-out infinite;
}

@-webkit-keyframes blue-dk-flash {
  40% {
    fill: #28527c;
  }

  80% {
    fill: #0f1f2f;
  }
}

@keyframes blue-dk-flash {
  40% {
    fill: #28527c;
  }

  80% {
    fill: #0f1f2f;
  }
}

.gold-dk {
  fill: #69512a;
  -webkit-animation: 0.6s gold-dk-flash ease-in-out infinite;
  animation: 0.6s gold-dk-flash ease-in-out infinite;
}

@-webkit-keyframes gold-dk-flash {
  40% {
    fill: #b28947;
  }

  80% {
    fill: #69512a;
  }
}

@keyframes gold-dk-flash {
  40% {
    fill: #b28947;
  }

  80% {
    fill: #69512a;
  }
}

.g1 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.g2 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.g3 {
  -webkit-animation-delay: 0.8s;
  animation-delay: 0.8s;
}