: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%;
  max-width: 800px;
  max-height: 800px;
  overflow:none;

}

body {
  background-color: var(--main-bg-color);
  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;
  max-width: 800px;
  max-height: 800px;
  align-items: center;
  box-sizing: -box;
  font-family:  'apercu';

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

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

.forma1{
  position:absolute;
  top: var(--cento);
  left: var(--cento1);
  width: var(--fw);
  height: var(--fh);
  min-width: 120px;
  min-height: 120px;
background-color: var(--main-bg-color1);
transform: rotate(var(--rotates2)) skewX(var(--escreX)) skewY(var(--escreY));
}

.forma1c{
  position:absolute;
  top: var(--cento2);
  left: var(--cento3);
  width: var(--fw1);
  height: var(--fh4);
  min-width: 120px;
  min-height: 120px;
transform: drop-shadow( var(--sombr1) var(--sombr2) var(--blurear) var(--main-bg-color21))
background-color: var(--main-bg-color11);
transform: rotate(var(--rotates2)) skewX(var(--escreX)) skewY(var(--escreY2));
}
.forma1b{
  position:absolute;
  top: var(--cento1);
  left: var(--cento);
  width: var(--fw2);
  height: var(--fh3);
  min-width: 120px;
  min-height: 120px;
  opacity:var(--opace);
background-color: var(--main-bg-color4);
transform: rotate(var(--rotates2)) skewX(var(--escreX1)) skewY(var(--escreY3));
}

.forma2{
  position:absolute;
  top: var(--cento3);
  left: var(--cento4);
  width: var(--fw2);
  height: var(--fh2);
  min-width: 120px;
  min-height: 120px;
  transform: rotate(var(--rotates1)) skewX(var(--escreX2)) skewY(var(--escreY2)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
 perspective:var(--prsp);
    background: linear-gradient(var(--ratius1), var(--main-bg-color2), var(--main-bg-color3),var(--main-bg-color4));
    background-size: 400% 400%;

    -webkit-animation: AnimationName var(--tmp1) ease infinite;
    -moz-animation: AnimationName var(--tmp1) ease infinite;
    animation: AnimationName var(--tmp1) ease infinite;
}
.forma2b{
  position:absolute;
  top: var(--cento6);
  left: var(--cento3);
  width: var(--fw4);
  height: var(--fh1);
  min-width: 120px;
  min-height: 120px;
  transform: rotate(var(--rotates1)) skewX(var(--escreX5)) skewY(var(--escreY1)) rotateX(var(--rotat2))  rotateY(var(--rotat1));
 perspective:var(--prsp);
    background: linear-gradient(var(--ratius3), var(--main-bg-color12), var(--main-bg-color6),var(--main-bg-color8));
    background-size: 400% 400%;
transform: drop-shadow( var(--sombr1) var(--sombr2) var(--blurear) var(--main-bg-color21))
    -webkit-animation: AnimationName var(--tmp2) ease infinite;
    -moz-animation: AnimationName var(--tmp2) ease infinite;
    animation: AnimationName var(--tmp2) ease infinite;
}

.forma2c{
  position:absolute;
  top: var(--cento4);
  left: var(--cento);
  width: var(--fw3);
  height: var(--fh);
  min-width: 120px;
  min-height: 120px;
  opacity:var(--opace3);
  transform: rotate(var(--rotates3)) skewX(var(--escreX1)) skewY(var(--escreY3)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
 perspective:var(--prsp);
    background: linear-gradient(var(--ratius1), var(--main-bg-color16), var(--main-bg-color2),var(--main-bg-color6));
    background-size: 400% 400%;

    -webkit-animation: AnimationName var(--tmp3) ease infinite;
    -moz-animation: AnimationName var(--tmp3) ease infinite;
    animation: AnimationName var(--tmp3) ease infinite;
}

.forma3
{
  position:absolute;
  top: var(--cento3);
  left: var(--cento4);
border-radius: var(--radios1);
width: var(--fw3);
height: var(--fh3);
min-width: 120px;
min-height: 120px;
transform: rotate(var(--rotates1)) skewX(var(--escreX3)) skewY(var(--escreY3)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
perspective:var(--prsp);
  background: linear-gradient(var(--ratius2), var(--main-bg-color5), var(--main-bg-color6),var(--main-bg-color7));
  background-size: 400% 400%;

  -webkit-animation: AnimationName var(--tmp2) ease infinite;
  -moz-animation: AnimationName var(--tmp2) ease infinite;
  animation: AnimationName var(--tmp2) ease infinite;

}
.forma3b
{
  position:absolute;
  top: var(--cento12);
  left: var(--cento15);
border-radius: var(--radios1);
width: var(--fw2);
height: var(--fh6);
min-width: 120px;
min-height: 120px;
transform: rotate(var(--rotates1)) skewX(var(--escreX3)) skewY(var(--escreY3)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
perspective:var(--prsp);
  background: linear-gradient(var(--ratius2), var(--main-bg-color15), var(--main-bg-color2),var(--main-bg-color17));
  background-size: 400% 400%;

  -webkit-animation: animapos1 var(--tmp5) ease infinite;
  -moz-animation: animapos1 var(--tmp5) ease infinite;
  animation: animapos1 var(--tmp5) ease infinite;

}

.forma4{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento6);
  left: var(--cento7);

width: var(--fw4);
height: var(--fh4);
border-style: dashed;
border: 5px 5px;
border-color: var(--main-bg-color13);
}
.forma4d{
    position:absolute;
  z-index: 2;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento13);
  left: var(--cento2);
  transform: drop-shadow( var(--sombr1) var(--sombr2) var(--blurear) var(--main-bg-color21))

width: var(--fw1);
height: var(--fh3);
border-style: dashed;
border: 5px 5px;
border-color: var(--main-bg-color13);

}
.forma4e{
    position:absolute;
  z-index: 2;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento13);
  left: var(--cento7);
  transform: drop-shadow( var(--sombr1) var(--sombr2) var(--blurear) var(--main-bg-color21))

width: var(--fw7);
height: var(--fh7);
border-style: dashed;
border: 5px 5px;
border-color: var(--main-bg-color13);

}
.forma4b{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento3);
  left: var(--cento1);

width: var(--fw1);
height: var(--fh5);
border-style: dashed;
border: 5px 5px;
border-color: var(--main-bg-color20);
-webkit-animation: animapos var(--tmp4) ease infinite;
-moz-animation: animapos var(--tmp4) ease infinite;
animation: animapos var(--tmp4) ease infinite;
}
.forma4c{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento4);
  left: var(--cento3);

width: var(--fw2);
height: var(--fh3);
border-style: dashed;
border: 5px 5px;
border-color: var(--main-bg-color3);
-webkit-animation: deformamov1 var(--tmp5) ease infinite;
-moz-animation: deformamov1 var(--tmp5) ease infinite;
animation: deformamov1 var(--tmp5) ease infinite;
}
.forma5{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento8);
  left: var(--cento9);

