.chart-one, .chart-two {
  width: 100px;
  height: 100px;
  /* transition: 1s; */
  margin: 0;
  position: relative;
  transform-origin: top right;
  margin-right: 5px;
  transform: scale(-1,1) translatex(100%);
  
}
/* 
.chart-one.animate svg .circle-foreground {
  -webkit-animation: offset 3s ease-in-out forwards;
          animation: offset 3s ease-in-out forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
}

.chart-one.animate figcaption:after {
  -webkit-animation: chart-one-label 3s steps(25) forwards;
          animation: chart-one-label 3s steps(25) forwards;
  -webkit-animation-delay: 1s;
          animation-delay: 1s;
} */

.chart-one svg, .chart-two svg {
  width: 100%;
  height: 100%;
}

.circle-background {
  opacity: 20%;
  stroke: #111;
}

.chart-one svg .circle-background, .chart-one svg .circle-foreground {

  transform: rotate -90deg;
  r: 40px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: var(--health-color);
  stroke-width: 6px;

}
.chart-two svg .circle-background, .chart-two svg .circle-foreground {
  r: 40px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke:  var(--energy-color);
  stroke-width: 6px;
}


#circle-food, #circle-food-shadow {
  r: 30px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: var(--food-color);
  stroke-width: 6px;
}

#circle-water, #circle-water-shadow {
  r: 30px;
  cx: 50%;
  cy: 50%;
  fill: none;
  stroke: var(--water-color);
  stroke-width: 6px;
}

.chart-one circle, .chart-two circle {
  transition: stroke-dasharray 2s;
}



/* PIE */
/* 
.pie {
  border-radius: 100%;
  height: calc(var(--size, 200) * 1px);
  overflow: hidden;
  position: relative;
  width: calc(var(--size, 200) * 1px);
}
.pie__segment {
  --a: calc(var(--over50, 0) * -100%);
  --b: calc((1 + var(--over50, 0)) * 100%);
  --degrees: calc((var(--offset, 0) / 100) * 360);
  -webkit-clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  clip-path: polygon(var(--a) var(--a), var(--b) var(--a), var(--b) var(--b), var(--a) var(--b));
  height: 100%;
  position: absolute;
  transform: translate(0, -50%) rotate(90deg) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 100%;
  width: 100%;
  z-index: calc(1 + var(--over50));
}
.pie__segment:after,
.pie__segment:before {
  background: var(--bg, #e74c3c);
  content: '';
  height: 100%;
  position: absolute;
  width: 100%;
}
.pie__segment:before {
  --degrees: calc((var(--value, 45) / 100) * 360);
  transform: translate(0, 100%) rotate(calc(var(--degrees) * 1deg));
  transform-origin: 50% 0%;
}
.pie__segment:after {
  opacity: var(--over50, 0);
}
* {
  box-sizing: border-box;
}
body {
  align-items: center;
  background: #111;
  color: #fafafa;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  justify-content: center;
  min-height: 100vh;
}
label {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}
input {
  min-width: 80px;
}
.actions {
  display: grid;
  grid-gap: 4px;
  grid-template-columns: auto auto;
  z-index: 99;
}
 */