body{
  margin:0;
  font-family:sans-serif;
  background:#e6f5ea;
  transition:0.3s;
}

/* DARK MODE */
body.dark{
  background:#121212;
  color:white;
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  padding:15px;
}

/* TANK */
.tank-container{
  position:relative;
  width:220px;
  margin:40px auto;
}

.tank-img{
  width:100%;
  position:absolute;
  z-index:2;
}

/* WATER CANVAS */
#waterCanvas{
  position:absolute;
  bottom:0;
  width:100%;
  height:100%;
  z-index:1;
}

/* PERCENT */
.percent{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  font-size:30px;
  color:white;
  z-index:3;
}

/* SWITCH */
.switch{
  display:block;
  margin:20px auto;
  width:60px;height:30px;
}
.switch input{display:none;}
.slider{
  background:#ccc;
  border-radius:30px;
  display:block;
  height:100%;
}
.slider:before{
  content:"";
  width:25px;height:25px;
  background:white;
  border-radius:50%;
  position:absolute;
  transition:0.3s;
}
input:checked + .slider{
  background:green;
}
input:checked + .slider:before{
  transform:translateX(30px);
}