<div class="container">
  <div class="frame">
    <div class="dial">
      <div class="ring">
        <div class="des-lft"></div>
        <div class="des-rht"></div>
      </div>  
    </div>
    <div class="hor-sideroll"><div class="sideroll-in"></div></div>
    <div class="ver-sideroll"></div>
    <div class="outer-case">
      <div class="covering"></div>
    </div>
  </div>
</div>

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
:root {
  --grey: #686f69;
  --innerGreen: #1cd947;
  --darkGreen: #0e5e18;
  --back: #08330f;
}
body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: var(--back);
}

.container {
    position: relative;
}
.container .frame {
    width: 20rem;
    height: 20rem;
    border-radius: 50%;
    background-color: var(--grey);
    box-shadow: inset 4px 4px 18px 7px rgba(0,0,0,0.75);
    position: relative;
}

.container .frame .dial {
    width: 17rem;
    height: 17rem;
    border-radius: 50%;
    background-color: #000000;
    position: relative;
    top: 1.5rem;
    left: 1.5rem;
}

.container .frame .dial .ring{
/*     display: none;  */
    width: 15rem;
    height: 15rem;
    background-color: var(--innerGreen);
    border-radius: 50%;
    position: relative;
    top: 1rem;
    left: 1rem;
    box-shadow: inset 4px 4px 15px 3px rgba(0,0,0,0.75);
}
.container .frame .dial .ring .des-lft,
.container .frame .dial .ring .des-rht {
/*     display: none; */
    width: 100px;
    height: 200px;
    background-color: #000000;
    clip-path: polygon(100% 50%, 0 0, 0 100%);
    position: relative;
    border-radius: 70% 0 0 70%;
}
.container .frame .dial .ring .des-lft{
    top: 1.5rem;
    left: -0.1rem;
}

.container .frame .dial .ring .des-rht{
    top: -11rem;
    left: 8.85rem;
    transform: rotate(180deg);
}

.container .frame .hor-sideroll {
    width: 24rem;
    height: 2.5rem;
    background: #686f69;
    border-radius: 8%;
    position: relative;
    top: -8rem;
    left: -1.9rem;
    z-index: -1;
}

.container .frame .hor-sideroll .sideroll-in {
  background-color: #000;
  width: 22rem;
  height: 2.5rem;
  position: absolute;
  left: 0.85rem;
}
.container .frame .ver-sideroll {
  width: 7.5rem;
  height: 24rem;
  background-color: var(--grey);
  border-radius: 5%;
  z-index: -5;
  position: relative;
  top: -21.55rem;
  left: 6rem;
}
.container .frame .outer-case {
  background-color: var(--darkGreen); 
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  z-index: -5;
  position: relative;
  top: -44.5rem;
  left: -1rem;
}
.container .frame .outer-case .covering {
  width: 25rem;
  height: 9rem;
  background: var(--back);
  position: relative;
  top: 6.5rem;
  left: -1.5rem;
}

.container .frame .dial .ring-anim {
/*     display: block; */
    width: 15rem;
    height: 15rem;
    background-color: var(--innerGreen);
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    border-radius: 50%;
    position: relative;
    top: 1rem;
    left: 1rem;
    box-shadow: inset 4px 4px 15px 3px rgba(0,0,0,0.75);
}

// make .des-lft .des-rht .ring ==== display: none;