CodePen Embed - Pure CSS font #4

<div class="wrapper">
  <header>
    <h1 title="nawak" >
      <div class="word">
        <div class="letter N">
          <p>N</p>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element corner-1x1"></div>
          <div class="element corner-1x1"></div>
          <div class="element square-1x1 color-2"></div>
          <div class="element square-1x1 color-2"></div>
          <div class="element quarter-circle-bottom-left-1x1 color-2"></div>
          <div class="element quarter-circle-top-right-1x1 color-2"></div>
        </div>
        <div class="letter A">
          <p>A</p>
          <div class="element rect-2x1"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x1 color-2"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element semi-circle-invert"></div>
          <div class="element semi-circle-invert color-2"></div>
          <div class="element semi-circle-invert color-2"></div>
        </div>
        <div class="letter W">
          <p>W</p>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x1 color-2"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element corner-1x1"></div>
          <div class="element corner-1x1"></div>
          <div class="element corner-1x1 color-2"></div>
          <div class="element corner-1x1 color-2"></div>
        </div>
        <div class="letter A">
          <p>A</p>
          <div class="element rect-2x1"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element rect-2x1 color-2"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element semi-circle-invert"></div>
          <div class="element semi-circle-invert color-2"></div>
          <div class="element semi-circle-invert color-2"></div>
        </div>
        <div class="letter K">
          <p>K</p>
          <div class="element rect-2x1"></div>
          <div class="element rect-2x1 color-2"></div>
          <div class="element rect-2x3 color-2"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element big-corner"></div>
          <div class="element semi-circle-2x1"></div>
          <div class="element rect-2x1"></div>
          <div class="element square-1x1 color-2"></div>
          <div class="element corner-1x1 color-2"></div>
          <div class="element corner-1x1 color-2"></div>
          <div class="element corner-1x1 color-2"></div>
          <div class="element quarter-circle-top-right-2x2 color-2"></div>
        </div>
      </div>
    </h1>
  </header>
  <section class="container">
    <div class="letter A">
      <p>A</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element semi-circle-invert color-2"></div>
    </div>
    <div class="letter B">
      <p>B</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
    </div>
    <div class="letter C">
      <p>C</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-2x1 color-2"></div>
      <div class="element semi-circle-2x1 color-2"></div>
    </div>
    <div class="letter D">
      <p>D</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
    </div>
    <div class="letter E">
      <p>E</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
    </div>
    <div class="letter F">
      <p>F</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
    </div>
    <div class="letter G">
      <p>G</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element semi-circle-2x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-top-right-1x1 color-2"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element quarter-circle-bottom-left-1x1 color-2"></div>
    </div>
    <div class="letter H">
      <p>H</p>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element semi-circle-invert color-2"></div>
    </div>
    <div class="letter I">
      <p>I</p>
      <div class="element square-2x2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element square-2x2"></div>
      <div class="element square-1x1"></div>
      <div class="element square-1x1"></div>
      <div class="element square-1x1"></div>
      <div class="element square-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
    </div>
    <div class="letter J">
      <p>J</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
      <div class="element square-1x1"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-2x1 color-2"></div>
      <div class="element corner-1x1"></div>
    </div>
    <div class="letter K">
      <p>K</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>
    </div>
    <div class="letter L">
      <p>L</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element rect-2x1"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
      <div class="element semi-circle-invert"></div>
    </div>
    <div class="letter M">
      <p>M</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter N">
      <p>N</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element quarter-circle-bottom-left-1x1 color-2"></div>
      <div class="element quarter-circle-top-right-1x1 color-2"></div>
    </div>
    <div class="letter O">
      <p>O</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-top-left-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
      <div class="element semi-circle-invert"></div>
    </div>
    <div class="letter P">
      <p>P</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter Q">
      <p>Q</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1 color-2""></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
    </div>
    <div class="letter R">
      <p>R</p>
      <div class="element corner-1x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element square-1x1"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>
    </div>
    <div class="letter S">
      <p>S</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner color-2"></div>
      <div class="element quarter-circle-top-left-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter T">
      <p>T</p>
      <div class="element square-2x2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
    </div>
    <div class="letter U">
      <p>U</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
    </div>
    <div class="letter V">
      <p>V</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element square-2x2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element corner-2x2"></div>
      <div class="element corner-2x2"></div>
      <div class="element semi-circle-invert color-2"></div>
    </div>
    <div class="letter W">
      <p>W</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter X">
      <p>X</p>
      <div class="element rect-2x3 color-2"></div>
      <div class="element square-1x1"></div>
      <div class="element square-1x1"></div>
      <div class="element square-1x1"></div>
      <div class="element square-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element quarter-circle-top-left-2x2"></div>
      <div class="element quarter-circle-bottom-right-2x2"></div>
      <div class="element quarter-circle-bottom-left-2x2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter Y">
      <p>Y</p>
      <div class="element square-2x2 color-2"></div>
      <div class="element square-2x2 color-2"></div>
      <div class="element square-2x2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter Z">
      <p>Z</p>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element square-2x2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element square-2x2"></div>
      <div class="element quarter-circle-top-left-2x2 color-2"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter n0">
      <p>0</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
      <div class="element quarter-circle-top-left-1x1 color-2"></div>
      <div class="element quarter-circle-top-left-1x1 color-2"></div>
      <div class="element quarter-circle-bottom-right-1x1 color-2"></div>
      <div class="element quarter-circle-bottom-right-1x1 color-2"></div>
    </div>
    <div class="letter n1">
      <p>1</p>
      <div class="element square-2x2"></div>
      <div class="element square-2x2"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
    </div>
    <div class="letter n2">
      <p>2</p>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element square-2x2"></div>
      <div class="element quarter-circle-top-left-2x2 color-2"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1"></div>
      <div class="element corner-1x1"></div>
    </div>
    <div class="letter n3">
      <p>3</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>

      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element quarter-circle-top-left-2x2"></div>
      <div class="element quarter-circle-bottom-left-2x2"></div>
    </div>
    <div class="letter n4">
      <p>4</p>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element quarter-circle-bottom-left-2x2 color-2"></div>
      <div class="element rect-1x2 color-2"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element quarter-circle-bottom-right-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter n5">
      <p>5</p>
      <div class="element square-2x2"></div>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner color-2"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-bottom-left-2x2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter n6">
      <p>6</p>
      <div class="element rect-2x1"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>
      <div class="element quarter-circle-top-right-2x2"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element quarter-circle-bottom-right-1x1 color-2"></div>
    </div>
    <div class="letter n7">
      <p>7</p>
      <div class="element square-2x2"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element quarter-circle-top-left-2x2 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
      <div class="element corner-1x1 color-2"></div>
    </div>
    <div class="letter n8">
      <p>8</p>
      <div class="element rect-2x1"></div>
      <div class="element rect-2x1"></div>
      <div class="element quarter-circle-bottom-left-2x2 color-2"></div>
      <div class="element quarter-circle-top-left-2x2 color-2"></div>
      <div class="element quarter-circle-bottom-right-2x2 color-2"></div>
      <div class="element quarter-circle-top-right-2x2 color-2"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element rect-2x1 color-2"></div>
    </div>
    <div class="letter n9">
      <p>9</p>
      <div class="element rect-2x1"></div>
      <div class="element square-1x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element big-corner"></div>
      <div class="element rect-2x3 color-2"></div>
      <div class="element quarter-circle-bottom-left-2x2 color-2"></div>
      <div class="element quarter-circle-bottom-left-2x2"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert"></div>
      <div class="element semi-circle-invert color-2"></div>
      <div class="element quarter-circle-bottom-right-1x1 color-2"></div>
    </div>
  </section>
