Levelled

<div></div>
<style>
  body {
    background: #f8b140;
    display: grid;
    place-content: center;
  }
  div {
    width: 180px;
    height: 180px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 0 0 30px #000000;
  }

  div::after {
    height: 50px;
    width: 50px;
    border: 50px solid #67aed4;
    position: Absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    border-radius: 50%;
    border-top-color: transparent;
    border-left-color: transparent;
    rotate: 45deg;
    content: '';
  }
  div::before {
    height: 50px;
    width: 50px;
    position: Absolute;
    top: 125px;
    left: 125px;
    background: #67aed4;
    border-radius: 50%;
    content: '';
    box-shadow: 100px 0 #67aed4;
  }
</style>