@charset "UTF-8";
/** @author ivanmoreno @ivanmoreno_xyz **/

:root {
	--title-text-color: #707070;
	--color-0: #60a7bd;
	--color-1: #a1602b;
	--color-2: #3b5278;
	--text-color: #ffffff;
}

html, body {
	margin: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100vw;
	height: 100vh;
	touch-action: none;
	-ms-touch-action: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	position: fixed;
	/* background: #3E1E68; */
	background-image: linear-gradient( to bottom right, #3A6073, #16222A );
	font-family: 'Abel', sans-serif;
}

#wrapper {
	width: 100%;
	height: 100%;
	position: absolute;
	overflow: hidden;
	top: 0px;
	left: 0px;
	background-color: #000;
}

#viewport3d {

	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	right: 0px;

}

#progressBG {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 15;
	opacity: 1.0;
	background-color: var(--main-bg-color);
}

#progress {
	position: relative;
	z-index: 16;
	/* top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	opacity: 0.0;
	color: #0063A1;
	text-align: center;
	pointer-events: none; */
}

#progress img {
	position: absolute;
	z-index: 17;
}

.loading {
	position: fixed;
	z-index: 28;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	opacity: 0.0;
}


.title {
	position: absolute;
	color: #aaaaaa;
	top: 50%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	text-align: center;
	font-size: 1.1em;
}

.chapter {
	position: absolute;
	color: #aaaaaa;
	top: 53.5%;
	left: 50%;
	-webkit-transform: translate( -50%, -50% );
	-moz-transform: translate( -50%, -50% );
	-ms-transform: translate( -50%, -50% );
	-o-transform: translate( -50%, -50% );
	transform: translate( -50%, -50% );
	text-align: center;
	font-size: 2.2em;
}
/* 
@keyframes rotate {
	100% {
		transform: rotate(360deg)
	}
} */


