:root {
--main-bg-color:  black;
--main-bg-color1:  black;
--main-bg-color2:  black;
--main-bg-color3:  black;
--main-bg-color4:  black;
--main-bg-color5:  black;
--main-bg-color6:  black;
--main-bg-color7:  black;
--main-bg-color8:  black;
--main-bg-color9:  black;
--main-bg-color10:  black;
--main-bg-color11:  black;
--main-bg-color12:  black;
--main-bg-color13:  black;
--main-bg-color14:  black;
--main-bg-color15:  black;
--main-bg-color16:  black;
--main-bg-color17:  black;
--main-bg-color18:  black;
--main-bg-color19:  black;
--main-bg-color20:  black;
--main-bg-color21:  black;
}


html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;

  overflow:none;

}

body {
  background-color: black;
  width: 100%;
  height: 100%;

  overflow: none;
}

#container {
	width: 100%;
	height:100%;

  overflow:none;  overflow: none;
	margin: 0 auto;
  align-items: center;
  box-sizing: border-box;

}

#content {
	margin: 7px;
  box-sizing: border-box;
  width: 100%;
	height: 100%;  overflow: none;

  align-items: center;
  box-sizing: border-box;
  font-family:  'apercu';

align-content: center;
 line-height: 115%;
}

.outputSample {
  overflow: none;
  align-items: center;
  box-sizing: border-box;
}


/* 3d */
.container {

margin: 0;
height:100%;
width:100%;

  perspective:var(--prspfondo);
font-size: 5vmax;

color:yellow;


-webkit-animation: deformatiempo var(--tmp8) ease infinite;
-moz-animation: deformatiempo var(--tmp8) ease infinite;
animation: deformatiempo var(--tmp8) ease infinite;

}
.container2 {

margin: 0;
height:100%;
width:100%;

  perspective:var(--prspfondo1);
font-size: 5vmax;

color:yellow;


-webkit-animation: deformatiempo2 var(--tmp9) ease infinite;
-moz-animation: deformatiempo2 var(--tmp9) ease infinite;
animation: deformatiempo2 var(--tmp9) ease infinite;

}
.container3 {

margin: 0;
height:100%;
width:100%;

  perspective:var(--prspfondo2);
font-size: 5vmax;

color:yellow;


-webkit-animation: deformatiempo3 var(--tmp10) cubic-bezier(0.5, 0.2, 0.3, 1.0) infinite;
-moz-animation: deformatiempo3 var(--tmp10) cubic-bezier(0.5, 0.2, 0.3, 1.0) infinite;
animation: deformatiempo3 var(--tmp10) cubic-bezier(0.5, 0.2, 0.3, 1.0) infinite;

}
.container4 {

margin: 0;
height:100%;
width:100%;

  perspective:var(--prspfondo3);
font-size: 5vmax;

color:yellow;


-webkit-animation: deformatiempo4 var(--tmp7) ease infinite;
-moz-animation: deformatiempo4 var(--tmp7) ease infinite;
animation: deformatiempo4 var(--tmp7) ease infinite;

}
.divvacia1 {
	width:var(--fw);
	min-width: 120px; min-height: 120px;
	height:var(--fh);
	position: absolute;
	top:var(--cento);
	left:var(--cento1);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY10));
border-color: #00ff4e;
border-style:dashed;
border-width: 3px 3px;

background: linear-gradient(var(--ratius1), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),var(--main-bg-color1), var(--main-bg-color2),var(--main-bg-color3), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0) ) ;
	  -webkit-animation: deforma var(--tmp4) ease infinite;
	  -moz-animation: deforma var(--tmp4) ease infinite;
	  animation: deforma var(--tmp4) ease infinite;
  background-size: 400% 400%;
}
.divvacia2 {
	width:var(--fw3);
min-width: 120px; min-height: 120px;
	height:var(--fh3);
	position: absolute;
	top:var(--cento2);
	left:var(--cento3);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY9));
border-color: #00ff4e;
border-style:dashed;
border-width: 3px 3px;