width: var(--fw5);
height: var(--fh5);

border: 5px 5px;
transform: rotate(var(--rotates1)) skewX(var(--escreX4)) skewY(var(--escreY5)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
perspective:var(--prsp);
  background: linear-gradient(var(--ratius2), var(--main-bg-color8), var(--main-bg-color9),var(--main-bg-color10));
  -webkit-animation: deforma var(--tmp4) ease infinite;
  -moz-animation: deforma var(--tmp4) ease infinite;
  animation: deforma var(--tmp4) ease infinite;
}
.forma5b{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento1);
  left: var(--cento3);

width: var(--fw1);
height: var(--fh2);

border: 5px 5px;
transform: rotate(var(--rotates1)) skewX(var(--escreX4)) skewY(var(--escreY5)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
perspective:var(--prsp);
  background: linear-gradient(var(--ratius1), var(--main-bg-color3), var(--main-bg-color12),var(--main-bg-color7));
  -webkit-animation: deforma1 var(--tmp6) ease infinite;
  -moz-animation: deforma1 var(--tmp6) ease infinite;
  animation: deforma1 var(--tmp6) ease infinite;
}

.forma5c{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento2);
  left: var(--cento);

width: var(--fw2);
height: var(--fh);
transform: drop-shadow( var(--sombr1) var(--sombr2) var(--blurear) var(--main-bg-color21))
border: 5px 5px;
transform: rotate(var(--rotates1)) skewX(var(--escreX4)) skewY(var(--escreY5)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
perspective:var(--prsp);
  background: linear-gradient(var(--ratius3), var(--main-bg-color9), var(--main-bg-color3),var(--main-bg-color5));
  -webkit-animation: deformamov2 var(--tmp5) ease infinite;
  -moz-animation: deformamov2 var(--tmp5) ease infinite;
  animation: deformamov2 var(--tmp5) ease infinite;
}
/* circulo, cuadrado, circulo deformable, cuadrado deformable*/
.forma6
{
  position:absolute;
  top: var(--cento10);
  left: var(--cento11);
border-radius: var(--ratius3);
width: var(--circle);
height: var(--circle);
min-width: 120px;
min-height: 120px;

  background: linear-gradient(var(--ratius2), var(--main-bg-color14), var(--main-bg-color15),var(--main-bg-color16));
  background-size: 400% 400%;


}
.forma7
{
  position:absolute;
  top: var(--cento12);
  left: var(--cento13);
border-radius: var(--ratius4);
width: var(--circle2);
height: var(--circle2);
min-width: 120px;
min-height: 120px;
transform: drop-shadow( var(--sombr1) var(--sombr2) var(--blurear) var(--main-bg-color21))
  background: linear-gradient(var(--ratius1), var(--main-bg-color17), var(--main-bg-color18),var(--main-bg-color19));
  background-size: 400% 400%;
  -webkit-animation: animapos var(--tmp8) ease infinite;
  -moz-animation: animapos var(--tmp8) ease infinite;
  animation: animapos var(--tmp8) ease infinite;

}
.forma7c
{
  position:absolute;
  top: var(--cento2);
  left: var(--cento7);
border-radius: var(--ratius2);
width: var(--circle);
height: var(--circle);
min-width: 120px;
min-height: 120px;
opacity:var(--opace3);
  background: linear-gradient(var(--ratius2), var(--main-bg-color7), var(--main-bg-color11),var(--main-bg-color3));
  background-size: 400% 400%;
  -webkit-animation: animapos var(--tmp5) ease infinite;
  -moz-animation: animapos var(--tmp5) ease infinite;
  animation: animapos var(--tmp5) ease infinite;

}


