body {
    background: #d1d8ec;
  }
  section {
    height: 100vh;
    display: flex;
    justify-content: center;
    flex-direction: column;
  }
  section article {
    align-self: center;
    width: 20em;
  }
  .container {
    z-index: 1;
    display: flex;
    overflow: hidden;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 4em;
  }
  .chart {
    font-size: 1em;
    perspective: 1000px;
    perspective-origin: 50% 50%;
    backface-visibility: visible;
  }
  .bar {
    font-size: 1em;
    position: relative;
    height: 10em;
    transition: all 0.3s ease-in-out;
    transform: rotateX(60deg) rotateY(0deg);
    transform-style: preserve-3d;
  }
  .bar .face {
    font-size: 2em;
    position: relative;
    width: 100%;
    height: 2em;
    background-color: rgba(254, 254, 254, 0.3);
  }
  .bar .face.side-a,
  .bar .face.side-b {
    width: 2em;
  }
  .bar .side-a {
    transform: rotateX(90deg) rotateY(-90deg) translateX(2em) translateY(1em)
      translateZ(1em);
  }
  .bar .side-b {
    transform: rotateX(90deg) rotateY(-90deg) translateX(4em) translateY(1em)
      translateZ(-1em);
    position: absolute;
    right: 0;
  }
  .bar .side-0 {
    transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em)
      translateZ(-1em);
  }
  .bar .side-1 {
    transform: rotateX(90deg) rotateY(0) translateX(0) translateY(1em)
      translateZ(3em);
  }
  .bar .top {
    transform: rotateX(0deg) rotateY(0) translateX(0em) translateY(4em)
      translateZ(2em);
  }
  .bar .floor {
    box-shadow: 0 0.1em 0.6em rgba(0, 0, 0, 0.3),
      0.6em -0.5em 3em rgba(0, 0, 0, 0.3), 1em -1em 8em #fefefe;
  }
  .growing-bar {
    transition: all 0.3s ease-in-out;
    background-color: rgba(236, 0, 140, 0.6);
    width: 0%;
    height: 2em;
    animation: progress 5s linear forwards;
  }
  .bar .side-a, .bar .growing-bar {
      background-color: rgba(236, 0, 140, .6);
  }
  .bar .side-0 .growing-bar {
      box-shadow: -0.5em -1.5em 4em rgba(236, 0, 140, .8);
  }
  .bar .floor .growing-bar {
      box-shadow: 0em 0em 2em rgba(236, 0, 140, .8);
  }
  @keyframes progress {
    from {
      width: 0%;
    }
    to {
      width: 100%;
    }
  }