/* STYLESHEET MADE BY GOTHLLY | GOTHLLY (C) 2019 TO PRESENT - ALL RIGHTS RESERVED
   Don't steal, edit, copy, trace, reference, claim as your own work, resell or revamp the design or coding of my stylesheet. You're warned! */ 

/* STYLES */
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;}}  
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}
body{zoom:100%!important;transform:(1);-moz-transform:scale(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;}

/* LAYOUT */
@media only screen and (max-width:900px) and (max-height:900px){
.layout{display:flex;justify-content:center;align-items:center!important;text-align:center!important;}}

/* SCROLLBAR */
::-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}
  
/* DISPLAY PICTURE */
.dp{opacity:100%;transition:all 1s ease;}
.dp:hover{opacity:.4;filter:none;}
.dontstealdp{pointer-events:none;}

/* TABS */
.tab{display:inline-block;overflow:hidden;}
.tab .tab-img{opacity:0;position:absolute;top:0;left:0;transition:opacity 0.6s ease;}
.tab:hover .tab-img{opacity:1;}

.tab2{display:inline-block;overflow:hidden;}
.tab2 .tab-img{opacity:0;position:absolute;top:0;left:0;transition:opacity 1s ease;}
.tab2:hover .tab-img{opacity:1;}
.tab2{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);}}
  
.tab3 {display:inline-block;position:relative;}
.tab3 img {opacity:1;position:absolute;transition:opacity 0.6s ease,transform 0.8s ease;transform:translateY(0);}
.tab3 img:first-child {opacity:1;}
.tab3 img:last-child {opacity:0;transform:translateY(0);}
.tab3:hover img:first-child {opacity:1;transform:translateY(-10px);}
.tab3:hover img:last-child {opacity:1;transform:translateY(-10px);}

/* ANIMATIONS */

