CodePen Embed - Pure CSS font #6

<div class="wrapper">
  <header>
    <h1 title="untitled" >
      <div class="word">

        <div class="letter U">
          <p>U</p>
          <div class="element rect-corner-bottom-left"></div>
          <div class="element rect"></div>
        </div>

        <div class="letter N">
          <p>N</p>
          <div class="element rect"></div>
          <div class="element rect-corner-top-right"></div>
        </div>

        <div class="letter T">
          <p>T</p>
          <div class="element corner-bottom-right"></div>
          <div class="element rect"></div>
          <div class="element corner-bottom-left"></div>
        </div>

        <div class="letter I">
          <p>I</p>
          <div class="element rect"></div>
        </div>

        <div class="letter T">
          <p>T</p>
          <div class="element corner-bottom-right"></div>
          <div class="element rect"></div>
          <div class="element corner-bottom-left"></div>
        </div>

        <div class="letter L">
          <p>L</p>
          <div class="element rect"></div>
          <div class="element corner-top-left"></div>
        </div>

        <div class="letter E">
          <p>E</p>
          <div class="element rect"></div>
          <div class="element corner-bottom-left"></div>
          <div class="element corner-top-left"></div>
          <div class="element circle"></div>
        </div>

        <div class="letter D">
          <p>D</p>
          <div class="element rect"></div>
          <div class="element rect-corner-right"></div>
        </div>

      </div>
    </h1>
  </header>
  <section class="container">

    <div class="letter A">
      <p>A</p>
      <div class="element rect-corner-top-left"></div>
      <div class="element rect-corner-top-right"></div>
    </div>

    <div class="letter B">
      <p>B</p>
      <div class="element rect"></div>
      <div class="element semi-circle-right"></div>
      <div class="element semi-circle-right"></div>
    </div>

    <div class="letter C">
      <p>C</p>
      <div class="element rect-corner-left"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element corner-top-left"></div>
    </div>

    <div class="letter D">
      <p>D</p>
      <div class="element rect"></div>
      <div class="element rect-corner-right"></div>
    </div>

    <div class="letter E">
      <p>E</p>
      <div class="element rect"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element corner-top-left"></div>
      <div class="element circle"></div>
    </div>

    <div class="letter F">
      <p>F</p>
      <div class="element rect"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element circle"></div>
    </div>

    <div class="letter G">
      <p>G</p>
      <div class="element rect-corner-left"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element rect-corner-top-left-bottom-right-20-43"></div>
    </div>

    <div class="letter H">
      <p>H</p>
      <div class="element rect"></div>
      <div class="element rect"></div>
    </div>

    <div class="letter I">
      <p>I</p>
      <div class="element rect"></div>
    </div>

    <div class="letter J">
      <p>J</p>
      <div class="element circle"></div>
      <div class="element rect-corner-bottom-right"></div>
    </div>

    <div class="letter K">
      <p>K</p>
      <div class="element rect"></div>
      <div class="element rect-corner-left"></div>
    </div>

    <div class="letter L">
      <p>L</p>
      <div class="element rect"></div>
      <div class="element corner-top-left"></div>
    </div>

    <div class="letter M">
      <p>M</p>
      <div class="element rect"></div>
      <div class="element rect-corner-top-right"></div>
      <div class="element rect-corner-top-right"></div>
    </div>

    <div class="letter N">
      <p>N</p>
      <div class="element rect"></div>
      <div class="element rect-corner-top-right"></div>
    </div>

    <div class="letter O">
      <p>O</p>
      <div class="element rect-corner-left"></div>
      <div class="element rect-corner-right"></div>
    </div>

    <div class="letter P">
      <p>P</p>
      <div class="element rect"></div>
      <div class="element semi-circle-right"></div>
    </div>

    <div class="letter Q">
      <p>Q</p>
      <div class="element semi-circle-left"></div>
      <div class="element rect-corner-left"></div>
      <div class="element rect-corner-right"></div>
    </div>

    <div class="letter R">
      <p>R</p>
      <div class="element rect"></div>
      <div class="element semi-circle-right"></div>
      <div class="element corner-top-right"></div>
    </div>

    <div class="letter S">
      <p>S</p>
      <div class="element semi-circle-left"></div>
      <div class="element semi-circle-right"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element corner-top-right"></div>
    </div>

    <div class="letter T">
      <p>T</p>
      <div class="element corner-bottom-right"></div>
      <div class="element rect"></div>
      <div class="element corner-bottom-left"></div>
    </div>

    <div class="letter U">
      <p>U</p>
      <div class="element rect-corner-bottom-left"></div>
      <div class="element rect"></div>
    </div>

    <div class="letter V">
      <p>V</p>
      <div class="element rect-corner-top-right-bottom-left-20-66"></div>
      <div class="element rect-corner-top-left-bottom-right-20-66"></div>
    </div>

    <div class="letter W">
      <p>W</p>
      <div class="element rect-corner-bottom-left"></div>
      <div class="element rect-corner-bottom-left"></div>
      <div class="element rect"></div>
    </div>

    <div class="letter X">
      <p>X</p>
      <div class="element rect-corner-right"></div>
      <div class="element rect-corner-left"></div>
    </div>

    <div class="letter Y">
      <p>Y</p>
      <div class="element rect-corner-bottom-left-20-43"></div>
      <div class="element circle"></div>
      <div class="element rect-corner-bottom-right"></div>
    </div>

    <div class="letter Z">
      <p>Z</p>
      <div class="element corner-bottom-right"></div>
      <div class="element rect-corner-bottom-right-20-43"></div>
      <div class="element rect-corner-top-left-20-43"></div>
      <div class="element corner-top-left"></div>
    </div>

    <div class="letter n0">
      <p>0</p>
      <div class="element rect-corner-left"></div>
      <div class="element rect-corner-right"></div>
    </div>

    <div class="letter n1">
      <p>1</p>
      <div class="element circle"></div>
      <div class="element rect"></div>
    </div>

    <div class="letter n2">
      <p>2</p>
      <div class="element circle"></div>
      <div class="element semi-circle-right"></div>
      <div class="element corner-top-left"></div>
      <div class="element rect-43-20"></div>
    </div>

    <div class="letter n3">
      <p>3</p>
      <div class="element corner-bottom-right"></div>
      <div class="element rect-corner-right"></div>
      <div class="element circle"></div>
      <div class="element corner-top-right"></div>
    </div>

    <div class="letter n4">
      <p>4</p>
      <div class="element rect-corner-bottom-left-20-43"></div>
      <div class="element rect"></div>
    </div>

    <div class="letter n5">
      <p>5</p>
      <div class="element rect-43-20"></div>
      <div class="element corner-bottom-left"></div>
      <div class="element semi-circle-right"></div>
      <div class="element circle"></div>
    </div>

    <div class="letter n6">
      <p>6</p>
      <div class="element rect-corner-left"></div>
      <div class="element circle"></div>
      <div class="element semi-circle-right"></div>
    </div>

    <div class="letter n7">
      <p>7</p>
      <div class="element corner-bottom-right"></div>
      <div class="element rect-corner-bottom-right-20-43"></div>
      <div class="element rect-corner-top-left-20-43"></div>
    </div>

    <div class="letter n8">
      <p>8</p>
      <div class="element semi-circle-left"></div>
      <div class="element semi-circle-right"></div>
      <div class="element semi-circle-left"></div>
      <div class="element semi-circle-right"></div>
    </div>

    <div class="letter n9">
      <p>9</p>
      <div class="element semi-circle-left"></div>
      <div class="element rect-corner-right"></div>
      <div class="element circle"></div>
    </div>

  </section>
