CodePen Embed - Pure CSS font #5

<div class="wrapper">
  <header>
    <h1 title="feeze" >
      <div class="word">
        <div class="letter H">
          <p>H</p>
          <div class="element blend rect-3x1"></div>
          <div class="element blend rect-1x5 color-2"></div>
          <div class="element blend rect-1x5 color-2"></div>
        </div>
        <div class="letter E">
          <p>E</p>
          <div class="element blend rect-3x1"></div>
          <div class="element blend rect-2x1"></div>
          <div class="element blend rect-1x5 color-2"></div>
          <div class="element blend rect-3x1"></div>
        </div>
        <div class="letter L">
          <p>L</p>
          <div class="element blend rect-1x5 color-2"></div>
          <div class="element blend rect-3x1"></div>
        </div>
        <div class="letter L">
          <p>L</p>
          <div class="element blend rect-1x5 color-2"></div>
          <div class="element blend rect-3x1"></div>
        </div>
        <div class="letter O">
          <p>O</p>
          <div class="element blend rect-1x3 color-2"></div>
          <div class="element blend semi-circle-3x2-top"></div>
          <div class="element circle-1x1"></div>
          <div class="element blend semi-circle-3x2-bottom"></div>
          <div class="element circle-1x1"></div>
          <div class="element blend rect-1x3 color-2"></div>
        </div>
      </div>
    </h1>
  </header>
  <section class="container">
    <div class="letter A">
      <p>A</p>
      <div class="element blend rect-3x1"></div>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>
    </div>
    <div class="letter B">
      <p>B</p>
      <div class="element quarter-circle-bottom-right color-2"></div>
      <div class="element quarter-circle-top-right color-2"></div>
      <div class="element blend rect-25x1"></div>
      <div class="element blend quarter-circle-top-right"></div>
      <div class="element blend quarter-circle-bottom-right"></div>
      <div class="element rect-25x1"></div>
      <div class="element rect-25x1"></div>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter C">
      <p>C</p>
      <div class="element blend rect-1x3 color-2"></div>
      <div class="element blend semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>
      <div class="element circle-1x1"></div>
    </div>
    <div class="letter D">
      <p>D</p>
      <div class="element blend rect-1x5 color-2"></div>

      <div class="element blend rect-25x1"></div>
      <div class="element blend rect-25x1"></div>

      <div class="element quarter-circle-top-right"></div>
      <div class="element quarter-circle-bottom-right"></div>

      <div class="element blend rect-1x3 color-2"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>
    </div>
    <div class="letter E">
      <p>E</p>
      <div class="element blend rect-3x1"></div>
      <div class="element blend rect-2x1"></div>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-3x1"></div>
    </div>
    <div class="letter F">
      <p>F</p>
      <div class="element blend rect-3x1"></div>
      <div class="element blend rect-2x1"></div>
      <div class="element blend rect-1x5 color-2"></div>
    </div>
    <div class="letter G">
      <p>G</p>
      <div class="element blend rect-1x3 color-2"></div>
      <div class="element blend semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>
      <div class="element circle-1x1"></div>
      <div class="element rect-1x15"></div>
      <div class="element blend rect-15x1 color-2"></div>
    </div>
    <div class="letter H">
      <p>H</p>
      <div class="element blend rect-3x1"></div>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-1x5 color-2"></div>

    </div>
    <div class="letter I">
      <p>I</p>
      <div class="element blend rect-1x5 color-2"></div>

    </div>
    <div class="letter J">
      <p>J</p>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>
      <div class="element circle-1x1"></div>
    </div>
    <div class="letter K">
      <p>K</p>
       <div class="element blend rect-1x5 color-2"></div>
       <div class="element blend rect-25x1"></div>
      <div class="element quarter-circle-top-right"></div>
       <div class="element rect-1x2"></div>
      <div class="element blend quarter-circle-bottom-right color-2"></div>
       <div class="element rect-1x2 color-2"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter L">
      <p>L</p>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-3x1"></div>

    </div>
    <div class="letter M">
      <p>M</p>
      <div class="element semi-circle-3x2-top"></div>
      <div class="element semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend rect-1x4 color-2"></div>

    </div>
    <div class="letter N">
      <p>N</p>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter O">
      <p>O</p>
      <div class="element blend rect-1x3 color-2"></div>
      <div class="element blend semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend rect-1x3 color-2"></div>

    </div>
    <div class="letter P">
      <p>P</p>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend semi-circle-3x2-right color-2"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend rect-25x1"></div>
      <div class="element blend rect-25x1"></div>

    </div>
    <div class="letter Q">
      <p>Q</p>
      <div class="element blend rect-1x3 color-2"></div>
      <div class="element blend semi-circle-3x2-top"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend quarter-circle-bottom-left"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend rect-1x25 color-2"></div>
      <div class="element rect-2x1"></div>

    </div>
    <div class="letter R">
      <p>R</p>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-25x1"></div>
      <div class="element blend rect-25x1"></div>
      <div class="element quarter-circle-top-right"></div>
      <div class="element circle-1x1"></div>
      <div class="element rect-1x2"></div>
      <div class="element blend semi-circle-3x2-right color-2"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter S">
      <p>S</p>

      <div class="element semi-circle-3x2-top"></div>
      <div class="element blend quarter-circle-bottom-left color-2"></div>
      <div class="element quarter-circle-top-right color-2"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>


      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter T">
      <p>T</p>
      <div class="element blend rect-1x5 color-2"></div>
      <div class="element blend rect-3x1"></div>

    </div>
    <div class="letter U">
      <p>U</p>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter V">
      <p>V</p>
      <div class="element rect-1x4 color-2"></div>
      <div class="element blend quarter-circle-top-right"></div>
      <div class="element circle-1x1"></div>
      <div class="element quarter-circle-top-left"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend rect-1x4 color-2"></div>

    </div>
    <div class="letter W">
      <p>W</p>
      <div class="element quarter-circle-top-right"></div>
      <div class="element semi-circle-3x2-top"></div>
      <div class="element quarter-circle-top-left"></div>
      <div class="element blend rect-1x4 color-2"></div>
      <div class="element blend rect-1x2 color-2"></div>
      <div class="element blend rect-1x4 color-2"></div>

      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter X">
      <p>X</p>
      <div class="element semi-circle-3x2-right"></div>
      <div class="element semi-circle-3x2-left"></div>
      <div class="element blend rect-1x2 color-2"></div>
      <div class="element blend rect-1x2 color-2"></div>
      <div class="element blend rect-1x2 color-2"></div>
      <div class="element blend rect-1x2 color-2"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>

    </div>
    <div class="letter Y">
      <p>Y</p>
      <div class="element blend rect-1x25 color-2"></div>
      <div class="element blend rect-1x25 color-2"></div>
      <div class="element blend semi-circle-3x2-bottom"></div>
      <div class="element circle-1x1"></div>
      <div class="element blend rect-1x25 color-2"></div>

    </div>
    <div class="letter Z">
      <p>Z</p>
      <div class="element rect-2x1 color-2"></div>
      <div class="element rect-2x1"></div>
      <div class="element blend semi-circle-3x2-right"></div>
      <div class="element blend semi-circle-3x2-left color-2"></div>
      <div class="element circle-1x1"></div>
      <div class="element circle-1x1"></div>
    </div>

  </section>