.forma7b
{
  position:absolute;
  top: var(--cento5);
  left: var(--cento8);

width: var(--circle1);
height: var(--circle1);
min-width: 120px;
min-height: 120px;

  background: linear-gradient(var(--ratius3), var(--main-bg-color4), var(--main-bg-color16),var(--main-bg-color9));
  background-size: 400% 400%;
  -webkit-animation: animapos var(--tmp7) ease infinite;
  -moz-animation: animapos var(--temp7) ease infinite;
  animation: animapos var(--tmp7) ease infinite;

}


.forma7d
{
  position:absolute;
  top: var(--cento11);
  left: var(--cento3);
border-radius: var(--ratius5);
width: var(--circle3);
height: var(--circle3);
min-width: 120px;
min-height: 120px;

border-style: dashed;
border: 5px 5px;
border-color: var(--main-bg-color4);


}
.forma8{
    position:absolute;
  z-index: 0;
  min-width: 120px;
  min-height: 120px;

  top: var(--cento14);
  left: var(--cento15);

width: var(--fw6);
height: var(--fh6);

border: 5px 5px;
transform: rotate(var(--rotates1)) skewX(var(--escreX4)) skewY(var(--escreY5)) rotateX(var(--rotat1))  rotateY(var(--rotat2));
perspective:var(--prsp);
  background: linear-gradient(var(--ratius2), var(--main-bg-color3), var(--main-bg-color10),var(--main-bg-color20));
  -webkit-animation: deformamov var(--tmp7) ease infinite;
  -moz-animation: deformamov var(--tmp7) ease infinite;
  animation: deformamov var(--tmp7) ease infinite;
}

.forma9{
position: absolute;
  top: var(--cento2);
  left: var(--cento);
  transform: rotate(var(--rotates4));
  opacity:var(--opace3);
  border-left: var(--tria2) solid var(--main-bg-color17);
	border-top: var(--tria1) solid transparent;
	border-bottom: var(--tria1) solid transparent;
}

.forma9b{
position: absolute;
  top: var(--cento4);
  left: var(--cento12);
  transform: rotate(var(--rotates3));
  opacity:var(--opace2);
  border-left: var(--tria4) solid var(--main-bg-color17);
	border-top: var(--tria3) solid transparent;
	border-bottom: var(--tria3) solid transparent;

}


