@font-face {
  font-family: 'Px437_TelePC-2y.ttf';
  src: url(Px437_TelePC-2y.ttf);
}
@font-face {
  font-family: 'PxPlus_Tandy1K-II_225L-2y';
  src: url(PxPlus_Tandy1K-II_225L-2y.ttf);
}
@font-face {
  font-family: 'PxPlus_ToshibaSat_8x16';
  src: url(PxPlus_ToshibaSat_8x16.ttf);
}

@font-face {
  font-family: 'Px437_ToshibaT300_8x16';
  src: url(Px437_ToshibaT300_8x16.ttf);
}


: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;
}
body{
  width: 100%;
  height: 100%;
  max-width: 100vw;
  max-height: 100vh;

  overflow: hidden;
  background-image: linear-gradient(var(--ratius2), var(--main-bg-color), var(--main-bg-color2),var(--main-bg-color6),var(--main-bg-color5));
background-size: 130% 130%;
display:block;

align-items: center;
justify-content: center;
}
.general {
  margin:0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
h1 {
text-align: center;
font-family: 'PxPlus_ToshibaSat_8x16';
margin: 80px 0;
background-color: #f3ec78;
background-image: linear-gradient(45deg, #f3ec78, #af4261);
background-size: 100%;
-webkit-background-clip: text;
-moz-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-text-fill-color: transparent;



}

.homeemoji {
  font-size: var(--fnt1);

}
.titulo {
font-family: 'PxPlus_ToshibaSat_8x16';
background-image: linear-gradient(45deg, var(--main-bg-color1), var(--main-bg-color2),var(--main-bg-color3),var(--main-bg-color4),var(--main-bg-color5));
background-size: 100%;
font-size: 7vmax;

  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  -webkit-text-stroke: 1px var(--main-bg-color14);
}
.banner {
  font-size: 5vmax;
background-image: linear-gradient(45deg,  var(--main-bg-color6), var(--main-bg-color7),var(--main-bg-color8),var(--main-bg-color9));
background-size: 100%;
opacity: 1; font-family: 'Px437_ToshibaT300_8x16';
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
}


a {
  color: var(--main-bg-color16);
}
a:hover {
  background-color:var(--main-bg-color8);
}

.reload {
  position: absolute;
  top:0%;
  right:10%;
  font-size: 1.5vmax;
  background-color:var(--main-bg-color3);
  color: var(--main-bg-color12);
}
.box {
  margin: 5vmax 11vmax;
  justify-content: center;
  align-items: center;
box-sizing: content-box;
  max-width: 90%;
  max-height: 32%;
  width: fit-content;
height: fit-content;
background-image: linear-gradient(45deg,  var(--main-bg-color16), var(--main-bg-color7),var(--main-bg-color18),var(--main-bg-color3));
background-size: 100%;
padding: 5px;
padding-left: 1vmax;
padding-right: 1vmax;
border: 1px solid;
border-color: var(--main-bg-color6);
border-style: inset;
border-width: medium;
background-clip: padding-box;
text-align: center;
z-index: 9;
}

.button {
font-size: 1em;
padding: 4px;
color: #fff;
border: 2px solid;
border-color: var(--main-bg-color21);
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;


}
.button:hover {
background-color: var(--main-bg-color2);
}

.overlay {
position: absolute;
top:0;
display: grid;
  margin: 0vmax 12vmax;
visibility: hidden;
  align-items: center;
height: fit-content;
max-height: 86%;
height: 66%;
max-width: 100%;
display: flex;
justify-content: center;
align-items: center;
  transition: opacity 500ms;

  opacity: 1;
  z-index: 10;
    overflow: hidden;
}
.overlay2 {
position: absolute;
top:0;
display: grid;
margin: 0vmax 12vmax;
visibility: hidden;
  align-items: center;
height: fit-content;
max-height: 86%;
height: 86%;
max-width: 86%;
display: flex;
justify-content: center;
align-items: center;
  transition: opacity 500ms;

  opacity: 1;
  z-index: 10;
    overflow: hidden;
}
.overlay2:target {
visibility: visible;
opacity: 1;
}
.overlay:target {
visibility: visible;
opacity: 1;
}

.popup {


margin: 5% auto;
display: inline;
  justify-content: center;
  align-items: center;
align-self: center;
padding: 1vmax;display: flex;
background: linear-gradient(var(--ratius3), rgba(0,0,0,0),var(--main-bg-color10), var(--main-bg-color11),var(--main-bg-color12));
background-size: 100% 100%;
border-radius: 5px;
width: 66%;
height: 63%;
max-height: 62%;
position: relative;
transition: all 5s ease-in-out;
z-index: 22;
}
.meme {

  display: flex;
  align-items: center;
  justify-content: center;
margin: 15% auto;
display: inline;
  justify-content: center;
  align-items: center;
align-self: center;
padding: 0vmax;display: flex;
background: linear-gradient(var(--ratius3), rgba(0,0,0,0),var(--main-bg-color10), var(--main-bg-color11),var(--main-bg-color12));
background-size: 100% 100%;
border-radius: 5px;
width: 60%;
height: auto;
max-height: 92%;
position: relative;
transition: all 5s ease-in-out;
z-index: 22;
}
.popup .meme h2 {
margin-top: 0%;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 5vmax;
font-weight: bold;
text-decoration: none;
color: var(--main-bg-color);
}
.meme .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 5vmax;
font-weight: bold;
text-decoration: none;
color: var(--main-bg-color);
}
.popup .close:hover {
color: #06D85F;
}
.popup  .content {
max-height: 90%;
overflow: auto;
}
.meme .close:hover {
color: #06D85F;
}
 .meme .content {
max-height: 90%;
overflow: auto;
}
.textoclip {
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color: transparent;
}
#texto1 {
font-family: 'Px437_ToshibaT300_8x16';

  font-size: 3vmax;
}