</div>

/*
Project Name: Feeze
Description: Pure CSS font #5
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: 20px;
  /**/
  background: #009DE0;
  /**/
  font-family: helvetica, arial, sans-serif;
  text-align: center;
}

.wrapper {
  position: relative;
  margin: 5% auto;
  width: 80%;
  padding: 5%;
  background: #FFF;
  /* magenta */
  color: #E20079;
  overflow: hidden;
  border-radius: 0.5em;
  border: 0.5em solid white;
}

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: 15px;
  display: inline-block;
  display: block;
  padding: 0.5em 0 0;
}


/* WRAPPER DECO */
.wrapper::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5em;
  border-radius: 0.25em;
  background: currentColor;
}
.wrapper::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0.5em;
  border-radius: 0.25em;
  background: currentColor;
  mix-blend-mode: multiply;
}
section::before {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 100%;
  top: 0;
  left: 0;
  border-radius: 0.25em;
  background: #009DE0;
  mix-blend-mode: multiply;
}
section::after {
  content: "";
  position: absolute;
  width: 0.5em;
  height: 100%;
  top: 0;
  right: 0;
  border-radius: 0.25em;
  background: #009DE0;
  mix-blend-mode: multiply;
}

/* LETTERS SPEC.
-------------------------------------------------- */
.letter {
  width: 3em; /* 3 x body font-size */
  height: 5em; /* 7 x body font-size */
  margin: 2em 1em;
  margin: 1em 0.5em;
  position: relative;
  display: inline-block;
}
.letter.M, .letter.W {
  width: 5em;
}
.letter.D, .letter.B, .letter.P, .letter.R, .letter.K {
  width: 3.5em;
}
.letter.I {
  width: 1em;
}
header .letter {
  margin: 1em 0.25em;
}

