body {
	margin: 0;
}

#potion {
	width: 100%;
	height: 100%;
	background-color: #000000;
	display: flex;
    /* flex-direction: column;*/
    align-items: center;
}

#potionContainer {
	width: 200px;
	height: 200px;
	margin: auto;
	position: absolute;
}

@media screen and (min-width: 864px) {
	#potionContainer {
		left: 364px;
	}
}

@media screen and (max-width: 865px) {
	#potionContainer {
		left: calc(47% - 100px);
	}
}

#container svg {
	position: absolute;
	vertical-align: middle;
	z-index: 1;
}

.bubble {
	position: absolute;
	background-color: transparent;
	width: 10px;
	height: 10px;
	border: 1px rgba(255, 255, 255, 0.7) solid;
	border-radius: 50%;
	z-index: 2;
}

#bubble1 {
	animation: anim1 1.3s 0.1s infinite;
	left: 70px;
	top: 120px;
}

#bubble2 {
	animation: anim2 1.2s 0.0s infinite;
	left: 110px;
	top: 110px;
}

#bubble3 {
	animation: anim3 1.1s 0.2s infinite;
	left: 85px;
	top: 125px;
}

#bubble4 {
	animation: anim4 1.15s 0.3s infinite;
	left: 105px;
	top: 140px;
}

@keyframes anim1{
  0%{
	transform: translate(0px, 0px);
  }
  10%{
	transform: translate(2px, -10px)
  }
  20%{
	transform: translate(5px, -20px)
  }
  30%{
	transform: translate(10px, -35px)
  }
  40%{
	transform: translate(13px, -55px)
  }
  50%{
	transform: translate(15px, -70px)
  }
  60%{
	transform: translate(15px, -80px)
  }
  70%{
	transform: translate(15px, -90px)
  }
  80%{
	transform: translate(15px, -100px)
  }
  90%{
	transform: translate(15px, -110px);
  }
  100%{
	transform: translate(15px, -120px);
  }
}

@keyframes anim2{
	0%{
	  transform: translate(0px, 0px);
	}
	10%{
	  transform: translate(-2px, -10px)
	}
	20%{
	  transform: translate(-4px, -20px)
	}
	30%{
	  transform: translate(-5px, -35px)
	}
	40%{
	  transform: translate(-5px, -55px)
	}
	50%{
	  transform: translate(-5px, -70px)
	}
	60%{
	  transform: translate(-5px, -80px)
	}
	70%{
	  transform: translate(-5px, -90px)
	}
	80%{
	  transform: translate(-5px, -100px)
	}
	90%{
	  transform: translate(-5px, -110px);
	}
	100%{
	  transform: translate(-5px, -120px);
	}
}

@keyframes anim3{
	0%{
	  transform: translate(0px, 0px);
	}
	10%{
	  transform: translate(1px, -9px)
	}
	20%{
	  transform: translate(2px, -18px)
	}
	30%{
	  transform: translate(3px, -27px)
	}
	40%{
	  transform: translate(4px, -35px)
	}
	50%{
	  transform: translate(5px, -48px)
	}
	60%{
	  transform: translate(5px, -60px)
	}
	70%{
	  transform: translate(5px, -70px)
	}
	80%{
	  transform: translate(5px, -80px)
	}
	90%{
	  transform: translate(5px, -90px);
	}
	100%{
	  transform: translate(5px, -100px);
	}
}

@keyframes anim4{
	0%{
	  transform: translate(0px, 0px);
	}
	10%{
	  transform: translate(0px, -9px)
	}
	20%{
	  transform: translate(-1px, -18px)
	}
	30%{
	  transform: translate(-1px, -27px)
	}
	40%{
	  transform: translate(-2px, -35px)
	}
	50%{
	  transform: translate(-2px, -48px)
	}
	60%{
	  transform: translate(-3px, -60px)
	}
	70%{
	  transform: translate(-3px, -70px)
	}
	80%{
	  transform: translate(-4px, -80px)
	}
	90%{
	  transform: translate(-4px, -90px);
	}
	100%{
	  transform: translate(-4px, -100px);
	}
}