html, body {
        background-color: #fbfbfb;
	margin:0px
}
body {
	min-height: 100vh;
	position: relative;
}
body::after {
	content: '';
	display: block;
	height: 10%;
}
footer {
	position: absolute;
	bottom: 0;
	width: 80%;
	height: 9vh;
}
.container {
        width:80%;
	margin:auto;
	overflow:auto;
	height: 100vh;
	background-color: white;
}
.equidistant {
	display:flex;
	justify-content: space-between;
}
.center {
	text-align:center;
}
#main-header {
        padding-top:0pt;
	font-family: arial, sans-serif;
}
#main-header h1 {
	text-align: center;
	font-size: 100pt;
	overflow:hidden;
	padding: 10px 0px;
	margin: auto;
}
#main-footer {
	background-color: #e6e6e6;
	color:black;
	font-family:arial, sans-serif;
	text-align:center;
}
#content {
	margin: auto;
        color: black;
	font-family: arial, sans-serif;
	width: 90%;
	padding-bottom: 10vh;
}
#content h1 {
	text-align: center;
}
table, tr, td {
	border-bottom: 1px solid #e6e6e6;
	border-collapse: collapse;
}
table {
	width: 100%;
}
td {
	padding: 1% 0%;
}
table th:first-of-type {
	width: 15%
}
table th:nth-of-type(2) {
	width: 85%
}
#navbar {
        background-color: #e6e6e6;
	color:#fff;
}
#navbar div {
	margin: 0;
	overflow: hidden;
	display: flex;
}
#navbar a {
	text-decoration: none;
	display:inline-block;
        width:20%;
	position:sticky;
	padding:1% 0%;
	border-bottom:none;
        color:white;
	text-align:center;
	font-size:20px;
	margin:0px;
	transition:0.3s;
	transition-delay:0.1s;
	font-family:arial, sans-serif;
	font-weight: bold;
}
a#navbar-1:hover {
	background-color: #e0bebe;
}
a#navbar-2:hover {
	background-color: #ccbee0;
}
a#navbar-3:hover {
	background-color: #bee0c9;
}
a#navbar-4:hover {
	background-color: #e0dcbe;
}
a#navbar-5:hover {
	background-color: #bed9e0;
}
.potion-right {
	height: 100%;
	width:10%;
	right: 0;
	position: absolute;
	bottom: 0;
	overflow: hidden;
}
.potion-right img {
	position: inherit;
	width: 50%;
	bottom: 0%;
	left: 25%;
}
.potion-right div {
	animation-name: bubble-right;
}
.potion-left {
	height: 100%;
	width:10%;
	left: 0;
	position: absolute;
	bottom: 0;
	overflow: hidden;
}
.potion-left img {
	position: inherit;
	width: 50%;
	bottom: 0%;
	left: 25%;
}
.potion-left div {
	animation-name: bubble-left;
}
.bubble {
	left: calc( 50% - 0.25vw );
	position:absolute;
	border-radius: 50%;
	animation-duration: 20s;
	animation-iteration-count: infinite;
	animation-timing-function: ease-in;
}
.bubble-1 {
	animation-delay: 4s;
}
.bubble-2 {
	animation-delay: 8s;
}
.bubble-3 {
	animation-delay: 12s;
}
.bubble-4 {
	animation-delay: 16s;
}
@keyframes bubble-right {
	0%	{bottom: calc( 5vw + 0.05vw); height: 0.5vw; width: 0.5vw; opacity: 0;}
	10%	{opacity: 1;}
	20%	{left: calc( 100% - 0.8vw );}
	40%	{left: 0%;}
	60%	{left: calc( 100% - 1.4vw );}
	80%	{left: 0%;}
	100%	{bottom: 100%; height: 2vw; width: 2vw; left: calc( 50% - 1vw ); }
}
@keyframes bubble-left {
	0%	{bottom: calc( 5vw + 0.05vw); height: 0.5vw; width: 0.5vw; opacity: 0;}
	10%	{opacity: 1;}
	20%	{left: 0%;}
	40%	{left: calc(100% - 1.1vw );}
	60%	{left: 0%;}
	80%	{left: calc(100% - 1.7vw );}
	100%	{bottom: 100%; height: 2vw; width: 2vw; left: calc( 50% - 1vw ); }
}