body {
	background-color: #777;
	font-family: sans-serif;
	margin: 0;
    padding: 0;
}


/* swimming fish - requires a page width of at least 1092px otherwise
the fish will swim off the page */
	
@keyframes swim {
	0% {
		transform: translate(0px, 0px) rotateY(180deg);
	}
	2% {
		transform: translate(20px, 0px) rotateY(0deg);
	}
	10% {
		transform: translate(200px, 0px) rotateY(20deg);
	}
	20% {
		transform: translate(400px, 0px) rotateY(-20deg);
	}
	30% {
		transform: translate(600px, 0px) rotateY(20deg);
	}
	40% {
		transform: translate(800px, 0px) rotateY(-20deg);
	}
	50% {
		transform: translate(1000px, 0px) rotateY(0deg);
	}
	52% {
		transform: translate(990px, 0px) rotateY(180deg);
	}
	60% {
		transform: translate(800px, 0px) rotateY(160deg);
	}
	70% {
		transform: translate(600px, 0px) rotateY(200deg);
	}
	80% {
		transform: translate(400px, 0px) rotateY(160deg);
	}
	90% {
		transform: translate(200px, 0px) rotateY(200deg);
	}
	100% {
		transform: translate(0px, 0px) rotateY(180deg);
	}
}

.fish {
  animation: swim 15s infinite ease-out;
}

@keyframes fin-wave {
	0% {
		transform: rotateX(-15deg);
	}
	50% {
		transform: rotateX(15deg);
	}
	100% {
		transform: rotateX(-15deg);
	}
}


@keyframes tail-wave {
	0% {
		transform: rotateY(-50deg);
	}
	50% {
		transform: rotateY(50deg);
	}
	100% {
		transform: rotateY(-50deg);
	}
}

.top-fin {
	animation: fin-wave 1s infinite ease-in-out;
	transform-origin: left bottom;
}

.bottom-fin {
	animation: fin-wave 1s infinite ease-in-out;
	transform-origin: left top;
}

.tail {
	animation: tail-wave 1s infinite ease-in-out;
	transform-origin: 80px center;
}

.ocean-top {
	background-image: url(ocean-top.svg);
	background-size: 100px;
	background-position: top left;
	background-repeat: repeat-x;
	height: 18px;
}

.ocean {
	background-color: #3372AD;
	/* height: calc(100% - 318px); */
	height: calc(100vh - 218px); 
}


.fish-swim-lane {
	width: 1092px;
	margin: auto;
	padding-top: 80px;
}

.loading-message {
	color: white;
	font-size: 22px;
	height: 200px;
	display: flex;
  align-items: center;
  justify-content: center;
	flex-direction: column;
}