h1{
    position: absolute;


    color: rgb(255, 255, 255);
}
.ui{
position: absolute;width: 500px;
height: 500px;



top: 90px;


left: 360px;

}



.sh {
    position: absolute;
    width: 180px; ; 
    height: 180px;
  color: #000;
  border-radius: 50%;
  box-shadow: 150px 240px 0 0 currentColor,
300px 240px 0 0;
left: 20%;
top: 20px;
right: 30px;


transform: translate(-50% -50%);
}

.sh::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 120px;
    top: 120px;
    left: 30px;
    border-bottom: 180px solid currentColor;
    border-radius: 0 0 0 100%;
    transform: rotate(-40deg);
    transform-origin:right  210px;
}

.sh::after {
    content: "";
    position: absolute;
    width: 210px;
    height: 120px;
    left: 390px;
    top: 120px;
    border-bottom: 180px solid currentColor;
    border-radius: 0 0 100% 0;
    transform: rotate(40deg);
    transform-origin:left 210px;
}

.sh::before{


    animation: ffg 1s ease-in-out infinite;



}


.sh::after{

    animation: ffh 1s ease-in-out infinite;




}

@keyframes ffg {
    


    0%{
        transform: rotate(-50deg);
    }

    50%{
        transform: rotate(-30deg);
    }


    100%{
        transform: rotate(-50deg);
    }

}


@keyframes ffh {

    
    0%{
        transform: rotate(50deg);
    }

    50%{
        transform: rotate(30deg);
    }


    100%{
        transform: rotate(50deg);
    }
    
}



body{

background-color: #0f0f0f;

}