</div>

/*
Project Name: Nawak
Description: Pure CSS font #4
Author: @c4rin3
Author URI: http://c4rin3.vituelles.fr
*/
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-size: 15px;
  /**/
  background: #39B54A;
  color: #0D192B;
  /**/
  font-family: helvetica, arial, sans-serif;
  text-align: center;
}

/* WRAPPER DECO */
.wrapper {
  position: relative;
  margin: 5% auto;
  width: 80%;
  padding: 5%;
  background: #0D192B;
  color: #0D192B;
  overflow: hidden;
}
.wrapper::before {
  position: absolute;
  content: '';
  width: 4em;
  height: 4em;
  border-radius: 50%;
  top: -2em;
  left: -2em;
  background: #39B54A;
  background: #39B54A;
}
.wrapper::after {
  position: absolute;
  content: '';
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: #39B54A;
  top: -2em;
  right: -2em;
}
.container::before {
  position: absolute;
  content: '';
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: #39B54A;
  bottom: -2em;
  left: -2em;
}
.container::after {
  position: absolute;
  content: '';
  width: 4em;
  height: 4em;
  border-radius: 50%;
  background: #39B54A;
  bottom: -2em;
  right: -2em;
}

header, .container, footer {
  margin: 0 auto;
  width: 100%;
}
header {
  padding: 0 0 1em 0;
}
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.word {
  font-size: 10px;
  border-bottom: 0.5em dotted #39B54A;
  display: inline-block;
  padding:2em 0;
}

/* LETTERS SPEC.
-------------------------------------------------- */
.letter {
  width: 6em; /* 6 x body font-size */
  height: 7em; /* 7 x body font-size */
  margin: 2em 1em;
  position: relative;
  display: inline-block;
}
.word .letter {
  margin: 1em 0.5em;
}
.letter:hover {
  cursor: pointer;
}
.letter p {
  font-size: 150em;
  text-align: center;
  position: absolute;
  width: 100%;
  height: 100%;
  top:0;
  opacity: 0.2;
  color: #222;
  display: none;
}


