<!-- https://cssbattle.dev/play/8 -->
<!-- 100% Match -->

<div class="root"></div>
<div class="slot"></div>
<div class="point"></div>
<div class="handle"></div>

/* ONLY FOR CODEPEN */
html {
  display: grid;
  place-content: center;
  height: 100%;
  background: #333;
}

body {
  position: relative;
  width: 400px;
  height: 300px;
  z-index: -1000;
}

/* Add the following in the CSS Battle */
body {
  margin: 0;
  background: #6592cf;
  display: grid;
  place-items: center;
}
.root {
  position: absolute;
  width: 140px;
  height: 190px;
  background: #060f55;
  border-radius: 0 0 100px 100px;
  margin-top: 10px;
}
.slot {
  width: 20px;
  height: 100px;
  background: #6592cf;
  z-index: 1;
  border-radius: 0 0 100px 100px;
  margin: 20px 0 0 0;
  box-shadow: -40px 0 0 #6592cf, 40px 0 0 #6592cf;
}

.point {
  width: 20px;
  height: 20px;
  background: #060f55;
  border-radius: 10rem;
  transform: translate(-60px, -190px);
  box-shadow: 40px 0 0 #060f55, 80px 0 0 #060f55, 120px 0 0 #060f55;
}
.handle {
  position: absolute;
  bottom: 0;
  width: 20px;
  height: 60px;
  background: #060f55;
}