justify-content: center;
align-items: center;
background: linear-gradient(var(--ratius2), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),var(--main-bg-color4), var(--main-bg-color5),var(--main-bg-color6)) ;
	  -webkit-animation: deforma2 var(--tmp1) ease infinite;
	  -moz-animation: deforma2 var(--tmp1) ease infinite;
	  animation: deforma2 var(--tmp1) ease infinite;
  background-size: 400% 400%;
}
.divvacia3 {
	width:var(--fw2);
	min-width: 120px; min-height: 120px;
	height:var(--fh2);
	position: absolute;
	top:var(--cento4);
	left:var(--cento5);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY11));
	border-color: #00ff4e;
border-style:dashed;
	border-width: 3px 3px;
  background: linear-gradient(var(--ratius1), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),var(--main-bg-color7), var(--main-bg-color8),var(--main-bg-color9));
	-webkit-animation: deforma1 var(--tmp5) ease infinite;
	-moz-animation: deforma1 var(--tmp5) ease infinite;
	animation: deforma1 var(--tmp5) ease infinite;
background-size: 400% 400%;
}

.divvacia4 {
	width:var(--fw4);
min-width: 120px; min-height: 120px;
	height:var(--fh4);
	position: absolute;
	top:var(--cento6);
	left:var(--cento7);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY5));
border-color: #00ff4e;
border-style:dashed;
border-width: 3px 3px;
background: linear-gradient(var(--ratius5), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),var(--main-bg-color10), var(--main-bg-color11),var(--main-bg-color12)) ;
	  -webkit-animation: deforma3 var(--tmp6) ease infinite;
	  -moz-animation: deforma3 var(--tmp6) ease infinite;
	  animation: deforma3 var(--tmp6) ease infinite;
  background-size: 400% 400%;
}

.divvacia5 {
	width:var(--fw5);
min-width: 120px; min-height: 120px;
	height:var(--fh5);
	position: absolute;


	top:var(--cento8);
	left:var(--cento9);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY2));
border-color: #00ff4e;
border-style:dashed;
border-width: 3px 3px;
background: linear-gradient(var(--ratius1), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),var(--main-bg-color13), var(--main-bg-color14),var(--main-bg-color15)) ;
	  -webkit-animation: deforma4 var(--tmp3) ease infinite;
	  -moz-animation: deforma4 var(--tmp3) ease infinite;
	  animation: deforma4 var(--tmp3) ease infinite;
  background-size: 400% 400%;
}
.divvacia6 {
	width:var(--fw6);
min-width: 120px; min-height: 120px;
	height:var(--fh6);
	position: absolute;
	top:var(--cento10);
	left:var(--cento11);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreX3));
border-color: #00ff4e;
border-style:dashed;
border-width: 3px 3px;
background: linear-gradient(var(--ratius3), rgba(0,0,0,0), rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),rgba(0,0,0,0),var(--main-bg-color16), var(--main-bg-color17),var(--main-bg-color18)) ;
	  -webkit-animation: deforma5 var(--tmp2) ease infinite;
	  -moz-animation: deforma5 var(--tmp2) ease infinite;
	  animation: deforma5 var(--tmp2) ease infinite;
  background-size: 400% 400%;
}


/* animaciones */
@-webkit-keyframes deforma {
  10%{transform: rotate(var(--rotates3)) skewY(var(--escreY5));
  background-position:100% 120%;}

  30%{transform: scale(var(--scamy)) rotateX(var(--rotates4))skewY(var(--escreX6)) skewX(var(--escreY7));
  background-position:350% 160%;
	top: var(--anim1);
	left: var(--anim2);}

    50%{transform: skewX(var(--escreX4)) translate3d(var(--cento),var(--cento3),var(--cento12)) rotateX(var(--rotates1)));
    background-position:120% 50%;}
70%{transform: scale(var(--scamn)) rotateX(var(--rotates2))skewY(var(--escreX3));
background-position:30% 230%;
top: var(--anim3);
left: var(--anim4);}
90%{transform: rotateX(var(--rotates1)) translateX(var(--cento2));
	filter: grayscale(var(--grey));
background-position:330% 130%;}
98% {transform: rotate(var(--rotates3)) skewY(var(--escreY2));
	  background-position:100% 120%;}


}