.forma9c{
position: absolute;
  top: var(--cento9);
  left: var(--cento6);
  transform: rotate(var(--rotates2));
  opacity:var(--opace1);
  border-left: var(--tria2) solid var(--main-bg-color3);
	border-top: var(--tria3) solid transparent;
	border-bottom: var(--tria3) solid transparent;

  -webkit-animation: animapos2 var(--tmp6) ease infinite;
  -moz-animation: animapos2 var(--temp6) ease infinite;
  animation: animapos2 var(--tmp6) ease infinite;
}

.forma9d{
position: absolute;
  top: var(--cento4);
  left: var(--cento9);
  transform: rotate(var(--rotates1));
  opacity:var(--opace);
  border-left: var(--tria4) solid var(--main-bg-color8);
	border-top: var(--tria1) solid transparent;
	border-bottom: var(--tria1) solid transparent;

  -webkit-animation: animapos3 var(--tmp4) ease infinite;
  -moz-animation: animapos3 var(--temp4) ease infinite;
  animation: animapos3 var(--tmp4) ease infinite;
}

@-webkit-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@-moz-keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}
@keyframes AnimationName {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

@-webkit-keyframes animapos {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
  filter: saturate(var(--satur1));}
  100%{background-position:0% 50%;
    top: var(--anim1);
    left: var(--anim2);}
}
@-moz-keyframes animapos  {
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;  filter: saturate(var(--satur1));}
    100%{background-position:0% 50%;
      top: var(--anim1);
      left: var(--anim2);}
}
@keyframes animapos  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;  filter: saturate(var(--satur1));}
  100%{background-position:0% 50%;
    top: var(--anim1);
    left: var(--anim2);}
}


@-webkit-keyframes animapos1 {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    top: var(--cento2);
    left: var(--cento5);  transform: scaleY(var(--escalay));}
  100%{background-position:0% 50%;
    top: var(--cento6);
    left: var(--cento14);}
}
@-moz-keyframes animapos1  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    top: var(--cento2);
    left: var(--cento5);  transform: scaleY(var(--escalay));}
  100%{background-position:0% 50%;
    top: var(--cento6);
    left: var(--cento14);}
}
@keyframes animapos1  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
    z-index:2;
    top: var(--cento2);
    left: var(--cento5);  transform: scaleY(var(--escalay));}
  100%{background-position:0% 50%;
    top: var(--cento6);
    left: var(--cento14);}
}


@-webkit-keyframes animapos3 {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    filter: hue-rotate(var(--huer));}
  100%{background-position:0% 50%;
    top: var(--cento8);
    left: var(--cento2);
}
}
@-moz-keyframes animapos3  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    filter: hue-rotate(var(--huer));}
  100%{background-position:0% 50%;
    top: var(--cento8);
    left: var(--cento2);

}
}
@keyframes animapos3  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    filter: hue-rotate(var(--huer));}
  100%{background-position:0% 50%;
    top: var(--cento8);
    left: var(--cento2);

}
}
@-webkit-keyframes animapos2 {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    filter: hue-rotate(var(--huer));}
  100%{background-position:0% 50%;
    top: var(--cento8);
    left: var(--cento2);
        transform: scale(var(--escala));
}
}
@-moz-keyframes animapos2  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    filter: hue-rotate(var(--huer));}
  100%{background-position:0% 50%;
    top: var(--cento8);
    left: var(--cento2);
        transform: scale(var(--escala));
}
}
@keyframes animapos2  {
  0%{background-position:0% 50%;}
  50%{background-position:100% 50%;
        z-index:2;
    filter: hue-rotate(var(--huer));}
  100%{background-position:0% 50%;
    top: var(--cento8);
    left: var(--cento2);
    transform: scale(var(--escala));
}
}

