*{
    margin: 0;
    padding: 0;
}
body{
    background-color:#000;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    display: flex;
    perspective:18em;
}
.scene{
    position:relative;
    z-index: -25;
    animation: rotate 50s linear infinite;
    transform-style: preserve-3d;
    perspective-origin: 10em;
}
@keyframes rotate {
    to{transform:rotateY(360deg)}
}

.any{
    height:105px;
    width:400px;
    margin-top: 60px;
    align-items: center;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    box-shadow: 0 0 10px 10px white;
    transform: rotateX(90deg);
    animation:effect 6s infinite ;
    position: absolute;
    z-index:-7;
    background:black;
}
@keyframes effect {
     0%{transform: translateY(2em);
        box-shadow: 0 0 25px 15px white;}
     50%{transform: translateY(2.5px);
        box-shadow: 0 0 30px 20px white;}
     70%{transform: translateY(2.7em);
        box-shadow: 0 0 38px 25px white;}
     100%{transform: translateY(2em);}
}
/*floor*/
.floor{
    height:18em;
    width:24em;
    transform: translate(-50%, 85%)
      rotateX(90deg);
    position: absolute;
    background-image:
                  radial-gradient(#0000, #000 75%),
                  repeating-conic-gradient(from 90deg,
                      rgb(6, 56, 6) 0deg 180deg,
                      rgb(15, 75, 15) 180deg 270deg);
    background-size:100%, 0.5em 0.5em;
    z-index: -25;
}
/* floor*/
#el{
    height:242px;
    width:400px;
    overflow: hidden;
    align-items: center;
    animation: in-out  8s linear infinite;
    display: flex;
    justify-content: center;
    position:absolute;
}
@keyframes in-out {
    0%{transform: translate(4px,5px) rotate(5deg);}
    30%{transform: translate(-4px,-5px) rotate(-5deg);}
    50%{transform: translate(2px,2px) rotate(0deg);}
    70%{transform: translate(4px,5px) rotate(5deg);}
    90%{transform: translate(-4px,-5px) rotate(-5deg);}
    100%{transform: translate(4px,5px) rotate(5deg);}
}
.ribbon{
          height:140px;
          width: 160px;
          display: flex;
          transform: translateY(2.5em);
          align-items: center;
          background: red;
          border-radius:50%;
          background-image: radial-gradient(
              circle at bottom,
              rgb(57, 18, 10),
              rgb(106, 11, 11),
              rgb(145, 4, 4),
              rgb(236, 34, 34)
          );         
          position: absolute;
}
.circl{
       height: 14px;
       width: 14px;
       background: black;
       border-radius: 50%;
       position: absolute;
       top:5px;
       left:8px;
       z-index:11;
}
.r{
    height: 19px;
    width: 8px;
    background: black;
    position: absolute;
    top:4px;
    left:3px;
}
.dor{
    height: 30px;
    width: 30px;
    background: rgb(241, 222, 110);
    border-radius: 50%;
    transform: translateY(20px);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top:190px;
    background-image: radial-gradient(
        circle at top,
        rgb(241, 222, 110),
        rgb(109, 95, 18),
        rgb(34, 29, 6)
    );
    border: 1px solid black;
    z-index:10;
}
.line{
         height: 45px;
         width: 1px;
         background-color: rgb(36, 35, 35);
         position: absolute;
         opacity: 0.4;
         z-index: 5;
         left:92px;
         top:68px;
} 
.circle{
        height:52px;
        width: 105px;
        z-index: 6;
        position: absolute;
        border-bottom-left-radius: 150px;
        border-bottom-right-radius: 150px;
        border-top:0;
        box-shadow: 0 3px 3px 0 rgb(60, 60, 60);
        margin-top:95px;
        left:40px;
        background-image: radial-gradient(
            circle at bottom,
            rgb(142, 5, 5),
            rgb(62, 5, 5),
            rgb(57, 8, 8)
        );
        animation: mouth linear 3s infinite;
        overflow: hidden;
        background-color:rgb(122, 8, 8);
}
@keyframes mouth {
    0%{height:48px}
    50%{height:55px}
    70%{height:44px}
    80%{height:48px;}
    90%{height:52px;}
    100%{height:52px;}
}
.mos3{
    height:0.5px;
    width:48px;
    background: black;
    position: absolute;
    animation: short 9s linear infinite;
    z-index:7;
    top:48px;
    box-shadow: 0 0.3px 1px 0 rgb(67, 66, 66);
    opacity:0.6;
    transform: rotate(-10deg);
    left: 111px;
}
.mos4{
height: 0.5px;
width: 48px;
background: black;
animation: short 9s linear infinite;
position: absolute;
z-index: 7;
box-shadow: 0 0.6px 1px 0 rgb(67, 66, 66);
top:58px;
opacity:0.6;
left: 113px;
}
.mos5{
height: 0.5px;
width: 48px;
background: black;
position: absolute;
animation: short 9s linear infinite;
z-index: 7;
box-shadow: 0 0.9px 1px 0 rgb(67, 66, 66);
top:70px;
opacity:0.6;
transform: rotate(10deg);
left: 111px;
}
.mos{
         height: 0.5px;
         width: 48px;
         background: black;
         position: absolute;
         z-index: 7;
         box-shadow: 0 0.3px 1px 0 rgb(67, 66, 66);
         top:48px;
         opacity:0.6;
         transform: rotate(10deg);
         left: 29px;
}
@keyframes short {
    0%{width:0}
    100%{width:48px;}
}
.mos1{
    height: 0.5px;
    width: 48px;
    background: black;
    position: absolute;
    z-index: 7;
    box-shadow: 0 0.6px 1px 0 rgb(67, 66, 66);
    top:58px;
    opacity:0.6;
    left: 27px;
}
.mos2{
    height: 0.5px;
    width: 48px;
    background: black;
    box-shadow: 0 0.9px 1px 0 rgb(67, 66, 66);
    position: absolute;
    z-index: 7;
    opacity:0.6;
    top:70px;
    transform: rotate(-10deg);
    left: 29px;
}
.tong1{
    height: 60px;
    width: 50px;
    top:22px;
    background: rgb(235, 66, 66);
    position: absolute;
    background-image: radial-gradient(
        circle at right,
        rgb(163, 45, 45),
        rgb(109, 17, 17),
        rgb(63, 18, 18)
    );
    border-radius:50%;
    transform: rotate(-30deg);
}   
.tong2{
    height: 60px;
    width: 45px;
    top:29px;
    left:30px;
    z-index: -2;
    background: rgb(252, 79, 79);
    position: absolute ;
    background-image: radial-gradient(
        circle at right,
        rgb(163, 45, 45),
        rgb(109, 17, 17),
        rgb(63, 18, 18)
    );
    border-radius:50%;
    transform: rotate(-30deg) ;
}
.face1{
    height: 195px;
    width: 225px;
    overflow: hidden;
    position:absolute;
    z-index:10;
    animation: colour 4s infinite linear ;
    background-image:radial-gradient(
        circle at top,
        skyblue,
               rgb(61, 121, 145),
               rgb(43, 89, 108),
               rgb(21, 41, 50) 80%
        );
    border-radius:50%;
}
@keyframes colour {
    20%{background-image:radial-gradient(
               circle at top,
               skyblue,
               rgb(60, 133, 162),
               rgb(50, 111, 135),
               rgb(21, 41, 50) 80%
               );}
    40%{
        background-image:radial-gradient(
            circle at top,
            rgb(255, 255, 1),
            rgb(173, 173, 0),
            rgb(121, 121, 0),
            rgb(62, 62, 11) 80%
            );
    }
    60%{
        background-image:radial-gradient(
            circle at top,
            rgb(19, 251, 19),
            rgb(1, 141, 1),
            rgb(0, 70, 0),
            rgb(0, 59, 0) 80%
            );}
    80%{
        background-image:radial-gradient(
            circle at top,
            rgb(255, 45, 45),
            rgb(153, 24, 24),
            rgb(87, 15, 15),
            rgb(59, 1, 1) 80%
            );}
     100%{
             background-image:radial-gradient(
                    circle at top,
                    skyblue,
               rgb(60, 133, 162),
               rgb(50, 111, 135),
               rgb(21, 41, 50) 80%
                    );}
}
#nose{
    height:12px;
    width:12px;
    position:absolute;
    border-radius:50%;
    background:red;
    top:30%;
    background: red;
    animation: nose 1s infinite;
    border:5px solid rgb(219, 3, 3);
    left:44.5%;
}
@keyframes nose{
    0%{background :orange;
       box-shadow: 0 0 3px 12px rgb(244, 88, 32),
                   0 0 3px 15px rgb(254, 147, 109);}
}
 .c1{
        height:15px;
        width:7.5px;
        border:1.6px solid rgb(99, 98, 98);
        position: absolute;
        border-top-left-radius: 100px;
        border-bottom-left-radius: 100px;
        border-right: 0;
        top: 78.5px;
        left: 32px;
 }
 .c2{
    height:15px;
    width:7.5px;
    border:1.6px solid rgb(99, 98, 98);
    position: absolute;
    border-top-right-radius: 100px;
    border-bottom-right-radius: 100px;
    border-left:0;
    top: 78.5px;
    left: 144px;
}
.ball1{
    height:13px;
    width:13px;
    position:relative;
    border-radius:50%;
    background:black;
    animation:move 2s infinite;
    top:60%;
    left:35%;
}

