<!-- https://cssbattle.dev/play/3 -->
<!-- 100% match -->

<div class="box"></div>
<div class="circle"></div>
/* ONLY FOR CODEPEN */
html {
  display: grid;
  place-content: center;
  height: 100%;
  background: #333;
}

body {
  width: 400px;
  height: 300px;
  /*   z-index: -1000; */
}

/* Apply the following in CSS Battle */
body {
  margin: 0;
  background: #6592cf;
}
.box {
  background: #243d83;
  width: 300px;
  height: 150px;
  transform: translate(50px, 50%);
}
.circle {
  position: absolute;
  transform: translate(75px, -50%);
  background: #243d83;
  width: 150px;
  height: 150px;
  border: 50px solid #6592cf;
  border-radius: 999px;
}
.circle::before {
  position: absolute;
  content: "";
  border-radius: 10rem;
  inset: 50px;
  background: #eeb850;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.