@keyframes water-to-high {
  100% {
    background-color: rgb(241, 31, 31);
    color: white;
  }
}

@keyframes low-fuel {
  100% {
    background-color: rgb(255, 255, 0);
    color: white;
  }
}

@keyframes high-fuel {
  100% {
    background-color: rgb(255, 255, 0);
    color: white;
  }
}

@keyframes high-water {
  100% {
    background-color: rgb(255, 255, 0);
    color: white;
  }
}

@keyframes fuel-to-low {
  100% {
    background-color: rgb(241, 31, 31);
    color: white;
  }
}

@keyframes fuel-to-high {
  100% {
    background-color: rgb(241, 31, 31);
    color: white;
  }
}
  
@keyframes Water {
  100% {
    background-color: #0b90ff;
    color: white;
  }
}

.water-to-high {
  /* NAME | TIME | ITERATION */
  animation: water-to-high 1s infinite;
}

.low-fuel {
  /* NAME | TIME | ITERATION */
  animation: low-fuel 1s infinite;
}

.high-fuel {
  /* NAME | TIME | ITERATION */
  animation: high-fuel 1s infinite;
}

.high-water {
  /* NAME | TIME | ITERATION */
  animation: high-water 1s infinite;
}

.fuel-to-low {
  /* NAME | TIME | ITERATION */
  animation: fuel-to-low 1s infinite;
}

.fuel-to-high {
  /* NAME | TIME | ITERATION */
  animation: fuel-to-high 1s infinite;
}


.low {
  /* NAME | TIME | ITERATION */
  animation: Low 1s infinite;
}
  
.high {
  /* NAME | TIME | ITERATION */
  animation: High 1s infinite;
}
  
.water {
  /* NAME | TIME | ITERATION */
  animation: Water 1s infinite;
}

.manhole {
    border: 2px solid #000;
    width: 30px;
    height: 20px;
    border-bottom: 2px solid #fff;
    margin: 13px auto -13px
  }
  
.tank {
    border-radius: 170px;
    height: 100px;
    width: 100px;
    border: 2px solid #000;
    position: static;
    display: block;
    clear: right;
    margin: 10px auto;
    overflow: hidden;
    transform: rotate(180deg);
  }
  
.tank .stock {
    position: relative;
    width: 100%;
    bottom: 0
  }
  
.tank .fuel {
    position: absolute;
    width: 100%
  }
  
.tank .water {
    position: absolute;
    background-color: #0b90ff;
    width: 100%
   }