css battle i scored 100 %
<body>
<div class="A">
<div class="B">
<div class="C"></div>
</div>
</div>
<style>
.A {
width: 150;
height: 150;
background: #4F77FF;
border-radius:105px;
position: absolute;
top:50;
left:125;
display:flex;
justify-content:center;
align-items:center;
;
}
.B{
width:75px;
height:125px;
background-color:#F9E492;
position:relative;
top:62;
left:-38;
}
.C{
width:75px;
height:75px;
background-color:#9AD5FF;
border-radius: 0 0 0 90px ;
}
body{
background-color:#19191A;
display:flex;
justify-content:center;
align-items:center;
}
</style>
</body>