Help with CSS: overlapping elements

I’m working my way through this challenge

And I’m trying to work on this CSS part about the numbers in timer.
So, far I’ve been able to get some of it correct, however, I’m not able to get the it exactly the way it looks in the challenge and I’m looking for some insight as to is whatever I’m doing correct or should I change my approach.

I’m changed the color of the numbers so that I’m able to see which element I’m working with. And I can handle the positions of these elements in the page. The only thing troubling me is the way these number are being displayed and I’m not able to get the borders right for them.
But, here’s the code specifically for the numbers:

<div class="day">
                    <div class="top">14</div>
                    <div class="bottom">14</div>
</div>

and the styles are:

.day {
  display: flex;
  flex-direction: column;
}
        
.top {
  background-color: hsl(236, 21%, 26%);
  position: relative;
  border-radius: 8px 8px 20% 20%;
  height: 5rem;
  overflow-y: hidden;
  z-index: 2;
}
        
.bottom {
  background-color: hsl(236, 21%, 26%);
  color: goldenrod;
  border-radius: 20% 50% 8px 8px;
  height: 10rem;
  position: relative;
  top: -5rem;
  z-index: 1;
}

Can someone help me get the borders right or suggest an alternative/better approach to this code?
Thank you!