/* BODY */

body {
    background-color: rgb(53, 53, 53);
    font-family: 'Poppins', sans-serif;
}

/* BODY */

/* DISCO BACKGROUND */

#disco-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
}

/* DISCO BACKGROUND */


/* TUBELIGHT */

.tubelight{
    position:absolute;
    top:8vh;
    width:60%;
    height:3.5vh;
    left: 50%;
    transform: translate(-50%, 0);
    border: 0.2vh solid white;
    border-radius: 1.4vh;
}


.tubelight #tube-lens {
    position: absolute;
    top: 68%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 98%;
    height: 0.5vh;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 20%;
}
/* TUBELIGHT */

/* BUTTONS */

.buttons
{
    position:absolute;
    bottom: 15%;
    transform: translate(-50%,50%);
    background-color: rgb(53, 53, 53);
    color: rgb(69, 235, 47);
    width: 30vh;
    height: 6vh;   
    font-size: 3vh;
    cursor: pointer; 
    border: 0.3vh solid black;
    border-radius: 0.8vh 0.8vh 0.8vh 0.8vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-weight: 900;
    transition: 0.2s;
    user-select: none;
}

.buttons:hover{
    color: rgb(53, 53, 53);
    transition: 0.4s;
    border: 0;
}

.buttons::before{
    content: "";
    position: absolute;
    top: 0%;
    left: 0%;
    background-color: rgba(69, 235, 47, 0.774);
    width: 100%;
    height: 0%;
    border-radius: 0 0 50% 50%;
    z-index: -1;
}

.buttons:hover::before{
    height: 180%;
    transition: 0.4s;
}

.button-bulb{
    top:85%;
    left: 20%;
    transform: translate(-50%,-50%);
}

.button-hi{
    left: 50%;
}
.button-dance{
    left: 80%;
}

/* BUTTONS */

/* ANDROID */

.and-head {
    position: absolute;
    height: 12vh;
    width: 25vh;
    background-color: rgb(69, 235, 47);
    top: -19%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 30vh 30vh 2vh 2vh;
}

.l-ant {
    top:-20%;
    position: absolute;
    width: 1vh;
    height: 7vh;
    background-color: rgb(69, 235, 47);
    border-radius: 6vh;
    transform: rotateZ(-35deg);
    transform-origin:bottom center;
    z-index: -1;
    left:3vh;
    animation: 10s -2s ease-in-out  infinite idle-l-ant-movement;
}

.r-ant {
    top:-20%;
    right: 3vh;
    position: absolute;
    width: 1vh;
    height: 7vh;
    background-color: rgb(69, 235, 47);
    border-radius: 6vh;
    transform: rotateZ(35deg);
    transform-origin:bottom center;
    z-index: -1;
    animation: 10s -2s ease-in-out  infinite idle-r-ant-movement;
}

.l-eye {
    position: absolute;
    top: 30%;
    left: 25%;
    height: 4vh;
    width: 2vh;
    background-color: rgba(39, 38, 38, 0.5);
    border-radius: 3vh;
    animation: 10s idle-leye-movement 0s infinite forwards;
}
.r-eye {
    position: absolute;
    top: 30%;
    right: 25%;
    height: 4vh;
    width: 2vh;
    background-color: rgba(39, 38, 38, 0.5);
    border-radius: 3vh;    
    animation: 10s idle-reye-movement 0s infinite forwards;
}

.and-body {
    position: absolute;
    height: 26vh;
    width: 25vh;
    background-color: rgb(69, 235, 47);
    border-radius: 1vh;
    top: 30%;
    left: 50%;
    transform: translate(-50%, -25%);
    animation-timing-function: ease-in-out;
}
.and {
    position: absolute;
    height: 28vh;
    width: 25vh;
    border-radius: 1vh;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.and .l-hand, .r-hand {
    position: absolute;
    top: 1%;
    height: 20vh;
    width: 5vh;
    background-color: rgb(40, 150, 26);
    border-radius: 3vh;
} 
.and .l-hand {
    left: -6vh;
    animation: 10s idle-lhand-animation 0s infinite ease-in-out forwards;
}
.and .r-hand {
    right: -6vh;   
    animation: 10s idle-rhand-animation 0s infinite ease-in-out forwards;
}

.and .l-leg, .r-leg {
    position: absolute;
    width: 6vh;
    height: 10vh;
    bottom: -11vh;
    background-color: rgb(69, 235, 47);
    border-radius: 0.5vh 0.5vh 2vh 2vh;
}

.l-leg {
    left: 3vh;
}

.r-leg {
    right: 3vh;  
}

/* ANDROID */

/* HINT */

#hint{
    position: absolute;
    width:100%;
    height:4vh;
    top:93%;
    left:0;
    color: rgb(69, 235, 47);
    text-align: center;
    font-size: 2vh;
    animation-name: hint;
}

/* HINT */