.letter p {
  display: none;
}

/* ELEMENTS BASE
-------------------------------------------------- */
.element {
  margin: 0;
  position: absolute;
  border:none;
  /* DEFINE PRIMARY COLOR - Magenta */
  background: currentColor;
  border-radius: 0.5em;
}

.blend {
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
}

.element.color-2, .element.color-2::after, .element.color-2::before {
  /* DEFINE 2nd COLOR - cyan */
  background: #009DE0;
}

/* semi-CIRCLE
-------------------------------------------------- */
.semi-circle-3x2-top {
  width: 3em;
  height: 1.5em;
  border-radius: 1.5em 1.5em 0em 0em;
}
.semi-circle-3x2-top::before {
  content: "";
  position: absolute;
  top: 1.5em;
  left: 0;
  width: 1em;
  height: 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  background: currentColor;
}
.semi-circle-3x2-top::after {
  content: "";
  position: absolute;
  top: 1.5em;
  left: 2em;
  width: 1em;
  height: 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  background: currentColor;
}

.semi-circle-3x2-right {
  width: 1.5em;
  height: 3em;
  border-radius: 0em 1.5em 1.5em  0em;
}

.semi-circle-3x2-right::before {
  content: "";
  position: absolute;
  top: 0em;
  left: -0.5em;
  width: 0.5em;
  height: 1em;
  border-radius: 0.5em 0 0 0.5em;
  background: currentColor;
}

.semi-circle-3x2-right::after {
  content: "";
  position: absolute;
  top: 2em;
  left: -0.5em;
  width: 0.5em;
  height: 1em;
  border-radius: 0.5em 0 0 0.5em;
  background: currentColor;
}

.semi-circle-3x2-bottom {
  width: 3em;
  height: 1.5em;
  border-radius: 0em 0em 1.5em 1.5em ;
}

.semi-circle-3x2-bottom::before, .semi-circle-3x2-bottom::after {
  content: "";
  position: absolute;
  width: 1em;
  height: 0.5em;
  border-radius: 0.5em 0.5em 0 0 ;
  background: currentColor;
}

.semi-circle-3x2-bottom::before {
  top: -0.5em;
  left: 0;
}

.semi-circle-3x2-bottom::after {
  top: -0.5em;
  left: 2em;
}

.semi-circle-3x2-left {
  width: 1.5em;
  height: 3em;
  border-radius:  1.5em 0 0 1.5em;
}

.semi-circle-3x2-left::before {
  content: "";
  position: absolute;
  top: 0em;
  left: 1.5em;
  width: 0.5em;
  height: 1em;
  border-radius: 0 0.5em 0.5em 0;
  background: currentColor;
}

.semi-circle-3x2-left::after {
  content: "";
  position: absolute;
  top: 2em;
  left: 1.5em;
  width: 0.5em;
  height: 1em;
  border-radius: 0 0.5em 0.5em 0;
  background: currentColor;
}

/* quarter-CIRCLE
-------------------------------------------------- */
.quarter-circle-top-right {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0 1.5em 0 0;
}

.quarter-circle-top-right::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 0.5em;
  height: 1em;
  border-radius: 0.5em 0 0 0.5em;
  top: 0;
  left: -0.5em;
}

