/* VARIABLES */
:root {
  --default-delay: .5s;
  --bars: 15;
  --graph-height: 300px; /* Ensure this matches the inline style or adjust as needed */
}

/* KEYFRAMES */
@keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    height: var(--graph-height);
  }
}
/* KEYFRAMES */
@-webkit-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}

@-moz-keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}

@keyframes animate-width {
  0% {
    width: 0;
  }
  100% {
    visibility: visible;
  }
}

@-webkit-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}

@-moz-keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}

@keyframes animate-height {
  0% {
    height: 0;
  }
  100% {
    visibility: visible;
  }
}

/* STYLES */
#bar-chart {
  height: auto;
  width: 100%;
  position: relative;
  opacity: 1;
}

#bar-chart * {
  box-sizing: border-box;
}

#bar-chart .graph {
  height: auto;
  position: relative;
}

#bar-chart .bars {
  height: var(--graph-height);
  padding: 0 2%;
  position: absolute;
  width: 600px; /* Ensure this matches the inline style or adjust as needed */
  z-index: 10;
}

#bar-chart .bar-group {
  display: block;
  float: left;
  height: 100%;
  position: relative;
  width: 19%;
  margin-right: 10px;
}

#bar-chart .bar {
  visibility: hidden;
  height: 0;
  border-radius: 3px 3px 0 0;
  bottom: 0;
  cursor: pointer;
  position: absolute;
  text-align: center;
  width: 25%;
}

#bar-chart .bar.in-view {
  visibility: visible;
  animation: animate-height;
  animation-timing-function: cubic-bezier(.35, .95, .67, .99);
  animation-duration: calc(var(--default-delay) * 2);
  animation-fill-mode: forwards;
}

.stat-1 {
  background-color: rgb(73, 53, 45);
}

.stat-2 {
  background-color: rgb(248, 174, 74);
}

.stat-3 {
  background-color: rgb(74, 178, 248);
}