16/07/2025

<div class="cir cir1">
  <div class="cir cir2">
    <div class="cir cir3">
      <div class="cir cir4"></div>
    </div>
  </div>
</div>
<style>
  :root {
    --size1: 17.7rem;
    --size2: 11.5rem;
    --size3: 5.19rem;
    --size4: 2.1rem;
  }
  body {
    background: #32295A;
    display: grid;
    place-items: center;
    height: 100%;
    width: 100%;
    margin: 0;
  }
  .cir {
    display: flex;
    justify-content: center;
    border-radius: 50%;
    background: #48BF7D;
    padding: 0.5rem;
  }
  .cir2, .cir4 {
    background: #32295A;
    align-items: end;
  }
  .cir2, .cir3, .cir4 {margin: 0.1rem}
  .cir1 {
    width: var(--size1);
    height: var(--size1);
  }
  .cir2 {
    width: var(--size2);
    height: var(--size2);
  }
  .cir3 {
    width: var(--size3);
    height: var(--size3);
  }
  .cir4 {
    width: var(--size4);
    height: var(--size4);
  }
</style>