.background {
    width: 100vw;
    height: 100vh;
    background-image: linear-gradient( to bottom right, #3A6073, #16222A );
}

.background span {
    width: 20vmin;
    height: 20vmin;
    border-radius: 20vmin;
    backface-visibility: hidden;
    position: absolute;
    animation-name: move;
    animation-duration: 6s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.background span:nth-child(1) {
    color: var( --color-0 );
    top: 7%;
    left: 56%;
    animation-duration: 14.4s;
    animation-delay: -7.7s;
    transform-origin: -19vw -23vh;
    box-shadow: 40vmin 0 9.4968462501vmin currentColor;
}
.background span:nth-child(2) {
    color: var( --color-0 );
    top: 98%;
    left: 41%;
    animation-duration: 14.5s;
    animation-delay: -10.1s;
    transform-origin: 5vw -1vh;
    box-shadow: 40vmin 0 11.2010545029vmin currentColor;
}
.background span:nth-child(3) {
    color: var( --color-1 );
    top: 42%;
    left: 1%;
    animation-duration: 12.2s;
    animation-delay: -13.6s;
    transform-origin: -15vw 25vh;
    box-shadow: -40vmin 0 8.4293585447vmin currentColor;
}
.background span:nth-child(4) {
    color: var( --color-0 );
    top: 71%;
    left: 49%;
    animation-duration: 14.9s;
    animation-delay: -7.2s;
    transform-origin: 19vw -23vh;
    box-shadow: 40vmin 0 5.743775776vmin currentColor;
}
.background span:nth-child(5) {
    color: var( --color-1 );
    top: 21%;
    left: 69%;
    animation-duration: 14.2s;
    animation-delay: -14.8s;
    transform-origin: -15vw -17vh;
    box-shadow: -40vmin 0 8.2429791382vmin currentColor;
}
.background span:nth-child(6) {
    color: var( --color-1 );
    top: 11%;
    left: 100%;
    animation-duration: 15.9s;
    animation-delay: -5.3s;
    transform-origin: -24vw -4vh;
    box-shadow: 40vmin 0 12.0991324704vmin currentColor;
}
.background span:nth-child(7) {
    color: var( --color-2 );
    top: 87%;
    left: 69%;
    animation-duration: 11.6s;
    animation-delay: -13.5s;
    transform-origin: -13vw -22vh;
    box-shadow: -40vmin 0 14.9628987206vmin currentColor;
}
.background span:nth-child(8) {
    color: var( --color-2 );
    top: 47%;
    left: 53%;
    animation-duration: 10.3s;
    animation-delay: -10.4s;
    transform-origin: 24vw -3vh;
    box-shadow: -40vmin 0 12.590178399vmin currentColor;
}
.background span:nth-child(9) {
    color: var( --color-0 );
    top: 22%;
    left: 40%;
    animation-duration: 15.7s;
    animation-delay: -11.6s;
    transform-origin: -11vw -3vh;
    box-shadow: 40vmin 0 13.4253798231vmin currentColor;
}
.background span:nth-child(10) {
    color: var( --color-0 );
    top: 54%;
    left: 23%;
    animation-duration: 14.9s;
    animation-delay: -6.1s;
    transform-origin: -3vw 15vh;
    box-shadow: 40vmin 0 9.0936558607vmin currentColor;
}
.background span:nth-child(11) {
    color: var( --color-1 );
    top: 20%;
    left: 49%;
    animation-duration: 12.5s;
    animation-delay: -8.4s;
    transform-origin: 11vw 20vh;
    box-shadow: -40vmin 0 13.8686902649vmin currentColor;
}
.background span:nth-child(12) {
    color: var( --color-2 );
    top: 73%;
    left: 31%;
    animation-duration: 10.3s;
    animation-delay: -8s;
    transform-origin: -10vw -3vh;
    box-shadow: -40vmin 0 14.0053410606vmin currentColor;
}
.background span:nth-child(13) {
    color: var( --color-2 );
    top: 92%;
    left: 83%;
    animation-duration: 10.3s;
    animation-delay: -6s;
    transform-origin: -23vw -17vh;
    box-shadow: -40vmin 0 14.8768212405vmin currentColor;
}
.background span:nth-child(14) {
    color: var( --color-0 );
    top: 63%;
    left: 95%;
    animation-duration: 12.5s;
    animation-delay: -5.4s;
    transform-origin: 0vw -18vh;
    box-shadow: -40vmin 0 12.7482869839vmin currentColor;
}
.background span:nth-child(15) {
    color: var( --color-2 );
    top: 62%;
    left: 67%;
    animation-duration: 11.7s;
    animation-delay: -5.5s;
    transform-origin: 12vw -5vh;
    box-shadow: 40vmin 0 13.541865708vmin currentColor;
}
.background span:nth-child(16) {
    color: var( --color-1 );
    top: 15%;
    left: 62%;
    animation-duration: 12.7s;
    animation-delay: -13.2s;
    transform-origin: -5vw -18vh;
    box-shadow: -40vmin 0 14.8321488805vmin currentColor;
}
.background span:nth-child(17) {
    color: var( --color-2 );
    top: 27%;
    left: 17%;
    animation-duration: 13.3s;
    animation-delay: -13.9s;
    transform-origin: -4vw -14vh;
    box-shadow: -40vmin 0 14.5471811901vmin currentColor;
}
.background span:nth-child(18) {
    color: var( --color-1 );
    top: 12%;
    left: 51%;
    animation-duration: 11s;
    animation-delay: -13.7s;
    transform-origin: 7vw 14vh;
    box-shadow: -40vmin 0 12.5490122041vmin currentColor;
}
.background span:nth-child(19) {
    color: var( --color-0 );
    top: 72%;
    left: 100%;
    animation-duration: 15.4s;
    animation-delay: -3s;
    transform-origin: 4vw 11vh;
    box-shadow: -40vmin 0 14.5389189018vmin currentColor;
}
.background span:nth-child(20) {
    color: var( --color-2 );
    top: 11%;
    left: 2%;
    animation-duration: 14.4s;
    animation-delay: -2.1s;
    transform-origin: 5vw -9vh;
    box-shadow: -40vmin 0 11.7501128554vmin currentColor;
}
@keyframes move {
    100% {
        transform: translate3d(0, 0, 1px) rotate(360deg);
    }
}