.ocean{
	position:absolute;
	height:100%;
	width:100%;
	top:50%;
	left:50%;
	transform:translate(-50%,-50%);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='100%25' width='100%25'%3E%3Cdefs%3E%3Cfilter id='filter-eri793pwz'%3E%3CfeTurbulence baseFrequency='0.05' numOctaves='4'/%3E%3CfeColorMatrix class='anim' type='hueRotate' values='0'%3E%3Canimate attributeName='values' from='0' to='360' dur='5s' repeatCount='indefinite'/%3E%3C/feColorMatrix%3E%3CfeColorMatrix values='0.2 -2 -2.3 4.1 -2.6 2.2 -1.4 2.9 -2.5 -2.4 -2.2 -3.2 4.4 -0.6 3 -4.4 2.3 -4.1 1.4 1.8'/%3E%3CfeSpecularLighting result='specOut' specularExponent='60' lighting-color='rgb(35,100,218)'%3E%3CfePointLight id='pointLight' x='200' y='200' z='30'%3E%3C/fePointLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='rgb(25,60,178)'%3E%3C/rect%3E%3Crect width='100%25' height='100%25' filter='url(%23filter-eri793pwz)'%3E%3C/rect%3E%3C/svg%3E");
}
img{
	position:absolute;
	width:150px;
	top:200px;
	left:200px;
	transform:translate(-50%,-50%);
	user-select:none;
	cursor:none;
	pointer-events:none;
	z-index:5;
	animation:rocktheboat 5s infinite;
}
.shipShadow{
	position:absolute;
	height:25px;
	width:145px;
	border-radius:50%;
	top:200px;
	left:200px;
	transform:translate(-50%,-50%);
	user-select:none;
	cursor:none;
	pointer-events:none;
	z-index:4;
	animation:rocktheboat 5s infinite;
	background:rgba(0,0,0,0.4);
	box-shadow:0px 0px 15px rgba(0,0,0,1);
}
@keyframes rocktheboat{
	0%{transform:translate(-50%,-50%);}
	50%{transform:translate(-51%,-51%);}
	100%{transform:translate(-50%,-50%);}
}