@-webkit-keyframes deforma {
  0%{transform: rotate(var(--rotates3)) skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX6)) skewY(var(--escreY7));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY5));
    background-position:0% 50%;}
}
@-moz-keyframes deforma {
  0%{transform: rotate(var(--rotates3)) skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX6)) skewY(var(--escreY7));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY5));
    background-position:0% 50%;}
}
@keyframes deforma {
  0%{transform: rotate(var(--rotates3)) skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX6)) skewY(var(--escreY7));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY5));
    background-position:0% 50%;}
}
@-webkit-keyframes deforma1 {
  0%{transform: rotate(var(--rotates1)) skewX(var(--escreX1)) skewY(var(--escreY7));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX2)) skewY(var(--escreY6));
  background-position:150% 90%;
  border-radius: var(--radios3);
  opacity:var(--opace);}
    100%{
    background-position:0% 50%;}
}
@-moz-keyframes deforma1 {
  0%{transform: rotate(var(--rotates1)) skewX(var(--escreX1)) skewY(var(--escreY7));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX2)) skewY(var(--escreY6));
  background-position:150% 90%;
    border-radius: var(--radios3);
  opacity:var(--opace);}
    100%{
    background-position:0% 50%;}

}
@keyframes deforma1 {
  0%{transform: rotate(var(--rotates1)) skewX(var(--escreX1)) skewY(var(--escreY7));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX2)) skewY(var(--escreY6));
  background-position:150% 90%;
    border-radius: var(--radios3);
  opacity:var(--opace);}
    100%{
    background-position:0% 50%;}

}


@-webkit-keyframes deformamov {
  0%{transform: rotate(var(--rotates3)) skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:0% 70%;
z-index:2;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX8)) skewY(var(--escreY9));
  background-position:150% 90%;
    z-index:2;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY5));
    background-position:0% 50%;
    top: var(--anim3);
    left: var(--anim4);}
}
@-moz-keyframes deformamov {
  0%{transform: rotate(var(--rotates3)) skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:0% 70%;
z-index:2;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX8)) skewY(var(--escreY9));
  background-position:150% 90%;
  }
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY5));
    background-position:0% 50%;
    top: var(--anim3);
    left: var(--anim4);}
}
@keyframes deformamov {
  0%{transform: rotate(var(--rotates3)) skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:0% 70%;
z-index:2;}

  50%{transform: rotate(var(--rotates4))skewX(var(--escreX8)) skewY(var(--escreY9));
  background-position:150% 90%;
    }
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY5));
    background-position:0% 50%;
    top: var(--anim3);
    left: var(--anim4);}
}

@-webkit-keyframes deformamov1 {
  0%{transform: rotate(var(--rotates4)) skewX(var(--escreX1)) skewY(var(--escreY2));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates2))skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX10)) skewY(var(--escreY11));
    background-position:0% 50%;
    top: var(--anim5);
    left: var(--anim6);}
}
@-moz-keyframes deformamov1 {
  0%{transform: rotate(var(--rotates4)) skewX(var(--escreX1)) skewY(var(--escreY2));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates2))skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX10)) skewY(var(--escreY11));
    background-position:0% 50%;
    top: var(--anim5);
    left: var(--anim6);}
}
@keyframes deformamov1 {
  0%{transform: rotate(var(--rotates4)) skewX(var(--escreX1)) skewY(var(--escreY2));
  background-position:0% 70%;}

  50%{transform: rotate(var(--rotates2))skewX(var(--escreX4)) skewY(var(--escreY5));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX10)) skewY(var(--escreY11));
    background-position:0% 50%;
    top: var(--anim5);
    left: var(--anim6);}
}

@-webkit-keyframes deformamov2 {
  0%{
  background-position:0% 70%;
transform: scaleX(var(--escalax));}

  50%{transform: rotate(var(--rotates3))skewX(var(--escreX1)) skewY(var(--escreY3));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY6));
    background-position:0% 50%;
    top: var(--anim7);
    left: var(--anim8);}
}
@-moz-keyframes deformamov2 {
  0%{
  background-position:0% 70%;
transform: scaleX(var(--escalax));}

  50%{transform: rotate(var(--rotates3))skewX(var(--escreX1)) skewY(var(--escreY3));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY6));
    background-position:0% 50%;
    top: var(--anim7);
    left: var(--anim8);}
}
@keyframes deformamov2 {
  0%{
  background-position:0% 70%;
transform: scaleX(var(--escalax));}

  50%{transform: rotate(var(--rotates3))skewX(var(--escreX1)) skewY(var(--escreY3));
  background-position:150% 90%;}
    100%{transform: skewX(var(--escreX4)) skewY(var(--escreY6));
    background-position:0% 50%;
    top: var(--anim7);
    left: var(--anim8);}
}
#output {
  overflow: none;
  align-items: center;
  box-sizing: border-box;
  font-family:  'apercu';
align-content: center;
color: pink;
}

#grammar {
		padding: 5px;
	margin: 10px;
}

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