22/07/2025

<div class="leg leg-l"></div>
<div class="body">
  <div class="eye">
    <div class="iris-container">
      <div class="iris"></div>
    </div>
  </div>
  <div class="eye">
    <div class="iris-container">
      <div class="iris"></div>
    </div>
  </div>
</div>
<div class="leg leg-r"></div>
<style>
  body {
    background: #EEEEEE;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    margin: 0;
  }
  .body {
    width: 6.3rem;
    height: 10rem;
    background: #246541;
    display: flex;
  }
  .eye {
    background: #439E6B;
    height: 3.1rem;
    width: 3.1rem;
    border-radius: 50%;
    transform: translateY(-1.5rem);
    display: grid;
    place-content: center;
  }
  .iris-container {
    width: 3.1rem;
    height: 1rem;
    background: #EEEEEE;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: end;
  }
  .iris {
    background: #000;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    transform: translateY(-0.45rem);
  }
  .leg {
    width: 1rem;
    height: 1.7rem;
    align-self: end;
    border: 0.85rem solid #439E6B;
    border-bottom: none;
    transform: translateY(-3.7rem);
  }
  .leg-l {border-right: none}
  .leg-r {border-left: none}
</style>