.scene {
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	top: 0;
	height: 100vh;
}
.bg2 {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	min-height: 100vh;
	background: url(../images/bg.gif);
	animation: animateBg 100s linear infinite;
	background-size: cover;
	background-repeat: repeat-x;
}
@keyframes animateBg {
	0% {
		background-position-x: 0px;
	}
	100% {
		background-position-x: -2000px;
	}
}

/* .bg2 .ship1 {
    position: absolute;
    left: -500px;
    bottom: 80px;
    max-width: 500px;
    z-index: 1;
    animation: ship1 80s linear infinite;
    filter: brightness(110%);
}

@keyframes ship1{
    0%
    {
        transform: translateX(0px);
    }
    90%,100%
    {
        transform: translateX(calc(100vw + 500px));
    }
}

.bg2 .ship2 {
    position: absolute;
    right: -750px;
    bottom: 30px;
    max-width: 750px;
    z-index: 10;
    animation: ship2 30s linear infinite;
}

@keyframes ship2{
    0%
    {
        transform: translateX(0px) rotateY(180deg);
    }
    90%,100%
    {
        transform: translateX(calc(-100vw - 750px)) rotateY(180deg);
    } 
} */