/* STYLESHEET MADE BY GOTHLLY (C) 2016-2022 ALL RIGHTS RESERVED | DON'T: COPY, TRACE, SELL, EDIT, STEAL OR REVAMP MY WORK. YOU'RE WARNED! */

body{-webkit-animation: fadein 2s; /* Safari, Chrome and Opera > 12.1 */   -moz-animation: fadein 2s; /* Firefox < 16 */    -ms-animation: fadein 2s; /* Internet Explorer */      -o-animation: fadein 2s; /* Opera < 12.1 */    animation: fadein 2s;} @keyframes fadein { from { opacity: 0; } to   { opacity: 1; }} /* Firefox < 16 */ @-moz-keyframes fadein { from { opacity: 0; } to   { opacity: 1; }}  /* Safari, Chrome and Opera > 12.1 */  @-webkit-keyframes fadein {  from { opacity: 0; }   to   { opacity: 1; }}  /* Internet Explorer */   @-ms-keyframes fadein {  from { opacity: 0; }  to   { opacity: 1; }} /* Opera < 12.1 */  @-o-keyframes fadein { from { opacity: 0; }  to   { opacity: 1; }}.unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/html5">html5/msUserSelect/ */ -ms-user-select: none; user-select: none; }

#baseimg{position:Absolute;top:2%;text-align:center;left: 3%;overflow-x:hidden;z-index:1;pointer-events:none;}

::-webkit-scrollbar{width:0px}
::-webkit-scrollbar-track{background-color:#000;}
::-webkit-scrollbar-thumb{background-color:#fff;}
::-webkit-scrollbar:horizontal{height:0}
::-webkit-scrollbar-thumb:vertical:hover,
::-webkit-scrollbar-thumb:horizontal:hover{background:#fff;width:0;height:0}
  
body,html{-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.DP{opacity: 100%;transition: all 1s ease;}
.DP:hover{opacity:.3}
.DontStealDP {pointer-events: none;}

/* TODOS LOS BOTONES! */

#Button {padding:0;margin:0 auto;} 
#Button img { position:absolute;transition: all .6s ease-in-out;}  
#Button img.novisible {opacity:0;filter:alpha(opacity=0);} 
#Button:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
#Button:hover img.visible {opacity:0;filter:alpha(opacity=0);}
#Button img.visible:hover {opacity:0;filter:alpha(opacity=0);}
  
#Button2 {padding:0;margin:0 auto;}
#Button2 img { position:absolute;transition: all .6s ease-in-out;}
#Button2 img.novisible {opacity:0;filter:alpha(opacity=0);}
#Button2:hover img.novisible {opacity:1;filter:alpha(opacity=100);}
#Button2:hover img.visible {opacity:1;filter:alpha(opacity=100);}
#Button2 img.visible:hover {opacity:0;filter:alpha(opacity=100);}
#Button2 {animation-name: floating;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
  @keyframes floating {
     from { transform: translate(0,  0px); }
     65%  { transform: translate(0, 15px); }
     to   { transform: translate(0, -0px); }}
  
#Button3 {padding:0;margin:0 auto;}  
#Button3 img { position:absolute;transition: all .6s ease-in-out;} 
#Button3 img.novisible {opacity:0;filter:alpha(opacity=0);}  
#Button3:hover img.novisible {opacity:1;filter:alpha(opacity=100);margin-top: -10px;}  
#Button3:hover img.visible {opacity:1;filter:alpha(opacity=0);margin-top: -10px;} 
#Button3 img.visible:hover {opacity:0;filter:alpha(opacity=0);}

#Button4 {padding:0;margin:0 auto;}  
#Button4 img { position:absolute;transition: all .6s ease-in-out;} 
#Button4 img.novisible {opacity:0;filter:alpha(opacity=0);}  
#Button4:hover img.novisible {opacity:1;filter:alpha(opacity=100);margin-top: -10px;}  
#Button4:hover img.visible {opacity:1;filter:alpha(opacity=0);margin-top: -10px;} 
#Button4 img.visible:hover {opacity:0;filter:alpha(opacity=0);}
#Button4 {animation-name: floating;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
  @keyframes floating {
     from { transform: translate(0,  0px); }
     65%  { transform: translate(0, 20px); }
     to   { transform: translate(0, -0px); }}


/* TODOS LAS ANIMACIONES! */
/* SPARKLES / GLITTER */

.sparkle {display: block;position: absolute;overflow: hidden;z-index: 5;-moz-opacity: 100%;opacity: 100%;animation: sparkle 1.6s linear infinite;}
  @keyframes sparkle {
    0% {-webkit-transform: scale(1) rotate(0deg);opacity: 0;}
    25% {-webkit-transform: scale(1) rotate(0deg);opacity: 100;}
    100% {-webkit-transform: scale(1) rotate(0deg);opacity: 0;}
    95% {-webkit-transform: scale(1) rotate(0deg);opacity: 0;}}

.sparkle2 {display: block;position: absolute;overflow: hidden;z-index: 5;-moz-opacity: 100%;opacity: 100%;animation: sparkle2 1.5s linear infinite;animation-delay: 2s;}
      @keyframes sparkle2 {
    100% {-webkit-transform: time (20) scale(1) rotate(0deg);opacity: 0;}
    50% {-webkit-transform: time (20) scale(1) rotate(0deg);opacity: 100;}
    100% {-webkit-transform: time (20) scale(1) rotate(0deg);opacity: 0;}
    20% {-webkit-transform: time (20) scale(1) rotate(0deg);opacity: 0;}
    100% {-webkit-transform: time (20) scale(1) rotate(0deg);opacity: 0;}
    0% {-webkit-transform: time (20) scale(1) rotate(0deg);opacity: 100;}}

/* FLOATING */

.floating {animation-name: floating;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floating {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 15px); }
    to   { transform: translate(0, -0px); }}
     
.floating2 {animation-name: floating2;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floating2 {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, -15px); }
    to   { transform: translate(0, 0px); }} 
     
.floating3 {animation-name: floating3;animation-duration: 2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floating3 {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, -10px); }
    to   { transform: translate(0, 0px); }} 
     
.floating4 {
animation-name: floating4;animation-duration: 1.5s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floating4 {
    from { transform: translate(0,  5px); }
    65%  { transform: translate(0, 0px); }
    to   { transform: translate(0, 5px); }} 

.floating5 {animation-name: floating5;animation-duration: 1.2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floating5 {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, -5px); }
    to   { transform: translate(0, 0px); }} 
     
.floating6 {animation-name: floating6;animation-duration: 1.2s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floating6 {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 5px); }
    to   { transform: translate(0, -0px); }} 
     