/* HI ANIMATION */

@keyframes hi-rhand-movement {
    0%{
        transform-origin: top ;
        transform: rotate(0deg);
    }

    55%{
        transform-origin: top ;
        transform: rotate(-155deg);
        right: -5.2vh;
    }

    70%{
        transform-origin: top ;
        transform: rotate(-135deg);
        right: -5.2vh;
    }

    85%{
        transform-origin: top ;
        transform: rotate(-155deg);
        right: -5.2vh;
    }

    100%{
        transform-origin: top ;
        transform: rotate(-135deg);
        right: -5.2vh;
    }
}

@keyframes hi-body-movement {
    0%{
        transform-origin: center ;
    }

    55%{
        transform-origin: centre ;
        transform: translate(-50%,-25%) rotate(-5deg);
    }
    100%{
        transform-origin: centre ;  
        transform: translate(-50%,-25%) rotate(-5deg);
    }
}

@keyframes hi-lhand-movement {
    0%{
        transform-origin: top;
        transform: rotate(0deg);
    }

    55%{

        transform-origin: top;
        transform: rotate(5deg);
    }
    100%{       
        transform-origin: top;
        transform: rotate(5deg);
    }
}

@keyframes hi-head-movement {
    0%{
        
    }

    55%{
        transform: translate(-50%,-50%) rotate(1deg);
        left: 46.5%;
        top: -20%;
    }
    100%{      
        transform: translate(-50%,-50%) rotate(1deg);
        left: 46.5%;
        top: -20%;
    }
}

@keyframes hi-rleg-movement {
    0%{
        
    }

    55%{
        transform: rotate(-7deg);
        right: 1vh;
        bottom: -10vh;
    }
    100%{      
        transform: rotate(-7deg);
        right: 1vh;        
        bottom: -10vh;
    }
}

@keyframes hi-eye-movement {
    
    0%{
        
    }

    55%{
        transform: rotateX(180deg);
    }
    100%{      
        transform: rotateX(180deg);
    }
}

/* HI ANIMATION */

/* IDLE ANIMATION */
@keyframes  idle-l-ant-movement{
    0%{
        transform-origin:bottom center;
        transform: rotate(-40deg);
    }
    93%{
        transform-origin:bottom center;
        transform: rotate(-30deg);
    }
    95%{
        transform-origin:bottom center;
        transform: rotate(-40deg);
    }
    97%{
        transform-origin:bottom center;
        transform: rotate(-30deg);
    }
    100%{
        transform-origin:bottom center;
        transform: rotate(-40deg);  
    }
}
@keyframes idle-r-ant-movement{
    0%{
        transform-origin:bottom center;
        transform: rotate(40deg);
    }
    93%{
        transform-origin:bottom center;
        transform: rotate(30deg);
    }
    95%{
        transform-origin:bottom center;
        transform: rotate(40deg);
    }
    97%{
        transform-origin:bottom center;
        transform: rotate(30deg);
    }
    100%{
        transform-origin:bottom center;
        transform: rotate(40deg);  
    }
}
@keyframes idle-leye-movement {
    0%{
        transform: rotateX(0deg);
    }

    25%{
        transform: rotateX(0deg);
    }

    34%{
        transform: rotateX(360deg);
    }

    65%{
        top: 30%;
        left: 25%;
    }

    70%{
        left: 22%;
        top: 33%;
    }

    75%{
        left: 22%;
        top: 33%;
    }
    
    85%{
        left: 28%;
        top: 33%;
    }

    90%{
        left: 28%;
        top: 33%;
    }

    95%{
        left: 25%;
        top: 30%;
    }
    
    100%{
        transform: rotateX(360deg);
        left: 25%;
        top: 30%;
    }
}


@keyframes idle-reye-movement {
    0%{
        transform: rotateX(0deg);
    }

    25%{
        transform: rotateX(0deg);
    }

    34%{
        transform: rotateX(360deg);
    }

    65%{
        top: 30%;
        right: 25%;
    }

    70%{
        right: 28%;
        top: 33%;
    }

    75%{
        right: 28%;
        top: 33%;

    }

    85%{
        right: 22%;
        top: 33%;
    }

    90%{
        right: 22%;
        top: 33%;

    }

    95%{
        right: 25%;
        top: 30%;
    }

    100%{
        transform: rotateX(360deg);
        right: 25%;
        top: 30%;
    }
}

@keyframes idle-rhand-animation {
    
    0%{
        transform-origin: top;
        transform: rotate(0deg);
    }
    95%{
        transform-origin: top;
        transform: rotate(0deg);
    }

    97%{
        transform-origin: top;
        transform: rotate(-15deg);
    }
    100%{
        transform-origin: top;
        transform: rotate(0deg);
    }
}
@keyframes idle-lhand-animation {
    
    0%{
        transform-origin: top;
        transform: rotate(0deg);
    }
    95%{
        transform-origin: top;
        transform: rotate(0deg);
    }

    97%{
        transform-origin: top;
        transform: rotate(15deg);
    }
    100%{
        transform-origin: top;
        transform: rotate(0deg);
    }
}


