:root {
  --gradient-color-red: linear-gradient(
    90deg,
    hsl(7, 89%, 46%) 15%,
    hsl(11, 93%, 68%) 100%
  );
  --gradient-color-orange: linear-gradient(
    90deg,
    hsl(22, 89%, 46%) 15%,
    hsl(54, 90%, 68%) 100%
  );
  --gradient-color-yellow: linear-gradient(
    90deg,
    hsl(54, 89%, 46%) 15%,
    hsl(92, 90%, 45%) 100%
  );
  --gradient-color-green: linear-gradient(
    90deg,
    hsl(92, 89%, 46%) 15%,
    hsl(92, 90%, 68%) 100%
  );
}

* {
  margin: 0;
  padding: 0;
  font-family: poppins;
}

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("bg.svg") no-repeat center center;
  background-size: cover;
}
.main {
  width: 300px;
  height: 300px;
  background-color: rgb(243, 243, 243);
  border-radius: 10px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
  text-align: center;
}

.battery-section {
  height: calc(100% - 4rem);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.battery-body {
  position: relative;
  top: 5%;
  left: 20%;
  border: 1px solid rgb(218, 218, 218);
  width: 80px;
  height: 150px;
  border-radius: 20px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  overflow: hidden;
}

.battery-liquid {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80px;
  height: 150px;
  /* background: var(--gradient-color-red); */
  box-shadow: inset -10px 0 12px hsla(0, 0%, 0%, 0.1),
    inset 12px 0 12px hsla(0, 0%, 0%, 0.15);
  transition: 0.3s;
}

.battery-liquid::after {
  content: "";
  position: absolute;
  height: 8px;
  box-shadow: inset 0 -3px 6px hsla(0, 0%, 0%, 0.2);
  left: 0;
  right: 0;
  margin: 0 auto;
  top: -4px;
  border-radius: 50%;
}

.battery-info {
  /* border: 2px solid red; */
  padding: 1rem;
  height: calc(100% - 4rem);
}

h4 {
  margin: 1rem;
  font-size: 1.5rem;
}