@-webkit-keyframes deforma1 {
0%{transform: rotateY(var(--rotates1)) skewY(var(--escreX3));
background-position:130% 230%;
top: var(--anim3);
left: var(--anim4);}

30%{transform: rotateX(var(--rotates5))rotate(var(--rotates3)) skewY(var(--escreY3))translateX(var(--cento9));
	top: var(--anim4);
  z-index: var(--indx3);
	left: var(--anim5);
background-position:230% 230%;}
60%{transform:translateY(var(--cento3)) rotateX(var(--rotates5))skewY(var(--escreX2)) rotate(var(--rotates3));

	left: var(--anim2);
background-position:330% 130%;
	z-index: var(--indx1);}
90% {transform: rotate(var(--rotates3)) skewY(var(--escreY2));
	  background-position:300% 120%;
	top: var(--cento12);}


}


@-webkit-keyframes deforma2 {
10%{transform: rotateX(var(--rotates)) skewY(var(--escreX1))rotateY(var(--rotates6));
background-position:160% 190%;
top: var(--anim2);
left: var(--cento10);}
15%{ transform: rotateX(var(--rotates2)) skewY(var(--escreX2))rotateY(var(--rotates1)) rotate(var(--rotates1));
background-position:190% 290%;
left: var(--cento1);
border-radius: var(--radios4);

z-index: var(--indx3);}
30%{transform: scale(var(--scamy))rotate(var(--rotates4)) rotateY(var(--rotates1)) skewX(var(--escreY2)) translateY(var(--cento3));
	top: var(--anim2);
	left: var(--anim6);
z-index: var(--indx1);

background-position:150% 230%;}

60%{transform: rotateX(var(--rotates2))rotateY(var(--rotates3))skewY(var(--escreX5)) rotate(var(--rotates)) skewY(var(--escreY5));

	top: var(--cento5);
background-position:130% 330%;}

90% {transform: rotate(var(--rotates5))translateX(var(--cento8)) skewX(var(--escreY5));
	  background-position:150% 420%;
	top: var(--cento10);}


}