/* SPARKLE */ 
.starshine{position:absolute;top:0;left:0;width:100%;height:100%;z-index:9999;overflow:hidden;}
.shine{display:block;position:absolute;top:50%;left:50%;background-image:url(https://i.ibb.co/YkpsSTn/SPARKLE.png);background-repeat:no-repeat;background-position:center;background-size:100% 100%;overflow:hidden;z-index:2;color:tansparent;-moz-opacity:0.0;opacity:0.0;animation:glitter 5s linear 0s infinite normal;-webkit-animation:glitter 5s linear 0s infinite normal;-moz-animation:glitter 5s linear 0s infinite normal;-ms-animation:glitter 5s linear 0s infinite normal;-o-animation:glitter 5s linear 0s infinite normal;}
.shine.small{width:30px;height:30px;}
.shine.medium{width:45px;height:45px;}
.shine.large{width:70px;height:70px;}
    @keyframes glitter{
    0%{-webkit-transform:scale(0.3)rotate(0deg);opacity:0;}
    25%{-webkit-transform:scale(1)rotate(0deg);opacity:1;}
    50%{-webkit-transform:scale(0.3)rotate(0deg);opacity:0;}
    100%{-webkit-transform:scale(0.3)rotate(0deg);opacity:0;}}

/* SPARKLES FADE */
.sparkle{display:block;position:absolute;overflow:hidden;z-index:5;-moz-opacity:100%;opacity:100%;animation:sparkle 2s 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:floating 2s ease-in-out infinite;}
    @keyframes floating{
    0%{transform: translatey(0px);}
    50%{transform: translatey(15px);}
    100%{transform: translatey(0px);}}  
     
.floating2{animation:floating2 2s ease-in-out infinite;}
    @keyframes floating2{
    0%{transform: translatey(0px);}
    50%{transform: translatey(-15px);}
    100%{transform: translatey(0px);}}
     
.floating3{animation:floating3 2s ease-in-out infinite;}
    @keyframes floating3{
    0%{transform: translatey(0px);}
    50%{transform: translatey(-10px);}
    100%{transform: translatey(0px);}}  
     
.floating4{animation:floating4 1.5s ease-in-out infinite;}
    @keyframes floating4{
    0%{transform: translatey(5px);}
    50%{transform: translatey(0px);}
    100%{transform: translatey(5px);}}

.floating5{animation:floating5 1.5s ease-in-out infinite;}
    @keyframes floating5{
    0%{transform: translatey(-5px);}
    50%{transform: translatey(0px);}
    100%{transform: translatey(-5px);}} 
     
.floating6{animation:floating6 1.6s ease-in-out infinite;}
    @keyframes floating6{
    from{transform:translate(0,0px);}
    65% {transform:translate(0,5px);}
    to  {transform:translate(0,-0px);}} 
     
/* FLOATING Hacia Abajo */
.floatingdown{animation:floatingdown 1.2s ease-in-out infinite;}
    @keyframes floatingdown{
    0%{transform: translatey(0px);}
    50%{transform: translatey(3px);}
    100%{transform: translatey(0px);}}

/* FLOATING Hacia Abajo 2 */
.floatingup{animation:floatingup 1.2s ease-in-out infinite}
    @keyframes floatingup{
    0%{transform: translatey(0px);}
    50%{transform: translatey(-3px);}
    100%{transform: translatey(0px);}}   

/* FLOATING Hacia la Izquierda */
.floatingleft{animation:floatingleft 1.2s ease-in-out infinite}
    @keyframes floatingleft{
    0%{transform: translatex(0px);}
    50%{transform: translatex(-3px);}
    100%{transform: translatex(0px);}}   
    
/* FLOATING Hacia la Derecha */
.floatingright{animation:floatingright 1.2s ease-in-out infinite}
    @keyframes floatingright{
    0%{transform: translatex(0px);}
    50%{transform: translatex(3px);}
    100%{transform: translatex(0px);}} 

/* FLOATING Fade */    
.floatingfade1{animation:floatingfade1 2s ease-in-out infinite}
    @keyframes floatingfade1{
    50%{transform:translate(0px,5px);opacity:50%}}
    
.floatingfade2{animation:floatingfade2 3.5s ease-in-out infinite;animation-iteration-count:infinite}
    @keyframes floatingfade2{
    50%{transform:translate(0px,30px);opacity:.0}}     

/* LIGHT SWEEP */    
.lightsweep1{width:100%;position:relative;overflow:hidden;}
.lightsweep2{position:absolute;top:0;left:0;bottom:0;right:0;background:none 0% 0% / auto repeat scroll padding-box border-box#00000000;overflow:hidden;-webkit-filter:brightness(0);-webkit-mask-size:300% 200%;-webkit-mask-image:-webkit-linear-gradient(-45deg,#ffffff00 40%,#ffffff 50%,#ffffff00 60%);-webkit-transition:-webkit-mask-position;-webkit-animation-timing-function:linear;-webkit-transform:translate3d(0, 0, 0);-moz-filter:brightness(0);-moz-mask-size:300% 200%;-moz-mask-image:-webkit-linear-gradient(-45deg,#ffffff00 40%,#ffffff 50%,#ffffff00 60%);-moz-transition:-webkit-mask-position;-moz-animation-timing-function:linear;-moz-transform:translate3d(0, 0, 0);-o-filter:brightness(0);-o-mask-size:300% 200%;-o-mask-image:-webkit-linear-gradient(-45deg,#ffffff00 40%,#ffffff 50%,#ffffff00 60%);-o-transition:-webkit-mask-position;-o-animation-timing-function:linear;-o-transform:translate3d(0, 0, 0);filter:brightness(1.3);mask-size:300% 200%;mask-image:-webkit-linear-gradient(-45deg,#ffffff00 40%,#ffffff 50%,#ffffff00 80%);transition:-webkit-mask-position;animation-timing-function:linear;transform:translate3d(0, 0, 0);transition-duration:2s;animation:move 7s ease-out infinite;}
    @keyframes move{
    from{-webkit-mask-position:150% 0px;-moz-mask-position:150% 0px;-o-mask-position:150% 0px;mask-position:150% 0px;}
    to{-webkit-mask-position:0% 0px;-moz-mask-position:0% 0px;-o-mask-position:0% 0px;mask-position:0% 0px;}}

/* GLOWING */     
.glowing{animation:glow 2s ease-in-out infinite;}
.glowing img{filter:drop-shadow(0 0 0px #fff0);}
    @keyframes glow{
    0%, 100% {filter: drop-shadow(0 0 0px #fff0);}
    50% {filter: drop-shadow(0 0 15px #ff45bb);}}

/* LATIDOS */
.beating{display:inline-block;animation:beating 1.4s ease-in-out infinite;transform-origin:center;}
    @keyframes beating{from{transform:scale(1.05)}50%{transform:scale(1)}to{transform:scale(1.05)}}

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

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

/* ALETEO MARIPOSA */    
.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);}}

/* ROTACION 360 */
.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);}}

/* GIRAR 3D */
.spin2{transform-style:preserve-3d;animation:spin2 5.5s linear infinite;}
    @keyframes spin2{0%{transform:rotateY(0deg);}100%{transform:rotateY(360deg);}}

/* GIRAR 3D 2*/
.spin3{transform-style:preserve-3d;animation:spin3 8s linear infinite;}
    @keyframes spin3{0%{transform:rotateY(0deg);}100%{transform:rotateY(-360deg);}}

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