.battery-container {
  width: 100px;
  height: 50px;
  border: 4px solid white;
  border-radius: 8px;
  position: relative;
  margin: 0 auto;
  /* Creates the small battery terminal at the top */
}
.battery-container::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background-color: white;
  position: absolute;
  top: 50%;
  right: -19px;
  transform: translateY(-50%);
  border-radius: 0 4px 4px 0;
}

.battery-level {
  background-color: green;
  height: 100%; /* Default value */
  width: 100%;
  border-radius: 4px;
  transition: background-color 0.5s ease, height 0.5s ease;
}

.battery-percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: sans-serif;
  font-weight: bold;
  color: white;
}