</div>

/*
Project Name: untitled
Description: Pure CSS font #6 - This project is based on the typographic project "Enso" by Tamer Koseli (http://cargocollective.com/tamerkoseli/Enso-Typeface - http://tamerkoseli.com/) - http://luc.devroye.org/fonts-32493.html
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: #000;
  font-family: helvetica, arial, sans-serif;
  text-align: center;
}

/* WRAPPER DECO */
.wrapper {
  position: relative;
  margin: 5% auto;
  width: 80%;
  padding: 5%;
  background: #000;
  overflow: hidden;
}
.wrapper::before {
  content: '';
}
.wrapper::after {
  content: '';
}
.container::before {
  content: '';
}
.container::after {
  content: '';
}

header, .container, footer {
  margin: 0 auto;
  width: 100%;
}
header {
  padding: 0 0 3em 0;
}
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.word {
  font-size: 10px;
  display: inline-block;
}

/* LETTERS SPEC.
-------------------------------------------------- */
.letter {
  width: 4.3em; /* 43px = body font size 10px * 4.3 */
  height: 6.6em; /* 66px =  body font size 10px * 6.6 */
  margin: 2em 0.5em ;
  position: relative;
  display: inline-block;
  overflow: hidden;
}
/*.letter:hover {
  cursor: pointer;
  background: grey;
}*/
.word .letter {
  margin: 1em 0.5em;
}
.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: black;
}
.element.color-2 {
  /* DEFINE 2nd COLOR */
  background: #FCEE21;
}