.quarter-circle-top-right::after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 1em;
  height: 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  top: 1.5em;
  left: 0.5em
}

.quarter-circle-bottom-right {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0 0 1.5em 0;
}

.quarter-circle-bottom-right::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 0.5em;
  height: 1em;
  border-radius: 0.5em 0 0 0.5em;
  top: 0.5em;
  left: -0.5em;
}

.quarter-circle-bottom-right::after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 1em;
  height: 0.5em;
  border-radius: 0.5em 0.5em 0 0;
  top: -0.5em;
  left: 0.5em
}

.quarter-circle-bottom-left {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0 0 0 1.5em;
}

.quarter-circle-bottom-left::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 0.5em;
  height: 1em;
  border-radius: 0 0.5em 0.5em 0;
  top: 0.5em;
  left: 1.5em;
}

.quarter-circle-bottom-left::after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 1em;
  height: 0.5em;
  border-radius: 0.5em 0.5em 0 0;
  top: -0.5em;
  left: 0em
}

.quarter-circle-top-left {
  width: 1.5em;
  height: 1.5em;
  border-radius: 1.5em 0 0 0;
}

.quarter-circle-top-left::before {
  content: "";
  position: absolute;
  background: currentColor;
  width: 0.5em;
  height: 1em;
  border-radius: 0 0.5em 0.5em 0;
  top: 0em;
  left: 1.5em;
}

.quarter-circle-top-left::after {
  content: "";
  position: absolute;
  background: currentColor;
  width: 1em;
  height: 0.5em;
  border-radius: 0 0 0.5em 0.5em;
  top: 1.5em;
  left: 0em
}

/* CIRCLE
-------------------------------------------------- */
.circle-1x1 {
  width: 1em;
  height: 1em;
  color: white;
}


/* RECT - hori
-------------------------------------------------- */
.rect-3x1 {
  width: 3em;
  height: 1em;
}
.rect-2x1 {
  width: 2em;
  height: 1em;
}
.rect-25x1 {
  width: 2.5em;
  height: 1em;
}
.rect-15x1 {
  width: 1.5em;
  height: 1em;
}

/* RECT - vert
-------------------------------------------------- */
.rect-1x5 {
  width: 1em;
  height: 5em;
}
.rect-1x4 {
  width: 1em;
  height: 4em;
}
.rect-1x3 {
  width: 1em;
  height: 3em;
}
.rect-1x25 {
  width: 1em;
  height: 2.5em;
}
.rect-1x2 {
  width: 1em;
  height: 2em;
}
.rect-1x15 {
  width: 1em;
  height: 1.5em;
}

/* A
-------------------------------------------------- */
.letter.A :nth-child(2){
  top: 2.5em;
  left: 0;
}
.letter.A :nth-child(3){
  top: 1em;
  left: 0;
}
.letter.A :nth-child(4){
  top: 1em;
  left: 2em;
}
.letter.A :nth-child(5){
  top: 0;
  left: 0;
}
.letter.A :nth-child(6){
  top: 1em;
  left: 1em;
}

/* B
-------------------------------------------------- */
.letter.B :nth-child(2){
  top: 1.5em;
  left: 2em;
}
.letter.B :nth-child(3){
  top: 2em;
  left: 2em;
}
.letter.B :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.B :nth-child(5){
  top: 0em;
  left: 2em;
}
.letter.B :nth-child(6){
  top: 3.5em;
  left: 2em;
}
.letter.B :nth-child(7){
  top: 0em;
  left: 0em;
}
.letter.B :nth-child(8){
  top: 4em;
  left: 0em;
}
.letter.B :nth-child(9){
  top: 0em;
  left: 0em;
}
.letter.B :nth-child(10){
  top: 1em;
  left: 1.5em;
}
.letter.B :nth-child(11){
  top: 3em;
  left: 1.5em;
}

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