/* IDLE ANIMATION */

/* DANCE */

@keyframes dance-body-movement {
    0%{
        transform-origin: center;
        transform: translate(-50%,-25%) rotateZ(0deg);
    }
    12.5%{
        transform-origin: center;
        transform: translate(-50%, -25%) rotateZ(5deg);
    }
    25% {
        transform-origin: center;
        transform: translate(-50%,-22.5%) rotateZ(-5deg);
    }
    38.5% {
        transform-origin: center;
        transform: translate(-50%,-22.5%) rotateZ(5deg);
    }
    50%{
        transform-origin: center;
        transform: translate(-50%,-20%) rotateZ(-5deg);
    }
    62.5%{
        transform-origin: center;
        transform: translate(-50%,-20%) rotateZ(5deg);
    }
    75%{
        transform-origin: center;
        transform: translate(-50%,-17.2%) rotateZ(-5deg);
    }
    88.5%{
        transform-origin: center;
        transform: translate(-50%,-15%) rotateZ(5deg);
    }
    100%{
        transform-origin: center;
        transform: translate(-50%,-15%) rotateZ(-5deg);
    }
}

@keyframes dance-lhand-movement {
    0%{
        transform-origin: top;
        transform: rotateZ(0deg);
    }
    12.5%{
        transform-origin: top;
        transform: rotateZ(-20deg);
    }
    25% {
        transform-origin: top;
        transform: rotateZ(20deg);
    }
    38.5% {
        transform-origin: top;
        transform: rotateZ(-20deg);
    }
    50%{
        transform-origin: top;
        transform: rotateZ(100deg);
    }
    62.5%{
        transform-origin: top;
        transform: rotateZ(190deg);
    }
    75%{
        transform-origin: top;
        transform: rotateZ(100deg);
    }
    88.5%{
        transform-origin: top;
        transform: rotateZ(190deg);
    }
    100%{
        transform-origin: top;
        transform: rotateZ(100deg);
    }
}
@keyframes dance-rhand-movement {
    0%{
        transform-origin: top;
        transform: rotateZ(0deg);
    }
    12.5%{
        transform-origin: top;
        transform: rotateZ(-20deg);
    }
    25% {
        transform-origin: top;
        transform: rotateZ(20deg);
    }
    38.5% {
        transform-origin: top;
        transform: rotateZ(-20deg);
    }
    50%{
        transform-origin: top;
        transform: rotateZ(-100deg);
    }
    62.5%{
        transform-origin: top;
        transform: rotateZ(-190deg);
    }
    75%{
        transform-origin: top;
        transform: rotateZ(-100deg);
    }
    88.5%{
        transform-origin: top;
        transform: rotateZ(-190deg);
    }
    100%{
        transform-origin: top;
        transform: rotateZ(-100deg);
    }
}

@keyframes dance-head-movement {
    0%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(0deg);
        top: -19%;
    }
    12.5%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(-8deg);
        top: -19%;
    }
    25% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(8deg);
        top: -17%;
    }
    38.5% {
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(-8deg);
        top: -17%;
    }
    50%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(8deg);
        top: -15%;
    }
    62.5%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(-8deg);
        top: -15%;
    }
    75%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(8deg);
        top: -13%;
    }
    88.5%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(-8deg);
        top: -11%;
    }
    100%{
        transform-origin: center;
        transform: translate(-50%, -50%) rotateZ(0deg);
        top: -11%;
    }
}

@keyframes dance-lleg-movement {
    0%{
        transform-origin: top;
        transform: rotate(0deg);
    }

    25%{
        transform-origin: top;
        transform: rotate(12deg);
    }
    50%{
        transform-origin: top;
        transform: rotate(0deg);
    }

    100%{
        transform-origin: top;
        transform: rotate(0deg);
    }
}


@keyframes dance-rleg-movement {
    0%{
        transform-origin: top;
        transform: rotate(0deg);
    }

    50%{
        transform-origin: top;
        transform: rotate(0deg);
    }
    75%{
        transform-origin: top;
        transform: rotate(-12deg);
    }

    100%{
        transform-origin: top;
        transform: rotate(0deg);
    }
}

@keyframes dance-eye-movement {
    0%{
        top: 30%;
    }
    33%{
        top: 30%;
    }
    66%{
        top: 22%;
    }
    100%{
        top: 22%;
    }
}


/* DANCE */

/* FLICKER */
@keyframes flicker {
    0%{
        background-color: none;
    }
    50% {
        background-color: rgb(252, 255, 214);
        box-shadow: 0 1vh 5vh 0.7vh #ffffff;
    }
    100% {
        background-color: none;
    }
}
/* /FLICKER */