@-webkit-keyframes deforma3 {
4%{transform:rotateX(var(--rotates2)) skewX(var(--escreX4));
background-position:130% 130%;
top: var(--cento4);
z-index: var(--indx2);
left: var(--anim5);
	}

	25%{transform: rotateX(var(--rotates5)) skewY(var(--escreY6))translateX(var(--cento5)) rotate(var(--rotates1)) skewX(var(--escreX2));
top: var(--cento4);
left: var(--anim2);

	background-position:230% 230%;}
45%{transform:scale(var(--scamy)) rotateX(var(--rotates3))rotate(var(--rotates2)) skewX(var(--escreX3));

    left: var(--anim4);
}
	60%{transform:scale(var(--scamn)) rotateY(var(--rotates1))rotateX(var(--rotates2)) skewX(var(--escreX5));


right:var(--cento11);
top: var(--cento4);
z-index: var(--indx1);
	background-position:130% 330%;}

	90% {transform: rotate(var(--rotates2)) translateY(var(--cento8)) skewY(var(--escreY5)) rotateY(var(--rotates3));
  background-position:450% 420%;
top: var(--cento11);}


	}

	@-webkit-keyframes deforma4 {
	0%{transform:rotateX(var(--rotates6)) rotate(var(--rotates1)) skewY(var(--escreY1)) skewX(var(--escreX4)) ;
	background-position:230% 330%;
	top: var(--cento2);
	left: var(--anim5);

}

	20%{transform: rotateX(var(--rotates2))scale(var(--scamy)) skewY(var(--escreY6)) rotate(var(--rotates6)) rotateY(var(--rotates4));
top: var(--cento2);
left: var(--anim3);
z-index: var(--indx1);
background-position:180% 380%;}

	40%{transform: rotate(var(--rotates6)) rotateX(var(--rotates5)) translateY(var(--cento)) skewY(var(--escreX5));
right:var(--cento10);
top: var(--cento5);
border-radius: var(--radios4);

	background-position:170% 210%;}

	60% {transform: rotate(var(--rotates1)) skewY(var(--escreY3)) rotateY(var(--rotates2)) rotate(var(--rotate)) scale(var(--cento4));
	background-position:450% 420%;

top: var(--cento11);
z-index: var(--indx4);}

83% {transform: rotate(var(--rotates10))skewX(var(--escreX3))  skewY(var(--escreY7)) rotateY(var(--rotates8));
background-position:450% 420%;

top: var(--cento1);



}
100% {transform: rotate(var(--rotates10))scaleX(var(--cento3))  skewY(var(--escreY7)) scale(var(--cento5));
background-position:250% 230%;
  top: var(--cento6);

}
	}

	@-webkit-keyframes deforma5 {
	12%{transform:rotateX(var(--rotates9)) rotate(var(--rotates3)) translateX(var(--cento3)) skewX(var(--escreY4)) ;
	background-position:230% 230%;
	top: var(--cento2);
	left: var(--anim4);
}

	25%{transform: rotateX(var(--rotates10))scale(var(--cento2)) skewY(var(--escreX2)) rotate(var(--rotates8));
top: var(--cento7);
filter: blur(var(--blurear)+2)
left: var(--anim1);

background-position:230% 140%;}

	35%{transform: translateY(var(--cento5))rotate(var(--rotates1)) rotateX(var(--rotates7)) skewY(var(--escreX3))rotateY(var(--rotates10));
filter: blur(var(--blurear)+12);
left:var(--cento1);
top: var(--cento7);
z-index: var(--indx1);

	background-position:270% 110%;}

	55% {transform: rotate(var(--rotates2)) skewX(var(--escreY2)) rotateX(var(--rotates3));
	background-position:450% 420%;

top: var(--cento3);}

73% {transform: rotateX(var(--rotates3))skewX(var(--escreX4))  skewY(var(--escreY2)) rotateY(var(--rotates7));
background-position:450% 420%;

top: var(--cento11);
z-index: var(--indx3);

}

93% {transform: rotateX(var(--rotates2))skewX(var(--escreX5)) scale(var(--scamy)) skewY(var(--escreY2)) rotateY(var(--rotates7)) rotate(var(--rotates3)) translateY(var(--cento3));
background-position:450% 420%;

top: var(--cento11);
z-index: var(--indx3);


}

	}


@-webkit-keyframes deformatiempo {
0%{
	  perspective: var(--prsp3);
}

25%{ 	  perspective: var(--ratius);}

45%{ 	  perspective: var(--prsp);}

	65%{ 	  perspective: var(--ratius1);}

90%{	  perspective: var(--ratius3);}
	}

  @-webkit-keyframes deformatiempo3 {
  0%{
  	  perspective: var(--ratius3);
      
  }

  25%{ 	  perspective: var(--prsp);}

  45%{ 	  perspective: var(--ratius2);}

  	65%{ 	  perspective: var(--prsp2);}

  90%{	  perspective: var(--ratius4);}
  	}

    @-webkit-keyframes deformatiempo4 {
    0%{
    	  perspective: var(--ratius5);
    }

    25%{ 	  perspective: var(--prsp6);}

    45%{ 	  perspective: var(--ratius1);}

    	65%{ 	  perspective: var(--prsp);}

    90%{	  perspective: var(--ratius2);}
    	}

	@-webkit-keyframes deformatiempo2 {
	0%{
  perspective: var(--ratius1);
	}

	25%{ 	  perspective: var(--prsp5);}

	45%{ 	  perspective: var(--rotate4);
;}

65%{ 	  perspective: var(--prsp);}

	90%{	  perspective: var(--rotate5);}
}




@media screen and (max-width: 700px) {
  #content, #output {
    width: 100%;
    height:56%; /* The width is 100%, when the viewport is 800px or smaller */
  }
  p {
    font-size: 5vmax;
    margin-bottom: 3%;
    max-height: 55%;
  }
}