@import url(https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap);

.card,
.content,
body{
    overflow: hidden;
}

body{
    width: 100vw;
    height: 100vh;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

.content
{
    display: block;
    width: 1000px;
    height: 562px;

}

.card,
.container{
    display: flex;
    align-items: center;
}

.card{
    width: 1280px;
    height: 720px;
    margin: 0;
    justify-content: center;
}

.container-full,
.content{
    width: 1000px;

    height: 562px;
}

.backgroundImage{
    position: absolute;

    width: 1000px;
}

.boyImage{
    position: absolute;
    width: 200px;
    margin-top: 350px;
    z-index: 2;
    animation: 200s linear infinite blur;
}
.high-seas{
    position: absolute;
    width: 200px;
    z-index: 10;
    margin-top: -250px;
}

.content{
    border-radius: 40px;
    animation: 200s linear infinite brightness;
}

.container{
    justify-content: center;
}

.container-full,
.face{
display: flex;
align-items: center;
overflow: hidden;
}


.container-full{
    margin: 0;
    justify-content: center;
    transform: scale(1);
    animation: 200s linear infinite zoom-in;
}

.cube,
.face{
    width: 870px;
    height: 190px;
}

.cube{
    position: relative;
    transform-style: preserve-3d ;
    perspective: 480px;
    transform-style:preserve-3d ;
    perspective-origin: 51% 70% ;
}

.face,
.hue{
    position: absolute;
}

.face{
    background: 0 0;
    border: 0 solid #000;
    opacity: 0.5;
}

.bottom,
.top{
    width: 870px;
    height: 870px;
}

p{
    white-space: nowrap;
    overflow: hidden;
    font-family: "bebas Neue", sans-serif;
    font-weight: 400;
    font-size: calc(6em + (190px / 10) * 0.7);
    padding-top: 20px;
    color: #fff;
}

span{
    color: red;
}

.front{
    transform: translateZ(435px);
    display: none;
}

.back {
	transform: translateZ(-435px) rotateY(180deg) scaleX(-1);
}
.left {
	transform: translateX(-435px) rotateY(-90deg) scaleX(-1);
}
.right {
	transform: translateX(435px) rotateY(90deg) scaleX(-1);
}
.top {
	transform: translateY(-435px) rotateX(90deg) scaleY(-1);
}
.bottom {
	transform: translateY(-245px) rotateX(-90deg) scaleY(-1);
}
.left p {
	margin-left: 480px;
	animation: 200s linear infinite left;
}
.back p {
	margin-left: -390px;
	animation: 200s linear infinite back;
}
.right p {
	margin-left: -1260px;
	animation: 200s linear infinite right;
}

@keyframes left {
	100% {
		margin-left: -54000px;
	}
}
@keyframes back {
	100% {
		margin-left: -54870px;
	}
}
@keyframes right {
	100% {
		margin-left: -55740px;
	}
}
.hue {
	top: 0;
	left: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
	mix-blend-mode: overlay;
	background: #1e5799;
	background: radial-gradient(ellipse at center, #1e5799 0, #7db9e8 100%);
	opacity: 1;
}
.hue.animated {
	-webkit-animation: 8s infinite filter-animation;
	animation: 8s infinite filter-animation;
}
.container-reflect {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 380px;
	filter: blur(10px);
}

.container-reflect .cube {
	perspective-origin: 51% -30%;
}
.container-reflect .back {
	transform: translateZ(-435px) rotateY(180deg) scaleX(-1) scaleY(-1);
}
.container-reflect .left {
	transform: translateX(-435px) rotateY(-90deg) scaleX(-1) scaleY(-1);
}

.container-reflect .right {
	transform: translateX(435px) rotateY(90deg) scaleX(-1) scaleY(-1);
}

.container-reflect p {
	transform: scaleY(70%);
}






@keyframes filter-animation {
	0%,
	100% {
		filter: hue-rotate(0deg);
	}
	50% {
		filter: hue-rotate(100deg);
	}
}
@keyframes zoom-in {
	0% {
		transform: scale(1);
	}
	100% {
		transform: scale(2.5);
	}
}
@keyframes blur {
	0% {
		filter: blur(0px);
	}
	100% {
		filter: blur(3px);
	}
}
@keyframes brightness {
	0% {
		filter: brightness(1) contrast(1);
	}
	100% {
		filter: brightness(0.8) contrast(1.3);
	}
}



.credits{
    position: absolute;
    text-align: center;
    font-style: italic;
    font-size: 22px;
    margin-top: 620px
}