/* D
-------------------------------------------------- */
.letter.D :nth-child(2){
  top: 0;
  left: 0;
}
.letter.D :nth-child(3){
  top: 0em;
  left: 0em;
}
.letter.D :nth-child(4){
  top: 4em;
  left: 0em;
}
.letter.D :nth-child(5){
  top: 0;
  left: 2em;
}
.letter.D :nth-child(6){
  top: 3.5em;
  left: 2em;
}
.letter.D :nth-child(7){
  top: 1em;
  left: 2.5em;
}
.letter.D :nth-child(8){
  top: 1em;
  left: 1.5em;
}
.letter.D :nth-child(9){
  top: 3em;
  left: 1.5em;
}

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

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

/* G
-------------------------------------------------- */
.letter.G :nth-child(2){
  top: 1em;
  left: 0;
}
.letter.G :nth-child(3){
  top: 0;
  left: 0;
}
.letter.G :nth-child(4){
  top: 1em;
  left: 1em;
}
.letter.G :nth-child(5){
  top: 3.5em;
  left: 0em;
}
.letter.G :nth-child(6){
  top: 3em;
  left: 1em;
}
.letter.G :nth-child(7){
  top: 2.5em;
  left: 2em;
}
.letter.G :nth-child(8){
  top: 2.5em;
  left: 1.5em;
}

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

/* I
-------------------------------------------------- */
.letter.I :nth-child(2){
  top: 0em;
  left: 0em;
}

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

/* K
-------------------------------------------------- */
.letter.K :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.K :nth-child(3){
  top: 2em;
  left: 0em;
}
.letter.K :nth-child(4){
  top: 2em;
  left: 2em;
}
.letter.K :nth-child(5){
  top: 3em;
  left: 2.5em;
}
.letter.K :nth-child(5){
  top: 3em;
  left: 2.5em;
}
.letter.K :nth-child(6){
  top: 1.5em;
  left: 2em;
}
.letter.K :nth-child(7){
  top: 0em;
  left: 2.5em;
}
.letter.K :nth-child(8){
  top: 1em;
  left: 1.5em;
}
.letter.K :nth-child(9){
  top: 3em;
  left: 1.5em;
}

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

/* M
-------------------------------------------------- */
.letter.M :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.M :nth-child(3){
  top: 0em;
  left: 2em;
}
.letter.M :nth-child(4){
  top: 1em;
  left: 1em;
}
.letter.M :nth-child(5){
  top: 1em;
  left: 3em;
}
.letter.M :nth-child(6){
  top: 0em;
  left: 0em;
}
.letter.M :nth-child(7){
  top: 1em;
  left: 2em;
}
.letter.M :nth-child(8){
  top: 1em;
  left: 4em;
}

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

/* O
-------------------------------------------------- */
.letter.O :nth-child(2){
  top: 1em;
  left: 0;
}
.letter.O :nth-child(3){
  top: 0;
  left: 0;
}
.letter.O :nth-child(4){
  top: 1em;
  left: 1em;
}
.letter.O :nth-child(5){
  top: 3.5em;
  left: 0em;
}
.letter.O :nth-child(6){
  top: 3em;
  left: 1em;
}
.letter.O :nth-child(7){
  top: 1em;
  left: 2em;
}

/* P
-------------------------------------------------- */
.letter.P :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.P :nth-child(3){
  top: 0em;
  left: 2em;
}
.letter.P :nth-child(4){
  top: 1em;
  left: 1.5em;
}
.letter.P :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.P :nth-child(6){
  top: 2em;
  left: 0em;
}

/* Q
-------------------------------------------------- */
.letter.Q :nth-child(2){
  top: 1em;
  left: 0;
}
.letter.Q :nth-child(3){
  top: 0;
  left: 0;
}
.letter.Q :nth-child(4){
  top: 1em;
  left: 1em;
}
.letter.Q :nth-child(5){
  top: 3.5em;
  left: 0em;
}
.letter.Q :nth-child(6){
  top: 3em;
  left: 1em;
}
.letter.Q :nth-child(7){
  top: 1em;
  left: 2em;
}
.letter.Q :nth-child(8){
  top: 4em;
  left: 1em;
}

