/* 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;-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/wh6HJZPJ/SPARKLES.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;}}

/* 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);}}
     
/* FLOATING DOWN */
.floatingdown{animation:floatingdown 1.2s ease-in-out infinite}
    @keyframes floatingdown{
    0%{transform:translatey(0px);}
    50%{transform:translatey(3px);}
    100%{transform:translatey(0px);}}