/* FLOATING Hacia Abajo */
.floatingdown {animation-name: floatingdown;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floatingdown {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 3px); }
    to   { transform: translate(0, -0px); }}

/* FLOATING Hacia Abajo 2 */
.floatingdown2 {animation-name: floatingdown2;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floatingdown2 {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(0, 5px); }
    to   { transform: translate(0, -0px); }}    

/* FLOATING Hacia la Izquierda */
.floatingleft {animation-name: floatingleft;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floatingleft {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(-5px, 0px); }
    to   { transform: translate(0, 0px); }}   
    
/* FLOATING Hacia la Derecha */
.floatingright{animation-name: floatingright;animation-duration: 1s;animation-iteration-count: infinite;animation-timing-function: ease-in-out;}
@keyframes floatingright {
    from { transform: translate(0,  0px); }
    65%  { transform: translate(5px, 0px); }
    to   { transform: translate(0, 0px); }} 

/* FLOATING Fade 1 */    
    .floatingfade1 {animation-name: floatingfade1;animation-duration: 1.8s;animation-iteration-count: infinite;animation-timing-function: ease-in-out}
@keyframes floatingfade1 {
    50% {transform: translate(0px, 5px);opacity: 50%}}          

/* LATIDOS / BALANCEO / ALETEO MARIPOSA */
.Beat {display: inline-block; animation: latidos 0.9s infinite; transform-origin: center;}
@keyframes latidos {
    from { transform: scale(1.05); } 50% { transform: scale(1); } to { transform: scale(1.05); }}

.swing1 {animation: swing1 ease-in-out 1.5s infinite alternate;transform-origin: center -20px;float:left;}
@keyframes swing1 {
    0% { transform: rotate(3deg); }
    100% { transform: rotate(-3deg); }}

.swing2 {animation: swing2 ease-in-out 1.5s infinite alternate;transform-origin: center -20px;float:left;}
@keyframes swing2 {
    0% { transform: rotate(-3deg); }
    100% { transform: rotate(3deg); }}    

.leftwing {animation:flap-l 5s cubic-bezier(.08,2,.65,-0.68) infinite;}
.rightwing {animation:flap-r 5s cubic-bezier(.08,2,.65,-0.68) infinite;}
.leftwing, .rightwing {z-index:1;}
@keyframes flap-l {
    0% {transform:rotateY(0);}
    50% {transform:rotateY(40deg);}
    100% {transform:rotateY(0);}}
@keyframes flap-r {
    0% {transform:rotateY(0); }
    50% {transform:rotateY(-40deg);}
    100% {transform:rotateY(0);}}

.unselectable { -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; /* Introduced in IE 10. See http://ie.microsoft.com/testdrive/html5">html5/msUserSelect/ */ -ms-user-select: none; user-select: none; }

/* ROTATE */
.rotate {-webkit-animation:spin 35s linear infinite;-moz-animation:spin 35s linear infinite;animation:spin 35s linear infinite;}

@-moz-keyframes spin {100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin {100% { -webkit-transform: rotate(360deg); } }
@keyframes spin {100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); }}

/* GLITCH EFFECT */
[data-js="glitch-image"] {position: relative;width: 100%;}
[data-js="glitch-image"] canvas {position: absolute;top: 0;left: 0;z-index: 1;}

/* PETALS */   
.fallingthings{width:32px;height:31px;position:absolute;background:url(https://i.ibb.co/6BjW6qh/PETAL.png);background-size:100% 100%;opacity:80%;}