Color the Fox

<div class="scene">
  <div class="sky"></div>
  <div class="fox">
    <div class="fox-ear left"></div>
    <div class="fox-ear right"></div>
    <div class="fox-body"></div>
    <div class="fox-belly"></div>
    <div class="fox-nose"></div>
  </div>
</div>

.scene {
  position: relative;
  height: 260px;
  border-radius: 20px;
  overflow: hidden;
  font-family: system-ui, sans-serif;
}

.sky {
  position: absolute;
  inset: 0;
  background-color: midnightblue; /* color me a daytime blue! */
}

.fox {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  width: 160px;
  height: 160px;
}

.fox-body {
  position: absolute;
  inset: 30px 0 0 0;
  border-radius: 50% 50% 45% 45%;
  background-color: white; /* color me! */
}

.fox-belly {
  position: absolute;
  left: 40px;
  bottom: 0;
  width: 80px;
  height: 70px;
  border-radius: 50%;
  background-color: white; /* color me! */
}

.fox-ear {
  position: absolute;
  top: 0;
  width: 46px;
  height: 60px;
  border-radius: 50% 50% 10% 10%;
  background-color: white; /* color me! */
}

.fox-ear.left { left: 14px; transform: rotate(-14deg); }
.fox-ear.right { right: 14px; transform: rotate(14deg); }

.fox-nose {
  position: absolute;
  left: 72px;
  top: 92px;
  width: 18px;
  height: 14px;
  border-radius: 50%;
  background-color: white; /* color me! */
}