<div class="cd">
  <div class="hole"></div>
  <div class="reflect"></div>
  <div class="reflect2"></div>
</div>
<div class="shadow"></div>

* {
  margin: 0;
}

body {
  width: 100%;
  height: 100vh;
  background: rgb(247, 80, 38);
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.cd {
  width: 30vw;
  height: 30vw;
  background: rgb(159, 236, 252);
  border: 1.5vw solid rgb(88, 207, 229);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 2;
  
}
.cd::after {
  width: 16.5vw;
  content: "";
  background: rgba(0, 0, 0, 0.1);
  position: absolute;
  right: -1.5vw;
  height: 33vw;
  border-radius: 0 33vw 33vw 0;
  z-index:3;
  
}

.hole {
  width: 5vw;
  height: 5vw;
  border-radius: 50%;
  background: rgb(247, 80, 38);
  border: 2vw solid rgb(249, 196, 6);
  z-index:2;
}

.shadow {
  width: 500%;
  position: absolute;
  left: 50%;
  height: 33vw;
  transform-origin: 0;
  background: rgba(0, 0, 0, 0.15);
  transform: rotate(45deg);
  z-index: 1;
  
}

.reflect {
  width: 12vw;
  height: 12vw;
  border-radius: 50%;
  position: absolute;
  z-index:1;
}

.reflect::before, .reflect::after{
  content:'';
  position:absolute;
  background:rgb(88, 207, 229);
  width:10vw;
  height: 2vw;
  
  clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%);
}

.reflect::before{
  top:-9vw;
  left:-2vw;
  transform:rotate(60deg);
  transform-origin:0;
  
}

.reflect::after{
  bottom:-.5vw;
  right:3.5vw;
  transform:rotate(-120deg);
  transform-origin:10vw;
}


.reflect2{
  position:absolute;
  background:linear-gradient(to bottom,transparent, rgba(255,255,255,.5), transparent);
  width:.5vw;
  height:20vw;
  top:.5vw;
  right:6vw;
  transform:rotate(-30deg);
}

.reflect2::after{
  content:'';
  position:absolute;
  background:linear-gradient(to bottom,transparent, rgba(255,255,255,.3), transparent);
  width:.5vw;
  height:10vw;
  top:-2vw;
  right:2vw;
}