#ilustrasi {
    margin: 0 auto;
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.1); */
    overflow: hidden;
    font-family: Museo300;
    --base-font-size: 20px;
    font-size: var(--base-font-size);
    width: 100%;
    height: 37.2em;
    margin-top: -6em;
    /*
    &:hover {
        #back {
            animation-play-state: paused;
        }
        .feat {
            animation-play-state: paused;
        }
        .feat-text {
            animation-play-state: paused;
        }
    }
    */
}
@media screen and (max-width: 1366px) {
    #ilustrasi {
        margin-top: -8em;
    }
}

.eyes {
    width: 4.8em;
    position: absolute;
    left: 50%;
    margin-left: -2.3em;
    bottom: 16em;
}

.smoke {
    width: 2em;
    position: absolute;
    left: 50%;
    margin-left: 9em;
    bottom: 7em;
}

#back {
    position: absolute;
    bottom: -20em;
    left: 50%;
    margin-left: -25em;
    width: 50em;
    animation: puter 10s linear 2s infinite ;
}

#gg {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 42em;
    transform: translateX(-50%);
}

#imgfeat1 {
    bottom: 3.2em;
    left: 50%;
    margin-left: -23.4em;
    width: 2.93em;
}

#imgfeat2 {
    bottom: 18.8em;
    left: 50%;
    margin-left: -16.8em;
    width: 2.475em;
}

#imgfeat3 {
    bottom: 25.4em;
    left: 50%;
    margin-left: -1.5125em;
    width: 3.345em;
}

#imgfeat4 {
    bottom: 19em;
    left: 50%;
    margin-left: 14em;
    width: 3.07em;
}

#imgfeat5 {
    bottom: 3.3em;
    left: 50%;
    margin-left: 20.45em;
    width: 3.25em;
}

.feat {
    position: absolute;
    animation: hideshow 10s linear 2s infinite;
}

.feat-text {
    position: absolute;
    color: #fff;
    width: 12.5em;
    animation: hideshow 10s linear 2s infinite;
    filter: drop-shadow(2px 2px 2px rgba(0,0,0,0.2));

}
#feat1 {
    bottom: 4.3em;
    left: 50%;
    margin-left: -37em;
}
#feat2 {
    bottom: 23em;
    left: 50%;
    margin-left: -30.6em;
}
#feat3 {
    bottom: 30.6em;
    left: 50%;
    margin-left: -6em;
}
#feat4 {
    bottom: 22em;
    left: 50%;
    margin-left: 17.5em;
}
#feat5 {
    bottom: 4.2em;
    left: 50%;
    margin-left: 25em;
}
@keyframes hideshow {
    0% {
        opacity: 1;
    }
    1% {
        opacity: 0;
    }
    27% {
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }

}
@keyframes puter {
    0% {
        filter: drop-shadow(0px 0px 0px rgba(0,0,0,0.0));
    }
    5% {
        transform: rotate(0deg) scale(1.05);
        filter: drop-shadow(10px 10px 2px rgba(0,0,0,0.1));
        }
    19% {
        filter: drop-shadow(10px 10px 2px rgba(0,0,0,0.1));
        transform: rotate(46deg) scale(1.05);
        }
    20% {
        filter: drop-shadow(10px 10px 2px rgba(0,0,0,0.1));
        transform: rotate(45deg) scale(1.05);
        }
    22% {
        filter: drop-shadow(10px 10px 2px rgba(0,0,0,0.1));
        transform: rotate(45deg) scale(1.05);
        }
    27% {
        filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
        transform: rotate(45deg) scale(1);
        }
    100% {
        filter: drop-shadow(0px 0px 0px rgba(0,0,0,0));
        transform: rotate(45deg);
        }
}


#siputar {
    position: absolute;
    bottom: 35px;
    left: 50%;
    margin-left: -30px;
    animation: GFG 5s infinite linear;

}
@keyframes GFG { 
    0% { 
        transform: rotate(0deg)  
              translateY(400px) rotate(0deg); 
    } 

    100% { 
        transform: rotate(360deg)  
              translateY(400px) rotate(-360deg); 
    } 
}