body {
	margin: 0px !important;
	overflow: hidden;
	background-color: #6bb6cd;
	background: linear-gradient(0deg, #6bb6cd 0%, #1a789e 100%);
	height: 100vh;
}

.piso {
	background-color: #498ea7;
	background: linear-gradient(0deg, #498ea7 0%, #1f485c 90%, #1c3d4e 100%) ;
	position: fixed;
	border: #13252e solid 4px;
	bottom: -10vh;
	left: -25vw;
	height: 40vh;
	width: 150vw;
	border-radius: 50%;
	animation: mar 5s infinite ease;
}

@keyframes mar {
	0% {
		filter: brightness(1);
	}
	50% {
		filter: brightness(.8);
	}
	100% {
		filter: brightness(1);
	}
}

.barco {
	position: fixed;
	bottom: 25vh;
	left: calc(50vw - 150px);
	font-size: 300px;
	color: #13303f;
	animation: moveship 10s infinite;
	text-shadow: -25px 0px 0px #000;
	z-index: 999;
}

.barco::after {
	content: "";
	height: 30px;
	width: 80px;
	color:transparent;
	background-color: gray;
	text-shadow: -25px 0px 0px #000;
	position: absolute;
	top: 146px;
    left: 193px;
	border-radius: 40px;
}

@keyframes moveship {
	0% {
		transform: rotateX(-70deg) rotate(-95deg) translateX(-80px) scale(.9);
	}
	25%{
		transform: rotateX(-73deg)  rotate(-85deg) translateX(80px) scale(1.2);
	}
	50% {
		transform: rotateX(-80deg)  rotate(-95deg) translateX(-80px) scale(1.5);
	}
	75%{
		transform: rotateX(-74deg)  rotate(-85deg) translateX(80px) scale(1.2);
	}
	100% {
		transform: rotateX(-70deg)  rotate(-95deg) translateX(-80px) scale(.9);
	}
}

.n {
	position: fixed;
	color: #ffffff60;
	text-shadow: 0px 0px 14px #ffffff50;
	font-size: 150px;
}

.n1 {
	top: 50px;
	left: 10vw;
	animation: nube 5s infinite ease-in;
}

.n2 {
	top: 50px;
	right: 10vw;
	animation: nube 5.5s infinite ease-in-out;
}

.n3 {
	top: 10px;
	right: 40vw;
	animation: nube 4.7s infinite ease-out;
}

@keyframes nube {
	0% {
		transform: scale(3) translateY(-200px);
	}
	100% {
		transform: scale(0) translateY(50vh);
	}
}