Coding with Rumaysa

cute floating ghost

@import url('https://fonts.googleapis.com/css2?family=Merienda:wght@600&display=swap');

body {
background-color: #2458ab;
}

.ghost {
background-color: rgba(255, 255, 255, .8);
width: 180px;
height: 280px;
border-top-left-radius: 100px;
border-top-right-radius: 100px;
margin-left: 10px;
position: absolute;
z-index: 1000;
top: 47%;
left: 48%;
transform: translate(-50%,-50%);
animation: floater 1.5s infinite;
box-shadow: -1px 1px 16px 3px rgba(0,0,0,0.9);
}

@keyframes floater {
0% { top: 47%; }
50% { top: 50%; }
100% { top: 47%; }
}

.eye {
background-color: #212121;
border-radius: 50%;
width: 50px;
height: 50px;
position: absolute;
top: 40px;
}

.eye::after {
content: "";
background-color: white;
border-radius: 50%;
position: absolute;
width: 35px;
height: 35px;
left: 7px;
top: -2px;
}

.eye.left {
left: 32px;
}

.eye.right {
right: 32px;
}

.cheek {
background-color: #ff8cfb;
height: 10px;
width: 30px;
position: absolute;
top: 95px;
border-radius: 50%;
}

.cheek.left {
left: 42px;
}

.cheek.right {
right: 42px;
}

.mouth {
background-color: #212121;
border-radius: 50%;
width: 20px;
height: 20px;
top: 120px;
left: 77px;
position: absolute;
}

.arm {
background-color: #d3deee;
width: 80px;
height: 40px;
position: absolute;
top: 130px;
}

.arm.left {
left: -50px;
transform: rotate(15deg);
border-bottom-left-radius: 50px;
border-top-left-radius: 50%;
}

.arm.right {
right: -50px;
transform: rotate(-15deg);
border-bottom-right-radius: 50px;
border-top-right-radius: 50%;
}