@keyframes move{
    0%{transform: translateY(-3px);}
    30%{transform:translateX(-2px)}
    50%{transform: translateX(2px);}
    70%{transform: translateX(0px);}
    90%{transform: translateY(3px);}
    100%{transform:translate(0px,0px)}
}
.ball3{
    height: 3px;
    width:3px;
    position:absolute;
    border-radius:50%;
    background:white;
    top:25%;
    left:35%;
}
.ball2{
    height:13px;
    width:13px;
    position:absolute;
    border-radius:50%;
    animation:move linear 2s infinite;
    background:black;
    top:60%;
    left:35%;
}
.ball4{
    height:3px;
    width:3px;
    position:absolute;
    border-radius:50%;
    background:white;
    top:25%;
    left:35%;
}
.eye1{
    height:50px;
    width:30px;
    top:16px;
    overflow: hidden;
    background:white;
    position:absolute;
    border-radius:50%;
    box-shadow:inset 0 -4px 4px 0 rgb(164, 162, 162),
                     0 2px 12px 0 rgb(103, 101, 101);
    border:0.5px solid black;
    left:35%;
    z-index:5;
}
.eye2{
    height:50px;
    width:30px;
    top:16px;
    background:white;
    position:absolute;
    border-radius:50%;
    border:0.5px solid black;
    left:50%;
    box-shadow:inset 0 -4px 4px 0 rgb(164, 162, 162),
                     0  2px 12px 0 rgb(103, 101, 101);
    z-index:5;}
.face2{
    height: 155px;
    width: 185px;
    left:8%;
    background:white;
    position:absolute;
    border-radius:50%;
    top:19%;
    background-image: radial-gradient(
        circle at top,
        white,
        rgb(164, 162, 162),
        rgb(109, 109, 109) 60%
    );
    border: 1.2px solid rgb(74, 73, 73);
}