.textodefondo {
  position: absolute;
  top:0;
  left:0;
  right:0;
  bottom: 0;
  background-image: linear-gradient(var(--ratius5), var(--main-bg-color), var(--main-bg-color2),var(--main-bg-color6),var(--main-bg-color5));
background-size: 200% 200%;
  font-family: 'Px437_TelePC-2y.ttf';
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-fill-color: transparent;
  -moz-text-fill-color: transparent;
  font-size: 3.3vmax;
  z-index: -22;
}
.arco {
  position: absolute;
  bottom:8%;
  right:0%;
  width: 23%;
  height: auto;
  -webkit-animation: colores var(--tmp3) ease infinite;
  -moz-animation: colores var(--tmp3) ease infinite;
  animation: colores var(--tmp3) ease infinite;
}

.meme {


  height: auto;
  -webkit-animation: colores var(--tmp4) ease infinite;
  -moz-animation: colores var(--tmp4) ease infinite;
  animation: colores var(--tmp4) ease infinite;
}



      marquee {
        position: absolute;
        bottom:0%;
        right:0%;
        top:92%;
        width: 100%;
        background-color: var(--main-bg-color20);
        color: var(--main-bg-color21);
        font-size: 4vmax;
        font-family: 'PxPlus_Tandy1K-II_225L-2y';
        padding-top: 3px;
        border-top: 4px solid;
      }

      .homepagegif {


        justify-content: center;
        align-items: center;

        max-width: 98%;

        margin: 1vmax 22vmax;
        background-image: linear-gradient(45deg,  var(--main-bg-color16), var(--main-bg-color7),var(--main-bg-color18),var(--main-bg-color3));
        background-size: 100%;
        padding: 3vmax;
          align-items: center;
        height: fit-content;
        max-width: 33%;
      height: auto;
      opacity: 0;
        transition: opacity 500ms;
        -webkit-animation: colores var(--tmp3) ease infinite;
        -moz-animation: colores var(--tmp3) ease infinite;
        animation: colores var(--tmp3) ease infinite;
        z-index: -20;
      }
      .homepagegif:hover {
        opacity:.8;
      }


      @-webkit-keyframes colores {
      0%{ filter: hue-rotate(var(--ratius1));}
        25%{filter: hue-rotate(var(--ratius3));}
        50%{filter: hue-rotate(var(--ratius4));}
            75%{filter: hue-rotate(var(--ratius5));}}


/*div en 3d */


@-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);}
}


.container {

margin: 0;
height:100%;
width:100%;
max-width: 100vw;
max-height: 100vh;

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



-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%;
max-width: 100vw;
max-height: 100vh;

  perspective:var(--prspfondo2);
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%;
max-width: 100vw;
max-height: 100vh;

  perspective:var(--prspfondo3);
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%;
max-width: 100vw;
max-height: 100vh;

  perspective:var(--prspfondo4);
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: 20px; min-height: 20px;
    max-height: 17%; max-width: 17%;
	height:var(--fh);
	position: absolute;
	top:var(--cento);
	left:var(--cento1);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY10));
border-color: var(--main-bg-color6);
	border-style:solid;
border-width: 1px 1px;
font-size: 1vmax;
font-family: '', monospace;

