Glasses shape design with CSS

Question

I need to code this glasses shape design for the home page of a website with CSS, and I need to consider in the empty space of upside of glasses we want to put some dynamic data. My problem is how to manage the curve line between two sides. So far I have code the top circle with its pointer (however not perfectly) with CSS border and vh/vw for responsive purposes, I tried to use images for the curve part but it wasn't efficient because in the responsive version it won't work perfectly.

So I am looking for a code based approach to handle this section, any idea?

You can see the code below:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;700&display=swap');
body {
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px
}

@media screen and (max-width: 1400px) {
  body {
    font-size: 12px
  }
}

.homePageHeader {
  display: grid;
  grid-template-columns: 33% 33% 33%;
  width: 100%;
  text-align: center;
  color: #ffff;
  height: 20vh;
}

.homePageWrapper {
  background: #FFF3D3 no-repeat;
  background-size: cover;
  height: 100vh;
  margin: 0;
  transition: .4s linear;
  overflow: hidden;
}

.homePageCircleWrapper {
  position: relative;
  height: 70vh;
  text-align: center;
  margin: 0 auto;
}

.homePageCircleWrapperInner {
  height: 30vw;
  width: 30vw;
  border-radius: 50%;
  border: 2.1875em solid #ff692814;
  margin: 0 auto;
  position: relative;
}

.homePageCircleHeading {
  margin-top: 5em;
  margin-bottom: 1.7em;
  color: #C86102;
}

.homePageCircleHeading h1 {
  font-weight: 300;
  font-size: 2.5em;
}

.homePageCircleAppstores img:nth-child(2) {
  margin-left: 1.25em;
}

.homePageCircleImage {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0%);
}

#circleScroll {
  position: absolute;
  height: 30vw;
  width: 30vw;
  transform: rotate(0deg);
  transition: transform 0.7s linear;
  top: 0;
  left: 0;
  text-align: center;
}

.homePageCircleImage img {
  width: 25vw;
  height: auto;
  margin-bottom: -5px;
}

.scrollPointer {
  position: absolute;
  width: 2.5em;
  /* height: 35px; */
  background: #ff692814;
  margin: 0 auto;
  left: 47%;
  top: 0;
  margin-top: -5.5em;
  border-top-right-radius: 2.5em;
  border-top-left-radius: 2.5em;
  height: 3.3em;
}

.homePageHeaderLogo {
  text-align: center;
  margin: 0 auto;
  transition: .4s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.homePageHeader {
  color: #81621F;
}

.homePageHeaderCTA {
  font-weight: 500;
  font-size: 0.625em;
}

.homePageHeaderMenu {
  font-size: 0.625em;
  font-weight: 700;
}

.homePageFooter {
  padding: 1em 0;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  height: 10vh;
  position: relative;
}

.homePageFooter span {
  font-size: 1em;
  font-weight: 500;
  color: rgba(129, 98, 31, 1);
}

.homePageFooter span:first-child {
  margin-right: 1.8em
}

.homePageFooterInside a {
  /* color: #ffff; */
  color: #CFCFCF;
  text-decoration: none;
}

<div class="homePageWrapper">
  <div class="custom-footer"></div>

  <div class="homePageHeader">
    <div class="homePageHeaderMenu">
      <p>MENU </p>
    </div>
    <div class="homePageHeaderLogo">
      Logo
    </div>
    <div class="homePageHeaderCTA">
      <p>Click here
    </div>
  </div>


  <div class="homePageCircleWrapper">
    <div class="homePageCircleWrapperInner">
      <div class="homePageOptions">

        <div id="circleScroll">
          <span class="scrollPointer"></span>
        </div>
      </div>
      <div class="homePageCircleHeading">
        <h1>
          A website
          <br><strong>For you</strong>
        </h1>

      </div>

      <div class="homePageCircleAppstores">

        <span>span</span> <span>span</span></br>
        <span>span</span> <span>span</span>
      </div>
      <div class="homePageCircleImage">

      </div>
    </div>


    <div class="homePageFooter">

      <div class="homePageFooterInside">
        <a href=""><span>Question</span></a>
        <a href=""> <span>Answer</span></a>
      </div>
    </div>

  </div>

Design:

Answer 1

I updated my question. Now it looks like glasses. Is this what you wanted?

If you want to move the glasses then you can use the class container

.firstHandle {
  height: 40px;
  width: 25px;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
  background: gray;
  margin-left: 5.1em;
  margin-bottom: -0.5em;
}

.firstCircle {
  width: 150px;
  height: 150px;
  border: 20px solid gray;
  border-radius: 10000px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.curve {
    width: 60px;
    height: 25px;
    border-top-left-radius: 200px;
    border-top-right-radius: 200px;
    border: 15px solid gray;
    border-bottom: 0;
    transform: rotate(-90deg);
    margin-top: 0.5em;
    margin-left: 50px;
}

.secondCircle {
  width: 150px;
  height: 150px;
  border: 20px solid grey;
  background: grey;
  border-radius: 10000px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.5em;
}

.secondHandle {
  height: 40px;
  width: 25px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
  background: gray;
  margin-left: 5.1em;
  margin-top: -0.5em;
}

<div id="container">

  <div class="firstHandle"></div>

  <div class="firstCircle">
    <p>Hello World!</p>
  </div>

  <div class="curve"></div>

  <div class="secondCircle">
    <p>Hello World!</p>
  </div>
  
  <div class="secondHandle"></div>

</div>

Let me know if you want me to change anything else.