/* ELEMENTS BASE
-------------------------------------------------- */
.element {
  margin: 0;
  position: absolute;
  border:none;
  /* DEFINE PRIMARY COLOR */
  background: #39B54A;
}

.element.color-2 {
  /* DEFINE 2nd COLOR */
  background: #FCEE21;
}

/* SEMI-CIRCLE
-------------------------------------------------- */
.semi-circle-2x4 {
  height: 4em;
  width: 2em;
  border-radius: 0 4em 4em 0;
}
.semi-circle-2x1 {
  height: 1em;
  width: 2em;
  border-radius: 2em 2em 0 0;
}

.semi-circle-invert {
  width: 2em;
  height: 1em;
  overflow: hidden;
}
.semi-circle-invert::after {
  content: '';
  display: block;
  position: absolute;
  width: 2em;
  height: 2em;
  border-radius: 4em 4em 0 0;
  /* body color for cache */
  background: currentColor;
}


/* QUARTER-CIRCLE
-------------------------------------------------- */
.quarter-circle-top-right-2x2 {
    width: 2em;
    height: 2em;
    border-radius: 0 2em 0 0;
}
.quarter-circle-bottom-right-2x2 {
    width: 2em;
    height: 2em;
    border-radius: 0 0 2em 0;
}
.quarter-circle-top-left-2x2 {
    width: 2em;
    height: 2em;
    border-radius: 2em  0 0 0;
}
.quarter-circle-bottom-left-2x2 {
    width: 2em;
    height: 2em;
    border-radius: 0 0 0 2em;
}

.quarter-circle-top-left-1x1 {
    width: 1em;
    height: 1em;
    border-radius: 1em  0 0 0;
}
.quarter-circle-top-right-1x1 {
    width: 1em;
    height: 1em;
    border-radius: 0 1em 0 0;
}
.quarter-circle-bottom-right-1x1 {
    width: 1em;
    height: 1em;
    border-radius: 0 0 1em 0;
}
.quarter-circle-bottom-left-1x1 {
    width: 1em;
    height: 1em;
    border-radius: 0 0 0 1em;
}



/* BIG-CORNER
-------------------------------------------------- */
.big-corner {
  width: 2em;
  height: 2em;
  overflow: hidden;
}
.big-corner::after {
  content: '';
  display: block;
  position: absolute;
  width: 2em;
  height: 2em;
  /* body color for cache */
  background: currentColor;
  top: -1em;
  left: -1em;
  border-radius: 50%;
}

/* CORNER
-------------------------------------------------- */
.corner-1x1 {
  width: 1em;
  height: 1em;
  overflow: hidden;
}
.corner-1x1::after {
  content: '';
  display: block;
  position: absolute;
  width: 2em;
  height: 2em;
  top: -1em;
  left: -1em;
  border-radius: 50%;
  /* body color for cache */
  background: currentColor;
}
.corner-2x2 {
  width: 2em;
  height: 2em;
  overflow: hidden;
}
.corner-2x2::after {
  content: '';
  display: block;
  position: absolute;
  width: 4em;
  height: 4em;
  top: -2em;
  left: -2em;
  border-radius: 50%;
  /* body color for cache */
  background: currentColor;
}

/* SQUARE
-------------------------------------------------- */
.square-2x2 {
  width: 2em;
  height: 2em;
}
.square-1x1 {
  width: 1em;
  height: 1em;
}

/* HORIZ - RECT
-------------------------------------------------- */
.rect-2x1 {
  width: 2em;
  height: 1em;
}
.rect-1x2 {
  width: 1em;
  height: 2em;
}
.rect-2x3 {
  width: 2em;
  height: 3em;
}


/* ANIMATION
-------------------------------------------------- */

/* ELEMENTS ANIMATION
-------------------------------------------------- */