/* RECTANGLE 20x66
-------------------------------------------------- */
.rect {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
}

/* RECTANGLE 43x20
-------------------------------------------------- */
.rect-43-20 {
  width: 4.3em; /* 20 px = body font size 10px x 2 */
  height: 2em;
}

/* RECTANGLE-CORNER 20x66
-------------------------------------------------- */
.rect-corner-top-left {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 2em 0 0 0;
}
.rect-corner-top-right {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 0 2em 0 0;
}
.rect-corner-bottom-right {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 0 0 2em 0;
}
.rect-corner-bottom-left {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 0 0 0 2em;
}
.rect-corner-left {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 2em 0 0 2em;
}
.rect-corner-right {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 0 2em 2em 0;
}
.rect-corner-top-right-bottom-left-20-66 {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 0 2em 0 2em;
}
.rect-corner-top-left-bottom-right-20-66 {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 6.6em;
  border-radius: 2em 0 2em 0;
}



/* RECTANGLE-CORNER 20x43
-------------------------------------------------- */
.rect-corner-top-left-bottom-right-20-43 {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 4.3em;
  border-radius: 2em 0 2em 0;
}

.rect-corner-bottom-left-20-43 {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 4.3em;
  border-radius: 0 0 0 2em;
}
.rect-corner-bottom-right-20-43 {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 4.3em;
  border-radius: 0 0 2em 0;
}
.rect-corner-top-left-20-43 {
  width: 2em; /* 20 px = body font size 10px x 2 */
  height: 4.3em;
  border-radius: 2em 0 0 0;
}


/* CIRCLES 20x20
-------------------------------------------------- */
.circle {
    width: 2em;
    height: 2em;
    border-radius: 2em;
}

/* SEMI-CIRCLES 20x43
-------------------------------------------------- */
.semi-circle-right {
    width: 2em;
    height: 4.3em;
    border-radius: 0 2.15em 2.15em 0;
}
.semi-circle-left {
    width: 2em;
    height: 4.3em;
    border-radius: 2.15em 0 0 2.15em;
}

/* CORNER
-------------------------------------------------- */
.corner-bottom-left {
  width: 2em;
  height: 2em;
  border-radius: 0 0 0 2em;
}
.corner-top-left {
  width: 2em;
  height: 2em;
  border-radius: 2em 0 0 0;
}
.corner-top-right {
  width: 2em;
  height: 2em;
  border-radius: 0 2em 0 0;
}
.corner-bottom-right {
  width: 2em;
  height: 2em;
  border-radius: 0 0 2em 0 ;
}

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

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

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

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