/* R
-------------------------------------------------- */
.letter.R :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.R :nth-child(3){
  top: 0em;
  left: 0em;
}
.letter.R :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.R :nth-child(5){
  top: 2em;
  left: 2em;
}
.letter.R :nth-child(6){
  top: 3em;
  left: 1.5em;
}
.letter.R :nth-child(7){
  top: 3em;
  left: 2.5em;
}
.letter.R :nth-child(8){
  top: 0em;
  left: 2em;
}
.letter.R :nth-child(9){
  top: 1em;
  left: 1.5em;
}

/* S
-------------------------------------------------- */
.letter.S :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.S :nth-child(3){
  top: 1.5em;
  left: 0em;
}
.letter.S :nth-child(4){
  top: 2em;
  left: 1.5em;
}
.letter.S :nth-child(5){
  top: 3.5em;
  left: 0em;
}
.letter.S :nth-child(6){
  top: 1em;
  left: 1em;
}
.letter.S :nth-child(7){
  top: 3em;
  left: 1em;
}

/* T
-------------------------------------------------- */
.letter.T :nth-child(2){
  top: 0em;
  left: 1em;
}
.letter.T :nth-child(3){
  top: 0em;
  left: 0em;
}

/* U
-------------------------------------------------- */
.letter.U :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.U :nth-child(3){
  top: 0em;
  left: 2em;
}
.letter.U :nth-child(4){
  top: 3.5em;
  left: 0em;
}
.letter.U :nth-child(5){
  top: 3em;
  left: 1em;
}

/* V
-------------------------------------------------- */
.letter.V :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.V :nth-child(3){
  top: 3em;
  left: 0.5em;
}
.letter.V :nth-child(4){
  top: 4em;
  left: 0em;
}
.letter.V :nth-child(5){
  top: 3em;
  left: 1em;
}
.letter.V :nth-child(6){
  top: 4em;
  left: 2em;
}
.letter.V :nth-child(7){
  top: 0em;
  left: 2em;
}

/* W
-------------------------------------------------- */
.letter.W :nth-child(2){
  top: 3em;
  left: 0.5em;
}
.letter.W :nth-child(3){
  top: 3em;
  left: 1em;
}
.letter.W :nth-child(4){
  top: 3em;
  left: 3em;
}
.letter.W :nth-child(5){
  top: 0em;
  left: 0em;
}
.letter.W :nth-child(6){
  top: 2em;
  left: 2em;
}
.letter.W :nth-child(7){
  top: 0em;
  left: 4em;
}
.letter.W :nth-child(8){
  top: 4em;
  left: 0em;
}
.letter.W :nth-child(9){
  top: 4em;
  left: 2em;
}
.letter.W :nth-child(10){
  top: 4em;
  left: 4em;
}

/* X
-------------------------------------------------- */
.letter.X :nth-child(2){
  top: 1em;
  left: 0.5em;
}
.letter.X :nth-child(3){
  top: 1em;
  left: 1em;
}
.letter.X :nth-child(4){
  top: 0em;
  left: 0em;
}
.letter.X :nth-child(5){
  top: 0em;
  left: 2em;
}
.letter.X :nth-child(6){
  top: 3em;
  left: 0em;
}
.letter.X :nth-child(7){
  top: 3em;
  left: 2em;
}
.letter.X :nth-child(8){
  top: 2em;
  left: 0em;
}
.letter.X :nth-child(9){
  top: 2em;
  left: 2em;
}

/* Y
-------------------------------------------------- */
.letter.Y :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.Y :nth-child(3){
  top: 0em;
  left: 2em;
}
.letter.Y :nth-child(4){
  top: 2em;
  left: 0em;
}
.letter.Y :nth-child(5){
  top: 1.5em;
  left: 1em;
}
.letter.Y :nth-child(6){
  top: 2.5em;
  left: 1em;
}

/* Z
-------------------------------------------------- */
.letter.Z :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.Z :nth-child(3){
  top: 4em;
  left: 1em;
}
.letter.Z :nth-child(4){
  top: 0em;
  left: 1.5em;
}
.letter.Z :nth-child(5){
  top: 2em;
  left: 0em;
}
.letter.Z :nth-child(6){
  top: 1em;
  left: 1em;
}
.letter.Z :nth-child(7){
  top: 3em;
  left: 1em;
}

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.