/* A
-------------------------------------------------- */
.letter.A :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.A :nth-child(3){
  top: 2em;
  left: 0;
}
.letter.A :nth-child(4){
  top: 2em;
  right: 0;
}
.letter.A :nth-child(5){
  top: 3em;
  left: 2em;
}
.letter.A :nth-child(6){
  top: 0;
  left: 0;
}
.letter.A :nth-child(7){
  top: 0;
  right: 0;
  transform: rotate(90deg);
}
.letter.A :nth-child(8){
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.letter.A :nth-child(9){
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.letter.A :nth-child(10){
  top: 1em;
  left: 2em;
}
.letter.A :nth-child(11){
  top: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.A :nth-child(12){
  top: 4em;
  left: 2em;
}


/* B
-------------------------------------------------- */
.letter.B :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.B :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.B :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.B :nth-child(5){
  top: 0;
  left: 0;
}
.letter.B :nth-child(6){
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.letter.B :nth-child(7){
  top: 1em;
  left: 2em;
}
.letter.B :nth-child(8){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.B :nth-child(9){
  top: 3em;
  left: 3em;
}
.letter.B :nth-child(10){
  top: 2em;
  left: 3em;
}
.letter.B :nth-child(11){
  bottom: 2em;
  left: 3em;
  transform: rotate(-90deg);
}
.letter.B :nth-child(12){
  top: 0em;
  right: 0em;
}
.letter.B :nth-child(13){
  top: 2em;
  right: 0em;
}
.letter.B :nth-child(14){
  bottom: 2em;
  right: 0em;
}
.letter.B :nth-child(15){
  bottom: 0em;
  right: 0em;
}


/* C
-------------------------------------------------- */
.letter.C :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.C :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.C :nth-child(4){
  top: 2em;
  left: 0em;
}

.letter.C :nth-child(5){
  top: 0;
  left: 0;
}
.letter.C :nth-child(6){
  top: 0;
  right: 0;
  transform: rotate(90deg);
}
.letter.C :nth-child(7){
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.letter.C :nth-child(8){
  bottom: 0;
  right: 0;
  transform: rotate(180deg);
}
.letter.C :nth-child(9){
  top: 1em;
  left: 2em;
}
.letter.C :nth-child(10){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.C :nth-child(11){
  top: 2em;
  right: 0;
  transform: rotate(180deg);
}
.letter.C :nth-child(12){
  bottom: 2em;
  right: 0;
}


/* D
-------------------------------------------------- */
.letter.D :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.D :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.D :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.D :nth-child(5){
  top: 2em;
  right: 0em;
}
.letter.D :nth-child(6){
  top: 0;
  left: 0;
}
.letter.D :nth-child(7){
  bottom: 0;
  left: 0;
  transform: rotate(-90deg);
}
.letter.D :nth-child(8){
  top: 0;
  right: 0;
}
.letter.D :nth-child(9){
  bottom: 0;
  right: 0;
}
.letter.D :nth-child(10){
  top: 1em;
  right: 2em;
  transform: rotate(-90deg);
}
.letter.D :nth-child(11){
  bottom: 1em;
  right: 2em;
}
/* E
-------------------------------------------------- */
.letter.E :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.E :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.E :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.E :nth-child(5){
  top: 2em;
  left: 0em;
}
.letter.E :nth-child(6){
  top: 0em;
  left: 0em;
}
.letter.E :nth-child(7){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.E :nth-child(8){
  top: 1em;
  left: 2em;
}
.letter.E :nth-child(9){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.E :nth-child(10){
  top: 2em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.E :nth-child(11){
  bottom: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.E :nth-child(12){
  top: 0em;
  right: 0em;
}
.letter.E :nth-child(13){
  bottom: 0em;
  right: 0em;
}

/* F
-------------------------------------------------- */
.letter.F :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.F :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.F :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.F :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.F :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.F :nth-child(7){
  top: 1em;
  left: 2em;
}
.letter.F :nth-child(8){
  top: 2em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.F :nth-child(9){
  bottom: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.F :nth-child(10){
  top: 0em;
  right: 0em;
}

/* G
-------------------------------------------------- */
.letter.G :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.G :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.G :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.G :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.G :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.G :nth-child(7){
  top: 1em;
  left: 2em;
}
.letter.G :nth-child(8){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.G :nth-child(9){
  top: 0em;
  right: 0em;
}
.letter.G :nth-child(10){
  top: 2em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.G :nth-child(11){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.G :nth-child(12){
  bottom: 2em;
  right: 0em;
}
.letter.G :nth-child(13){
  bottom: 2em;
  right: 1em;
}
.letter.G :nth-child(14){
  bottom: 2em;
  right: 2em;
}


/* H
-------------------------------------------------- */
.letter.H :nth-child(2){
  top: 3em;
  left: 2em;
}
.letter.H :nth-child(3){
  top: 2em;
  left: 0em;
}
.letter.H :nth-child(4){
  top: 2em;
  right: 0em;
}
.letter.H :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.H :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.H :nth-child(7){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.H :nth-child(8){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.H :nth-child(9){
  top: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.H :nth-child(10){
  bottom: 2em;
  left: 2em;
}


/* I
-------------------------------------------------- */
.letter.I :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.I :nth-child(3){
  top: 2em;
  left: 2em;
}
.letter.I :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.I :nth-child(5){
  top: 0em;
  left: 1em;
}
.letter.I :nth-child(6){
  top: 0em;
  right: 1em;
}
.letter.I :nth-child(7){
  bottom: 0em;
  left: 1em;
}
.letter.I :nth-child(8){
  bottom: 0em;
  right: 1em;
}
.letter.I :nth-child(9){
  top: 0em;
  left: 0em;
}
.letter.I :nth-child(10){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.I :nth-child(11){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.I :nth-child(12){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.I :nth-child(13){
  top: 1em;
  left: 1em;
  transform: rotate(-90deg);
}
.letter.I :nth-child(14){
  top: 1em;
  right: 1em;
  transform: rotate(180deg);
}
.letter.I :nth-child(15){
  bottom: 1em;
  left: 1em;
}
.letter.I :nth-child(16){
  bottom: 1em;
  right: 1em;
  transform: rotate(90deg);
}

/* J
-------------------------------------------------- */
.letter.J :nth-child(2){
  top: 2em;
  right: 1em;
}
.letter.J :nth-child(3){
  top: 0em;
  left: 2em;
}
.letter.J :nth-child(4){
  top: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.J :nth-child(5){
  bottom: 0em;
  right: 1em;
}
.letter.J :nth-child(6){
  bottom: 0em;
  left: 2em;
}
.letter.J :nth-child(7){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.J :nth-child(8){
  bottom: 2em;
  left: 0em;
}
.letter.J :nth-child(9){
  bottom: 1em;
  left: 2em;
  transform: rotate(90deg);
}


/* K
-------------------------------------------------- */
.letter.K :nth-child(2){
  top: 1em;
  right: 1em;
}
.letter.K :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.K :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.K :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.K :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.K :nth-child(7){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.K :nth-child(8){
  top: 0em;
  right: 1em;
}
.letter.K :nth-child(9){
  top: 1em;
  right: 1em;
}
.letter.K :nth-child(10){
  top: 2em;
  right: 2em;
}
.letter.K :nth-child(11){
  top: 2em;
  left: 2em;
}
.letter.K :nth-child(12){
  top: 2em;
  right: 1em;
  transform: rotate(180deg);
}
.letter.K :nth-child(13){
  bottom: 2em;
  right: 2em;
  transform: rotate(-90deg);
}
.letter.K :nth-child(14){
  bottom: 2em;
  right: 0em;
}
/* L
-------------------------------------------------- */
.letter.L :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.L :nth-child(3){
  top: 0em;
  left: 0em;
}
.letter.L :nth-child(4){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.L :nth-child(5){
  bottom: 0em;
  left: 2em;
}
.letter.L :nth-child(6){
  bottom: 0em;
  right: 0em;
}
.letter.L :nth-child(7){
  bottom: 1em;
  right: 2em;
  transform: rotate(180deg);
}

/* M
-------------------------------------------------- */
.letter.M :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.M :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.M :nth-child(4){
  top: 2em;
  left: 2em;
}
.letter.M :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.M :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.M :nth-child(7){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.M :nth-child(8){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.M :nth-child(9){
  top: 1em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.M :nth-child(10){
  top: 1em;
  right: 2em;
}
.letter.M :nth-child(11){
  top: 3em;
  left: 2em;
  transform: rotate(-90deg);
}
.letter.M :nth-child(12){
  top: 3em;
  right: 2em;
  transform: rotate(180deg);
}

/* N
-------------------------------------------------- */
.letter.N :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.N :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.N :nth-child(4){
  top: 0em;
  left: 0em;
}
.letter.N :nth-child(5){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.N :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.N :nth-child(7){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.N :nth-child(8){
  top: 1em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.N :nth-child(9){
  bottom: 1em;
  right: 2em;
  transform: rotate(-90deg);
}
.letter.N :nth-child(10){
  top: 2em;
  left: 2em;
}
.letter.N :nth-child(11){
  bottom: 2em;
  right: 2em;
}
.letter.N :nth-child(12){
  top: 3em;
  left: 2em;
}
.letter.N :nth-child(13){
  top: 3em;
  right: 2em;
}

/* O
-------------------------------------------------- */
.letter.O :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.O :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.O :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.O :nth-child(5){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.O :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.O :nth-child(7){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.O :nth-child(8){
  top: 0em;
  left: 0em;
}
.letter.O :nth-child(9){
  top: 0em;
  left: 2em;
}
.letter.O :nth-child(10){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}

/* P
-------------------------------------------------- */
.letter.P :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.P :nth-child(3){
  top: 2em;
  left: 0em;
}
.letter.P :nth-child(4){
  top: 3em;
  right: 2em;
}
.letter.P :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.P :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.P :nth-child(7){
  top: 0em;
  right: 0em;
}
.letter.P :nth-child(8){
  top: 2em;
  right: 0em;
}
.letter.P :nth-child(9){
  top: 1em;
  left: 2em;
}
.letter.P :nth-child(10){
  top: 2em;
  right: 2em;
}

/* Q
-------------------------------------------------- */
.letter.Q :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.Q :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.Q :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.Q :nth-child(5){
  top: 2em;
  right: 0em;
}
.letter.Q :nth-child(6){
  top: 0em;
  left: 0em;
}
.letter.Q :nth-child(7){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.Q :nth-child(8){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.Q :nth-child(9){
  top: 1em;
  left: 2em;
}
.letter.Q :nth-child(10){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.Q :nth-child(11){
  bottom: 2em;
  right: 0em;
}
.letter.Q :nth-child(12){
  bottom: 0em;
  right: 0em;
}
/* R
-------------------------------------------------- */
.letter.R :nth-child(2){
  top: 1em;
  left: 2em;
  transform: rotate(-90deg);
}
.letter.R :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.R :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.R :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.R :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.R :nth-child(7){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.R :nth-child(8){
  top: 0em;
  left: 2em;
}
.letter.R :nth-child(9){
  top: 0em;
  right: 1em;
}
.letter.R :nth-child(10){
  top: 2em;
  right: 2em;
}
.letter.R :nth-child(11){
  top: 2em;
  left: 2em;
}
.letter.R :nth-child(12){
  top: 2em;
  right: 1em;
  transform: rotate(180deg);
}
.letter.R :nth-child(13){
  bottom: 2em;
  right: 2em;
  transform: rotate(-90deg);
}
.letter.R :nth-child(14){
  bottom: 2em;
  right: 0em;
}

/* S
-------------------------------------------------- */
.letter.S :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.S :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.S :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.S :nth-child(5){
  top: 2em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.S :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.S :nth-child(7){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.S :nth-child(8){
  top: 3em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.S :nth-child(9){
  top: 0em;
  left: 0em;
}
.letter.S :nth-child(10){
  bottom: 0em;
  right: 0em;
}
.letter.S :nth-child(11){
  top: 1em;
  left: 2em;
}
.letter.S :nth-child(12){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.S :nth-child(13){
  top: 2em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.S :nth-child(14){
  bottom: 2em;
  right: 2em;
  transform: rotate(-90deg);
}

/* T
-------------------------------------------------- */
.letter.T :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.T :nth-child(3){
  top: 2em;
  left: 2em;
}
.letter.T :nth-child(4){
  top: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.T :nth-child(5){
  top: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.T :nth-child(6){
  bottom: 0em;
  left: 2em;
  transform: rotate(-90deg);
}

/* U
-------------------------------------------------- */
.letter.U :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.U :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.U :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.U :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.U :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.U :nth-child(7){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.U :nth-child(8){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.U :nth-child(9){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
/* V
-------------------------------------------------- */
.letter.V :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.V :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.V :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.V :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.V :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.V :nth-child(7){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.V :nth-child(8){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.V :nth-child(9){
  bottom: 2em;
  left: 2em;
  transform: rotate(180deg);
}


/* W
-------------------------------------------------- */
.letter.W :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.W :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.W :nth-child(4){
  bottom: 2em;
  left: 2em;
}
.letter.W :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.W :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.W :nth-child(7){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.W :nth-child(8){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.W :nth-child(9){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.W :nth-child(10){
  bottom: 1em;
  right: 2em;
  transform: rotate(-90deg);
}
.letter.W :nth-child(11){
  top: 3em;
  left: 2em;
}
.letter.W :nth-child(12){
  top: 3em;
  right: 2em;
  transform: rotate(90deg);
}

/* X
-------------------------------------------------- */
.letter.X :nth-child(2){
  top: 2em;
  left: 2em;
}
.letter.X :nth-child(3){
  top: 1em;
  left: 0em;
}
.letter.X :nth-child(4){
  top: 1em;
  right: 0em;
}
.letter.X :nth-child(5){
  bottom: 1em;
  left: 0em;
}
.letter.X :nth-child(6){
  bottom: 1em;
  right: 0em;
}
.letter.X :nth-child(7){
  top: 0em;
  left: 0em;
}
.letter.X :nth-child(8){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.X :nth-child(9){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.X :nth-child(10){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.X :nth-child(11){
  top: 0em;
  left: 1em;
}
.letter.X :nth-child(12){
  top: 0em;
  right: 1em;
}
.letter.X :nth-child(13){
  bottom: 0em;
  left: 1em;
}
.letter.X :nth-child(14){
  bottom: 0em;
  right: 1em;
}
.letter.X :nth-child(15){
  top: 2em;
  left: 1em;
  transform: rotate(-90deg);
}
.letter.X :nth-child(16){
  top: 2em;
  right: 1em;
  transform: rotate(180deg);
}
.letter.X :nth-child(17){
  bottom: 2em;
  left: 1em;
}
.letter.X :nth-child(18){
  bottom: 2em;
  right: 1em;
  transform: rotate(90deg);
}

/* Y
-------------------------------------------------- */
.letter.Y :nth-child(2){
  top: 2em;
  left: 0em;
}
.letter.Y :nth-child(3){
  top: 2em;
  right: 0em;
}
.letter.Y :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.Y :nth-child(5){
  bottom: 2em;
  left: 2em;
}
.letter.Y :nth-child(6){
  top: 0em;
  left: 0em;
}
.letter.Y :nth-child(7){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.Y :nth-child(8){
  top: 3em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.Y :nth-child(9){
  bottom: 2em;
  left: 1em;
  transform: rotate(-90deg);
}
.letter.Y :nth-child(10){
  bottom: 2em;
  right: 1em;
  transform: rotate(180deg);
}

/* Z
-------------------------------------------------- */
.letter.Z :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.Z :nth-child(3){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.Z :nth-child(4){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.Z :nth-child(5){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.Z :nth-child(6){
  top: 0em;
  left: 2em;
}
.letter.Z :nth-child(7){
  top: 3em;
  left: 2em;
}
.letter.Z :nth-child(8){
  bottom: 0em;
  left: 2em;
}
.letter.Z :nth-child(9){
  top: 3em;
  left: 0em;
}
.letter.Z :nth-child(10){
  bottom: 3em;
  right: 0em;
}
.letter.Z :nth-child(11){
  bottom: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.Z :nth-child(12){
  top: 2em;
  right: 2em;
}

/* 0
-------------------------------------------------- */
.letter.n0 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n0 :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.n0 :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.n0 :nth-child(5){
  top: 2em;
  right: 0em;
}
.letter.n0 :nth-child(6){
  top: 0em;
  left: 0em;
}
.letter.n0 :nth-child(7){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n0 :nth-child(8){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.n0 :nth-child(9){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n0 :nth-child(10){
  top: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n0 :nth-child(11){
  bottom: 1em;
  right: 2em;
}
.letter.n0 :nth-child(12){
  top: 3em;
  left: 2em;
}
.letter.n0 :nth-child(13){
  top: 2em;
  right: 2em;
}
.letter.n0 :nth-child(14){
  top: 3em;
  right: 2em;
}
.letter.n0 :nth-child(15){
  bottom: 2em;
  left: 2em;
}

/* 1
-------------------------------------------------- */
.letter.n1 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n1 :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.n1 :nth-child(4){
  top: 2em;
  left: 2em;
}
.letter.n1 :nth-child(5){
  bottom: 0em;
  left: 0em;
}
.letter.n1 :nth-child(6){
  bottom: 0em;
  right: 0em;
}
.letter.n1 :nth-child(7){
  top: 0em;
  left: 0em;
}
.letter.n1 :nth-child(8){
  top: 2em;
  left: 1em;
  transform: rotate(-90deg);
}
.letter.n1 :nth-child(9){
  bottom: 1em;
  left: 1em;
}
.letter.n1 :nth-child(10){
  bottom: 1em;
  right: 1em;
  transform: rotate(90deg);
}

/* 2
-------------------------------------------------- */
.letter.n2 :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.n2 :nth-child(3){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n2 :nth-child(4){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.n2 :nth-child(5){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n2 :nth-child(6){
  top: 0em;
  left: 2em;
}
.letter.n2 :nth-child(7){
  top: 3em;
  left: 2em;
}
.letter.n2 :nth-child(8){
  bottom: 0em;
  left: 2em;
}
.letter.n2 :nth-child(9){
  top: 3em;
  left: 0em;
}
.letter.n2 :nth-child(10){
  bottom: 3em;
  right: 0em;
}
.letter.n2 :nth-child(11){
  bottom: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n2 :nth-child(12){
  top: 2em;
  right: 2em;
}
.letter.n2 :nth-child(13){
  top: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n2 :nth-child(14){
  top: 1em;
  right: 2em;
  transform: rotate(-90deg);
}

/* 3
-------------------------------------------------- */
.letter.n3 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n3 :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.n3 :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.n3 :nth-child(5){
  top: 2em;
  right: 0em;
}
.letter.n3 :nth-child(6){
  bottom: 2em;
  right: 0em;
}
.letter.n3 :nth-child(7){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n3 :nth-child(8){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n3 :nth-child(9){
  top: 1em;
  left: 2em;
}
.letter.n3 :nth-child(10){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n3 :nth-child(11){
  top: 2em;
  right: 2em;
}
.letter.n3 :nth-child(12){
  bottom: 2em;
  right: 2em;
  transform: rotate(-90deg);
}
.letter.n3 :nth-child(13){
  top: 0em;
  left: 0em;
}
.letter.n3 :nth-child(14){
  bottom: 0em;
  left: 0em;
}

/* 4
-------------------------------------------------- */
.letter.n4 :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.n4 :nth-child(3){
  bottom: 0em;
  left: 2em;
  transform: rotate(-90deg);
}
.letter.n4 :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.n4 :nth-child(5){
  top: 4em;
  left: 2em;
}
.letter.n4 :nth-child(6){
  top: 3em;
  left: 0em;
}
.letter.n4 :nth-child(7){
  top: 2em;
  left: 3em;
}
.letter.n4 :nth-child(8){
  bottom: 2em;
  right: 1em;
}
.letter.n4 :nth-child(9){
  bottom: 2em;
  right: 0em;
}
.letter.n4 :nth-child(10){
  top: 3em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.n4 :nth-child(11){
  top: 3em;
  right: 1em;
  transform: rotate(90deg);
}

/* 5
-------------------------------------------------- */
.letter.n5 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n5 :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.n5 :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.n5 :nth-child(5){
  top: 2em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.n5 :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n5 :nth-child(7){
  bottom: 0em;
  left: 0em;
}
.letter.n5 :nth-child(8){
  top: 3em;
  right: 0em;
}
.letter.n5 :nth-child(9){
  top: 0em;
  left: 0em;
}
.letter.n5 :nth-child(10){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n5 :nth-child(11){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n5 :nth-child(12){
  top: 2em;
  left: 2em;
  transform: rotate(90deg);
}
.letter.n5 :nth-child(13){
  bottom: 2em;
  right: 2em;
  transform: rotate(-90deg);
}

/* 6
-------------------------------------------------- */
.letter.n6 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n6 :nth-child(3){
  top: 3em;
  left: 3em;
}
.letter.n6 :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.n6 :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.n6 :nth-child(6){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.n6 :nth-child(7){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n6 :nth-child(8){
  top: 2em;
  left: 0em;
}
.letter.n6 :nth-child(9){
  top: 3em;
  right: 0em;
}
.letter.n6 :nth-child(10){
  top: 0em;
  right: 0em;
}
.letter.n6 :nth-child(11){
  top: 1em;
  left: 2em;
}
.letter.n6 :nth-child(12){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n6 :nth-child(13){
  top: 4em;
  left: 2em;
}
.letter.n6 :nth-child(14){
  top: 3em;
  left: 2em;
  transform: rotate(180deg);
}

/* 7
-------------------------------------------------- */
.letter.n7 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n7 :nth-child(3){
  top: 3em;
  left: 3em;
}
.letter.n7 :nth-child(4){
  top: 0em;
  left: 0em;
}
.letter.n7 :nth-child(5){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n7 :nth-child(6){
  bottom: 0em;
  left: 1em;
  transform: rotate(-90deg);
}
.letter.n7 :nth-child(7){
  top: 2em;
  right: 0em;
}
.letter.n7 :nth-child(8){
  top: 3em;
  left: 1em;
}
.letter.n7 :nth-child(9){
  top: 2em;
  right: 2em;
}
.letter.n7 :nth-child(10){
  top: 4em;
  right: 2em;
  transform: rotate(180deg);
}

/* 8
-------------------------------------------------- */
.letter.n8 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n8 :nth-child(3){
  bottom: 0em;
  left: 2em;
}
.letter.n8 :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.n8 :nth-child(5){
  top: 3em;
  left: 0em;
}
.letter.n8 :nth-child(6){
  top: 2em;
  right: 0em;
}
.letter.n8 :nth-child(7){
  top: 3em;
  right: 0em;
}
.letter.n8 :nth-child(8){
  top: 0em;
  left: 0em;
}
.letter.n8 :nth-child(9){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n8 :nth-child(10){
  bottom: 0em;
  left: 0em;
  transform: rotate(-90deg);
}
.letter.n8 :nth-child(11){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n8 :nth-child(12){
  top: 1em;
  left: 2em;
}
.letter.n8 :nth-child(13){
  bottom: 1em;
  right: 2em;
  transform: rotate(180deg);
}
.letter.n8 :nth-child(14){
  top: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n8 :nth-child(15){
  bottom: 2em;
  left: 2em;
}
.letter.n8 :nth-child(16){
  top: 3em;
  left: 2em;
}

/* 9
-------------------------------------------------- */
.letter.n9 :nth-child(2){
  top: 0em;
  left: 2em;
}
.letter.n9 :nth-child(3){
  top: 3em;
  left: 2em;
}
.letter.n9 :nth-child(4){
  bottom: 0em;
  left: 2em;
}
.letter.n9 :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.n9 :nth-child(6){
  top: 0em;
  right: 0em;
  transform: rotate(90deg);
}
.letter.n9 :nth-child(7){
  bottom: 0em;
  right: 0em;
  transform: rotate(180deg);
}
.letter.n9 :nth-child(8){
  top: 2em;
  right: 0em;
}
.letter.n9 :nth-child(9){
  top: 2em;
  left: 0em;
}
.letter.n9 :nth-child(10){
  bottom: 0em;
  left: 0em;
}
.letter.n9 :nth-child(11){
  top: 1em;
  left: 2em;
}
.letter.n9 :nth-child(12){
  bottom: 1em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n9 :nth-child(13){
  top: 2em;
  left: 2em;
  transform: rotate(180deg);
}
.letter.n9 :nth-child(14){
  top: 3em;
  right: 2em;
}

Run Pen

This Pen is owned by C4rin3 on CodePen.

See more by @c4rin3 on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.