Near Infinity logo using nested elements with border-radius

border-radius-logo.html

<style type="text/css">
  #logo {
    font-size: 60px;
    width: 3.5em;
    height: 2em;
  }

  #logo .leaf {
    width: 1.7em;
    height: 1em;
    border-radius: 0.85em / 0.5em;
    position: absolute;
  }

  #logo .leaf .eye {
    width: 1em;
    height: 0.6em;
    border-radius: 0.5em / 0.3em;
    background-color: white;
  }

  #logo #black {
    background-color: black;
    margin-top: 0.25em;
  }

  #logo #black .eye {
    float: right;
    margin-top: 0.15em;
    margin-right: 0.1em;
  }

  #logo #orange {
    background-color: rgba(237, 128, 39, 1);
    margin-left: 1.62em;
  }

  #logo #orange .eye {
    float: left;
    margin-top: 0.25em;
    margin-left: 0.1em;
  }
</style>

<div id='logo'>
  <div id='black' class='leaf'>
    <div class='eye'>
    </div>
  </div>
  <div id='orange' class='leaf'>
    <div class='eye'>
    </div>
  </div>
</div>