background: linear-gradient(var(--ratius1), var(--main-bg-color1), var(--main-bg-color2),var(--main-bg-color3), 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: 80% 80%;
}
.divvacia4 {
	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%;
}
.divvacia {
	width:var(--fw4);
min-width: 70px; min-height: 50px;
	height:fit-content;
	position: absolute;
	top:var(--cento6);
	left:var(--cento7);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY5));
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%;
  z-index: -4;
}
.divvacia3 {
	width:var(--fw2);
	min-width: 20px; min-height: 20px;
  max-height: 17%; max-width: 17%;
	height:var(--fh2);
	position: absolute;
	top:var(--cento4);
	left:var(--cento5);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY11));
	border-color: var(--main-bg-color7);
border-style:solid;
	border-width: 1px 1px;
  background: linear-gradient(var(--ratius1),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: 120% 120%;
}

.divvacia2 {
	width:fit-content;

	height:fit-content;
	position: absolute;
	top:var(--cento3);
	left:var(--cento5);
	transform-style: preserve-3d;
  transform: rotateX(var(--escreY2));
background: linear-gradient(var(--ratius4), 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-color3),var(--main-bg-color2)) ;
	  -webkit-animation: deforma4 var(--tmp5) ease infinite;
	  -moz-animation: deforma4 var(--tmp5) ease infinite;
	  animation: deforma4 var(--tmp5) ease infinite;
  background-size: 600% 600%;
  z-index: -2;
}


.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: 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: 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);
	left: var(--anim5);
background-position:230% 230%;}
60%{transform:translateY(var(--cento3)) rotateX(var(--rotates5))skewY(var(--escreX2)) rotate(var(--rotates3));
	filter: saturate(var(--satur2));
	left: var(--anim2);
background-position:330% 130%;
	z-index: var(--brigt);}
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);}

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(--brigt);

background-position:150% 230%;}

60%{transform: rotateX(var(--rotates2))rotateY(var(--rotates3))skewY(var(--escreX5)) rotate(var(--rotates)) skewY(var(--escreY5));
	filter: saturate(var(--satur));
	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));
background-position:130% 130%;
top: var(--cento4);
left: var(--anim5);
	}

	25%{transform: rotateX(var(--rotates5)) skewY(var(--escreY6))translateX(var(--cento5)) rotate(var(--rotates1));
top: var(--cento4);
left: var(--anim2);
	background-position:230% 230%;}

	60%{transform:scale(var(--scamn)) rotateY(var(--rotates1))rotateX(var(--rotates2)) skewX(var(--escreX5));
filter: saturate(var(--rotates3));
right:var(--cento11);
top: var(--cento4);
z-index: var(--brigt);
	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:130% 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(--brigt);
background-position:130% 330%;}

	40%{transform: rotate(var(--rotates6)) rotateX(var(--rotates5)) translateY(var(--cento)) skewY(var(--escreX5));
right:var(--cento10);
top: var(--cento5);
z-index: var(--brigt);
	background-position:170% 210%;}

	60% {transform: rotate(var(--rotates1)) skewY(var(--escreY3)) rotateY(var(--rotates2));
	background-position:450% 420%;
filter: saturate(var(--satur3));
top: var(--cento11);}

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

}

	}

	@-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);
z-index: var(--brigt);
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(--brigt);
	background-position:270% 110%;}

	55% {transform: rotate(var(--rotates2)) skewX(var(--escreY2)) rotateX(var(--rotates3));
	background-position:450% 420%;
filter: saturate(var(--satur2));
top: var(--cento3);}

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

}

	}

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

	25%{transform: rotateX(var(--rotates5)) skewY(var(--escreY6))translateX(var(--cento5)) rotate(var(--rotates1));
top: var(--cento4);
left: var(--anim2);
	background-position:230% 230%;}

	60%{transform:scale(var(--scamn)) rotateY(var(--rotates1))rotateX(var(--rotates2)) skewX(var(--escreX5));
filter: saturate(var(--rotates3));
right:var(--cento11);
top: var(--cento4);
z-index: var(--brigt);
	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:130% 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(--brigt);
  background-position:130% 330%;}

  	40%{transform: rotate(var(--rotates6)) rotateX(var(--rotates5)) translateY(var(--cento)) skewY(var(--escreX5));
  right:var(--cento10);
  top: var(--cento5);
  z-index: var(--brigt);
  	background-position:170% 210%;}

  	60% {transform: rotate(var(--rotates1)) skewY(var(--escreY3)) rotateY(var(--rotates2));
  	background-position:450% 420%;
  filter: saturate(var(--satur3));
  top: var(--cento11);}

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

  }

}




@media screen and (max-width: 700px){
body{

  width: auto;
  height: auto;
}

.general{
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
}
.popup{
  width: 100%;
}
}