/* Colors
-------------------------------------------------- */
/*pink*/
.letter.n3 :nth-child(2), .letter.n3 :nth-child(3), .letter.n3 :nth-child(4), .letter.n3 :nth-child(5), 
.letter.n8 :nth-child(2), .letter.n8 :nth-child(3), .letter.n8 :nth-child(4), .letter.n8 :nth-child(5), 
.letter.E :nth-child(2), .letter.E :nth-child(3), .letter.E :nth-child(4), .letter.E :nth-child(5), 
.letter.J :nth-child(2), .letter.J :nth-child(3), 
.letter.O :nth-child(2), .letter.O :nth-child(3),
.letter.T :nth-child(2), .letter.T :nth-child(3), .letter.T :nth-child(4), 
.letter.Y :nth-child(2), .letter.Y :nth-child(3), .letter.Y :nth-child(4) {
  background: #ffa29d;
}
/*green*/
.letter.n0 :nth-child(2), .letter.n0 :nth-child(3),
.letter.n5 :nth-child(2), .letter.n5 :nth-child(3), .letter.n5 :nth-child(4), .letter.n5 :nth-child(5), 
.letter.B :nth-child(2), .letter.B :nth-child(3), .letter.B :nth-child(4), 
.letter.Q :nth-child(3), .letter.Q :nth-child(4), 
.letter.G :nth-child(2), .letter.G :nth-child(3), .letter.G :nth-child(4), 
.letter.L :nth-child(2), .letter.L :nth-child(3), 
.letter.V :nth-child(2), .letter.V :nth-child(3) {
  background: #c2ffa9;
}
/*yellow*/
.letter.n2 :nth-child(2), .letter.n2 :nth-child(3), .letter.n2 :nth-child(4), .letter.n2 :nth-child(5), 
.letter.n7 :nth-child(2), .letter.n7 :nth-child(3), .letter.n7 :nth-child(4), 
.letter.D :nth-child(2), .letter.D :nth-child(3), 
.letter.I :nth-child(2), 
.letter.N :nth-child(2), .letter.N :nth-child(3), 
.letter.X :nth-child(2), .letter.X :nth-child(3), 
.letter.S :nth-child(2), .letter.S :nth-child(3), .letter.S :nth-child(4), .letter.S :nth-child(5) {
  background: #f2ff77;
}
/*blue*/
.letter.n4 :nth-child(2), .letter.n4 :nth-child(3), 
.letter.n9 :nth-child(2), .letter.n9 :nth-child(3), .letter.n9 :nth-child(4), 
.letter.A :nth-child(2), .letter.A :nth-child(3), 
.letter.P :nth-child(2), .letter.P :nth-child(3), 
.letter.F :nth-child(2), .letter.F :nth-child(3), .letter.F :nth-child(4), 
.letter.K :nth-child(2), .letter.K :nth-child(3), 
.letter.U :nth-child(2), .letter.U :nth-child(3), 
.letter.Z :nth-child(2), .letter.Z :nth-child(3), .letter.Z :nth-child(4), .letter.Z :nth-child(5) {
  background: #84f1ff;
}
/*purple*/
.letter.n1 :nth-child(2), .letter.n1 :nth-child(3), 
.letter.n6 :nth-child(2), .letter.n6 :nth-child(3), .letter.n6 :nth-child(4), 
.letter.C :nth-child(2), .letter.C :nth-child(3), .letter.C :nth-child(4), 
.letter.R :nth-child(2), .letter.R :nth-child(3), .letter.R :nth-child(4), 
.letter.H :nth-child(2), .letter.H :nth-child(3), 
.letter.M :nth-child(2), .letter.M :nth-child(3), .letter.M :nth-child(4), 
.letter.W :nth-child(2), .letter.W :nth-child(3), .letter.W :nth-child(4) {
  background: #9b66b3;
}

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

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

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

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

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

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

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

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

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

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

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


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

/* M
-------------------------------------------------- */
.letter.M {
  width: 6.6em;
}
.letter.M :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.M :nth-child(3){
  top: 0em;
  left: 2.3em;
}
.letter.M :nth-child(4){
  top: 0em;
  left: 4.6em;
}

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

/* O & 0
-------------------------------------------------- */
.letter.O :nth-child(2), .letter.n0 :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.O :nth-child(3), .letter.n0 :nth-child(3){
  top: 0em;
  right: 0em;
}

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

/* Q
-------------------------------------------------- */
.letter.Q :nth-child(2){
  border: 0.5em solid #c2ffa9;
  bottom: 0em;
  right: -0.5em;
}
.letter.Q :nth-child(3){
  top: 0em;
  left: 0em;
}
.letter.Q :nth-child(4){
  top: 0em;
  right: 0em;
}

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

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

/* T
-------------------------------------------------- */
.letter.T {
  width: 6.6em;
}
.letter.T :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.T :nth-child(3){
  top: 0em;
  left: 2.3em;
}
.letter.T :nth-child(4){
  top: 0em;
  right: 0em;
}

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

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

/* W
-------------------------------------------------- */
.letter.W {
  width: 6.6em;
}
.letter.W :nth-child(2){
  top: 0em;
  left: 0em;
}
.letter.W :nth-child(3){
  top: 0em;
  left: 2.3em;
}
.letter.W :nth-child(4){
  top: 0em;
  right: 0em;
}

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

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

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

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

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

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

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

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

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

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

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

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

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.