<div class="outer">
  <div class="inner">
    <h1 class="title">Where coins Launch</h1>
    <p class="meta">Start the next meta on Metadrop</p>
    <a class="to-moon" href="/app/coins">
      <span>To the moon</span>
      <svg width="37" height="36" viewBox="0 0 37 36" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" clip-rule="evenodd" d="M33.5 18C33.5 9.71573 26.7843 3 18.5 3C10.2157 3 3.5 9.71573 3.5 18C3.5 26.2843 10.2157 33 18.5 33C26.7843 33 33.5 26.2843 33.5 18ZM23.1544 18.75L19.1848 22.7197C18.8919 23.0126 18.8919 23.4874 19.1848 23.7803C19.4776 24.0732 19.9525 24.0732 20.2454 23.7803L24.4348 19.591C25.3134 18.7123 25.3134 17.2877 24.4348 16.409L20.2454 12.2197C19.9525 11.9268 19.4776 11.9268 19.1848 12.2197C18.8919 12.5126 18.8919 12.9874 19.1848 13.2803L23.1544 17.25H11.7501C11.3359 17.25 11.0001 17.5858 11.0001 18C11.0001 18.4142 11.3359 18.75 11.7501 18.75H23.1544Z" fill="#4D4D4D"></path>
      </svg>
    </a>

  </div>
</div>

html,
body {
  margin: 0;
  padding: 0;
}
body {
  background: black;
}
html {
  box-sizing: border-box;
}
*,
:after,
:before {
  box-sizing: inherit;
}
.outer {
  height: 100dvh;
  background: rgb(51, 51, 51);
  background-image: conic-gradient(
    from 93deg,
    rgba(205, 244, 96, 0) 35%,
    rgb(205, 244, 96) 35%,
    rgb(205, 244, 96) 46%,
    rgb(90, 242, 128) 60%,
    rgb(90, 242, 128) 75%,
    rgb(51, 51, 51) 101%,
    rgb(205, 244, 96) 102%
  );
  border-radius: 20vh;
  position: relative;
  border: 10px solid #000;
}
.outer:before,
.outer:after {
  content: "";
  position: absolute;
  border: 2px solid #000;
}
.outer:before {
  inset: 1rem;
  background: rgb(51, 51, 51);
  background-image: conic-gradient(
    from 93deg at 50% 50%,
    #75bff000 24%,
    #75bff0 24%,
    #75bff0 33%,
    #a17de8 50%,
    #a17de8 75%,
    #333333 101%,
    #75bff000 101%
  );
  border-radius: 16vh;
}
.outer:after {
  inset: 2rem;
  background: rgb(51, 51, 51);
  background-image: conic-gradient(
    from 93deg,
    rgba(243, 150, 232, 0) 13%,
    rgb(243, 150, 232) 13%,
    rgb(243, 150, 232) 33%,
    rgb(253, 184, 64) 50%,
    rgb(253, 184, 64) 75%,
    rgb(51, 51, 51) 101%,
    rgba(243, 150, 232, 0) 101%
  );
  border-radius: 14vh;
}
.inner {
  position: absolute;
  inset: 3rem;
  background: #000;
  border: 2px solid #000;
  border-radius: 12vh;
  z-index: 3;
}
/* not working
.inner:before {
  content: "";
  position: absolute;
  bottom: -4.5%;
  left: 63%;
  width: 1.1rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f397e5;
  border: 1px solid #fff;
}
*/
.title,
.meta {
  text-align: center;
  color: #fff;
  font-size: 2rem;
}
.meta {
  color: gray;
  font-size: 1rem;
}
.to-moon {
  display: flex;
  margin: auto;
  width: max-content;
  align-items: center;
  margin: auto;
  border-radius: 2rem;
  background: #fff;
  padding: 0.5rem;
  vertical-align: middle;
  text-decoration: none;
  color: #000;
  gap: 0.5rem;
}
.to-moon:hover {
  background: rgba(255, 255, 255, 0.8);
}