<div class="wrapper">
<header>
<h1 class="symbol" title="symbol" >
<div class="word">
<div class="letter S">
<p>S</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left "></div>
<div class="element line "></div>
<div class="element line "></div>
<div class="element line "></div>
</div>
<div class="letter Y">
<p>Y</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter M">
<p>M</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter B">
<p>B</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element line"></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter O">
<p>O</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element line vertical"></div>
</div>
<div class="letter L">
<p>L</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element line vertical"></div>
<div class="element line"></div>
</div>
</div>
</h1>
</header>
<section class="container">
<div class="letter A">
<p>A</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element line"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
</div>
<div class="letter B">
<p>B</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element line"></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter C">
<p>C</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter D">
<p>D</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element line vertical"></div>
<div class="element line"></div>
</div>
<div class="letter E">
<p>E</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter F">
<p>F</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle top"></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left"></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter G">
<p>G</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element line"></div>
<div class="element line vertical"></div>
</div>
<div class="letter H">
<p>H</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter I">
<p>I</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter J">
<p>J</p>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
</div>
<div class="letter K">
<p>K</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle bottom"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter L">
<p>L</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element line vertical"></div>
<div class="element line"></div>
</div>
<div class="letter M">
<p>M</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter N">
<p>N</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter O">
<p>O</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element line vertical"></div>
</div>
<div class="letter P">
<p>P</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter Q">
<p>Q</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle right "></div>
<div class="element line"></div>
</div>
<div class="letter R">
<p>R</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
<div class="element line"></div>
<div class="element line"></div>
</div>
<div class="letter S">
<p>S</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left "></div>
<div class="element line "></div>
<div class="element line "></div>
<div class="element line "></div>
</div>
<div class="letter T">
<p>T</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle bottom "></div>
<div class="element line"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter U">
<p>U</p>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter V">
<p>V</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<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 class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle bottom "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter W">
<p>W</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle right"></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter X">
<p>X</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<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 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 class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter Y">
<p>Y</p>
<div class="element semi-circle top "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
<div class="element line vertical"></div>
</div>
<div class="letter Z">
<p>Z</p>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle top "></div>
<div class="element semi-circle bottom "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle right "></div>
<div class="element semi-circle left "></div>
<div class="element semi-circle left "></div>
<div class="element line "></div>
<div class="element line "></div>
<div class="element line "></div>
</div>
</section>
</div>/*
Project Name: Symbol
Description: Pure CSS font #3
Author: @c4rin3
Author URI: http://c4rin3.vituelles.fr
*/
*, *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-size: 3px;
color: white;
margin: 0;
background: #1A1A1A;
font-family: helvetica, arial, sans-serif;
text-align: center;
}
h2, p, h1 {
letter-spacing: 1px;
font-weight: 300;
line-height: 1.5;
text-transform: uppercase;
}
h1 { font-size: 3px; }
p { font-size: 14px; }
.wrapper {
width: 80%;
margin: 20em auto ;
padding: 5%;
border-top: 0.8em solid white;
border-bottom: 0.8em solid white;
border-right: 0.8em solid yellow;
border-left: 0.8em solid yellow;
}
header, section {
margin: 0 auto;
}
header {
/* border-bottom: 1px solid;*/
padding-bottom: 20em;
}
/* ELEMENTS
-------------------------------------------------- */
.element {
width:6em;
height:6em;
position: relative;
margin: 3em;
/*border:1em solid ;*/
display: inline-block;
}
/* SEMI-CIRCLE STROKE
-------------------------------------------------- */
.element.semi-circle:after {
content:"";
position: absolute;
border: 0.8em solid;
background: none;
}
/* -- SEMI-CIRCLE PLAIN -- */
.semi-circle.plain:after {
background: white;
}
.semi-circle.top:after , .semi-circle.bottom:after {
width:100%;
height: 50%;
}
.semi-circle.top:after {
border-radius: 50% / 100% 100% 0 0;
border-bottom: none;
left: 0;
}
.semi-circle.bottom:after {
border-radius: 50% / 0 0 100% 100%;
border-top: none;
bottom: 0;
left: 0;
}
.semi-circle.left:after , .semi-circle.right:after {
width:50%;
height: 100%;
}
.semi-circle.left:after {
border-radius: 200% 0 0 200% / 100% 0 0 100%;
border-right: none;
left:0;
}
.semi-circle.right:after {
border-radius: 0 200% 200% 0 / 0 100% 100% 0;
border-left: none;
right: 0;
}
/* Lines
-------------------------------------------------- */
.element.line {
height:0;
}
.element.line:after {
content:"";
position: absolute;
border-top: 0.4em solid;
width:100%;
top:0;
left: 0;
}
/* line vertical */
.element.line.vertical {
width:0;
}
.line.vertical:after {
content:"";
position: absolute;
border-top: none;
border-left: 0.4em solid;
height:100%;
top:0;
left: 0;
}
/* ANIMATION
-------------------------------------------------- */
/* ALPHABET */
.letter .element {
transition: all 1s ease-in-out;
}
.letter:hover .element{
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}
.letter:hover .semi-circle{
animation-name: rotation-left;
}
.letter:hover .line{
animation-name: drawline;
}
.letter:hover .line.vertical{
animation-name: drawlinevert;
}
.letter.A:hover :nth-child(3), .letter.A:hover :nth-child(5), .letter.A:hover :nth-child(7), .letter.A:hover :nth-child(8), .letter.A:hover :nth-child(17),
.letter.B:hover :nth-child(3), .letter.B:hover :nth-child(5), .letter.B:hover :nth-child(6), .letter.B:hover :nth-child(7), .letter.B:hover :nth-child(11), .letter.B:hover :nth-child(12),
.letter.C:hover :nth-child(2), .letter.C:hover :nth-child(4), .letter.C:hover :nth-child(6), .letter.C:hover :nth-child(10), .letter.C:hover :nth-child(11),
.letter.D:hover :nth-child(3), .letter.D:hover :nth-child(5), .letter.D:hover :nth-child(7), .letter.D:hover :nth-child(8), .letter.D:hover :nth-child(12),
.letter.E:hover :nth-child(3), .letter.E:hover :nth-child(4), .letter.E:hover :nth-child(5), .letter.E:hover :nth-child(9), .letter.E:hover :nth-child(12), .letter.E:hover :nth-child(13), .letter.E:hover :nth-child(14),
.letter.F:hover :nth-child(2), .letter.F:hover :nth-child(6), .letter.F:hover :nth-child(7), .letter.F:hover :nth-child(9), .letter.F:hover :nth-child(12),
.letter.G:hover :nth-child(2), .letter.G:hover :nth-child(4), .letter.G:hover :nth-child(7),
.letter.H:hover :nth-child(2), .letter.H:hover :nth-child(9), .letter.H:hover :nth-child(5), .letter.H:hover :nth-child(6), .letter.H:hover :nth-child(11), .letter.H:hover :nth-child(12), .letter.H:hover :nth-child(14),
.letter.I:hover :nth-child(2), .letter.I:hover :nth-child(9), .letter.I:hover :nth-child(7), .letter.I:hover :nth-child(6), .letter.I:hover :nth-child(11), .letter.I:hover :nth-child(10), .letter.I:hover :nth-child(14),
.letter.J:hover :nth-child(2), .letter.J:hover :nth-child(4), .letter.J:hover :nth-child(6), .letter.J:hover :nth-child(8),
.letter.K:hover :nth-child(3), .letter.K:hover :nth-child(4), .letter.K:hover :nth-child(5), .letter.K:hover :nth-child(9), .letter.K:hover :nth-child(12), .letter.K:hover :nth-child(13), .letter.K:hover :nth-child(15),
.letter.L:hover :nth-child(3), .letter.L:hover :nth-child(5), .letter.L:hover :nth-child(6), .letter.L:hover :nth-child(9),
.letter.M:hover :nth-child(2), .letter.M:hover :nth-child(9), .letter.M:hover :nth-child(5), .letter.M:hover :nth-child(6), .letter.M:hover :nth-child(11), .letter.M:hover :nth-child(12), .letter.M:hover :nth-child(15),
.letter.N:hover :nth-child(2), .letter.N:hover :nth-child(4), .letter.N:hover :nth-child(9), .letter.N:hover :nth-child(10),
.letter.O:hover :nth-child(2), .letter.O:hover :nth-child(5), .letter.O:hover :nth-child(8),
.letter.P:hover :nth-child(2), .letter.P:hover :nth-child(5), .letter.P:hover :nth-child(6), .letter.P:hover :nth-child(8), .letter.P:hover :nth-child(10),
.letter.Q:hover :nth-child(2), .letter.Q:hover :nth-child(5), .letter.Q:hover :nth-child(8),
.letter.R:hover :nth-child(2), .letter.R:hover :nth-child(5), .letter.R:hover :nth-child(6), .letter.R:hover :nth-child(8), .letter.R:hover :nth-child(10), .letter.R:hover :nth-child(12), .letter.R:hover :nth-child(13),
.letter.S:hover :nth-child(2), .letter.S:hover :nth-child(4), .letter.S:hover :nth-child(9), .letter.S:hover :nth-child(10),
.letter.T:hover :nth-child(2), .letter.T:hover :nth-child(5), .letter.T:hover :nth-child(6), .letter.T:hover :nth-child(8), .letter.T:hover :nth-child(10),
.letter.U:hover :nth-child(2), .letter.U:hover :nth-child(4), .letter.U:hover :nth-child(6), .letter.U:hover :nth-child(10), .letter.U:hover :nth-child(11),
.letter.V:hover :nth-child(2), .letter.V:hover :nth-child(5), .letter.V:hover :nth-child(7), .letter.V:hover :nth-child(9), .letter.V:hover :nth-child(10), .letter.V:hover :nth-child(13),
.letter.W:hover :nth-child(2), .letter.W:hover :nth-child(9), .letter.W:hover :nth-child(5), .letter.W:hover :nth-child(6), .letter.W:hover :nth-child(11), .letter.W:hover :nth-child(12), .letter.W:hover :nth-child(16),
.letter.X:hover :nth-child(2), .letter.X:hover :nth-child(5), .letter.X:hover :nth-child(9), .letter.X:hover :nth-child(12), .letter.X:hover :nth-child(11), .letter.X:hover :nth-child(14),
.letter.Y:hover :nth-child(3), .letter.Y:hover :nth-child(6), .letter.Y:hover :nth-child(7), .letter.Y:hover :nth-child(11), .letter.Y:hover :nth-child(8),
.letter.Z:hover :nth-child(11), .letter.Z:hover :nth-child(13), .letter.Z:hover :nth-child(4), .letter.Z:hover :nth-child(7)
{
animation-name: rotation-right;
}
.letter.A :nth-child(3), .letter.A :nth-child(5), .letter.A :nth-child(7), .letter.A :nth-child(8), .letter.A :nth-child(17),
.letter.B :nth-child(3), .letter.B :nth-child(5), .letter.B :nth-child(6), .letter.B :nth-child(7), .letter.B :nth-child(11), .letter.B :nth-child(12),
.letter.C :nth-child(2), .letter.C :nth-child(4), .letter.C :nth-child(6), .letter.C :nth-child(10), .letter.C :nth-child(11),
.letter.D :nth-child(3), .letter.D :nth-child(5), .letter.D :nth-child(7), .letter.D :nth-child(8), .letter.D :nth-child(12),
.letter.E :nth-child(3), .letter.E :nth-child(4), .letter.E :nth-child(5), .letter.E :nth-child(9), .letter.E :nth-child(12), .letter.E :nth-child(13), .letter.E :nth-child(14),
.letter.F :nth-child(2), .letter.F :nth-child(6), .letter.F :nth-child(7), .letter.F :nth-child(9), .letter.F :nth-child(12),
.letter.G :nth-child(2), .letter.G :nth-child(4), .letter.G :nth-child(7),
.letter.H :nth-child(2), .letter.H :nth-child(9), .letter.H :nth-child(5), .letter.H :nth-child(6), .letter.H :nth-child(11), .letter.H :nth-child(12), .letter.H :nth-child(14),
.letter.I :nth-child(2), .letter.I :nth-child(9), .letter.I :nth-child(7), .letter.I :nth-child(6), .letter.I :nth-child(11), .letter.I :nth-child(10), .letter.I :nth-child(14),
.letter.J :nth-child(2), .letter.J :nth-child(4), .letter.J :nth-child(6), .letter.J :nth-child(8),
.letter.K :nth-child(3), .letter.K :nth-child(4), .letter.K :nth-child(5), .letter.K :nth-child(9), .letter.K :nth-child(12), .letter.K :nth-child(13), .letter.K :nth-child(15),
.letter.L :nth-child(3), .letter.L :nth-child(5), .letter.L :nth-child(6), .letter.L :nth-child(9),
.letter.M :nth-child(2), .letter.M :nth-child(9), .letter.M :nth-child(5), .letter.M :nth-child(6), .letter.M :nth-child(11), .letter.M :nth-child(12), .letter.M :nth-child(15),
.letter.N :nth-child(2), .letter.N :nth-child(4), .letter.N :nth-child(9), .letter.N :nth-child(10),
.letter.O :nth-child(2), .letter.O :nth-child(5), .letter.O :nth-child(8),
.letter.P :nth-child(2), .letter.P :nth-child(5), .letter.P :nth-child(6), .letter.P :nth-child(8), .letter.P :nth-child(10),
.letter.Q :nth-child(2), .letter.Q :nth-child(5), .letter.Q :nth-child(8),
.letter.R :nth-child(2), .letter.R :nth-child(5), .letter.R :nth-child(6), .letter.R :nth-child(8), .letter.R :nth-child(10), .letter.R :nth-child(12), .letter.R :nth-child(13),
.letter.S :nth-child(2), .letter.S :nth-child(4), .letter.S :nth-child(9), .letter.S :nth-child(10),
.letter.T :nth-child(2), .letter.T :nth-child(5), .letter.T :nth-child(6), .letter.T :nth-child(8), .letter.T :nth-child(10),
.letter.U :nth-child(2), .letter.U :nth-child(4), .letter.U :nth-child(6), .letter.U :nth-child(10), .letter.U :nth-child(11),
.letter.V :nth-child(2), .letter.V :nth-child(5), .letter.V :nth-child(7), .letter.V :nth-child(9), .letter.V :nth-child(10), .letter.V :nth-child(13),
.letter.W :nth-child(2), .letter.W :nth-child(9), .letter.W :nth-child(5), .letter.W :nth-child(6), .letter.W :nth-child(11), .letter.W :nth-child(12), .letter.W :nth-child(16),
.letter.X :nth-child(2), .letter.X :nth-child(5), .letter.X :nth-child(9), .letter.X :nth-child(12), .letter.X :nth-child(11), .letter.X :nth-child(14),
.letter.Y :nth-child(3), .letter.Y :nth-child(6), .letter.Y :nth-child(7), .letter.Y :nth-child(11), .letter.Y :nth-child(8),
.letter.Z :nth-child(11), .letter.Z :nth-child(13), .letter.Z :nth-child(4), .letter.Z :nth-child(7)
{
color: yellow;
}
/* ELEMENTS ANIMATION
-------------------------------------------------- */
@keyframes rotation-right {
0%{ transform: rotate(0deg); }
50%{ transform: rotate(360deg); }
100%{ transform: rotate(360deg); }
}
@keyframes rotation-left {
0%{ transform: rotate(0deg); }
50%{ transform: rotate(-360deg); }
100%{ transform: rotate(-360deg); }
}
@keyframes drawline {
0%{ transform: scaleX(1); }
25%{ transform: scaleX(0); }
50%{ transform: scaleX(-1); }
100%{ transform: scaleX(-1); }
}
@keyframes drawlinevert {
0%{ transform: scaleY(1); }
25%{ transform: scaleY(0); }
50%{ transform: scaleY(-1); }
100%{ transform: scaleY(-1); }
}
/* LETTERS SPEC.
-------------------------------------------------- */
.letter {
width: 30em; /*150px*/
height: 30em;
font-weight: bold;
margin: 12em;
position: relative;
display: inline-block;
}
.word .letter {
margin: 6em;
}
.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;
}
.letter .element {
margin: 0;
position: absolute;
border:none;
}
/* A
-------------------------------------------------- */
.letter.A :nth-child(2){
top: 0em;
left: 6em;
width:18em;height: 18em;
}
.letter.A :nth-child(3){
top: 3em;
left: 9em;
width:12em;height: 12em;
}
.letter.A :nth-child(4){
top: 6em;
left: 3em;
}
.letter.A :nth-child(5){
top: 6em;
right: 3em;
}
.letter.A :nth-child(6){
top: 21em;
left: 3em;
}
.letter.A :nth-child(7){
top: 21em;
right: 3em;
}
.letter.A :nth-child(8){
top: 21em;
left: 3em;
}
.letter.A :nth-child(9){
top: 21em;
right: 3em;
}
.letter.A :nth-child(10){
width:12em; height: 12em;
top: 18em;
left: 0em;
}
.letter.A :nth-child(11){
width:12em; height: 12em;
top: 18em;
right: 0em;
}
.letter.A :nth-child(12){
width:24em;
top: 15em;
left: 3em;
}
.letter.A :nth-child(13){
height: 12em;
top: 12em;
left: 6em;
}
.letter.A :nth-child(14){
height: 12em;
top: 12em;
right: 6em;
}
.letter.A :nth-child(15){
height: 9em;
top: 9em;
left: 15em;
}
.letter.A :nth-child(16), .letter.A :nth-child(17) {
width:6em; height: 6em;
top: 6em;
left: 12em;
}
/* B
-------------------------------------------------- */
.letter.B :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.B :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.B :nth-child(4){
width:12em;height: 12em;
top: 3em;
right: 0em;
}
.letter.B :nth-child(5){
width:12em;height: 12em;
bottom: 3em;
right: 0em;
}
.letter.B :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.B :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.B :nth-child(8){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.B :nth-child(9){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.B :nth-child(10){
width:6em;height:6em;
top: 6em;
right: 3em;
}
.letter.B :nth-child(11){
width:6em;height:6em;
bottom: 6em;
right: 3em;
}
.letter.B :nth-child(12){
width:6em;height:6em;
top: 6em;
right: 3em;
}
.letter.B :nth-child(13){
width:6em;height:6em;
bottom: 6em;
right: 3em;
}
.letter.B :nth-child(14){
width:24em;
top: 15em;
left: 0em;
}
.letter.B :nth-child(15){
height: 18em;
top: 6em;
left: 6em;
}
.letter.B :nth-child(16){
width:9em;
top: 9em;
left: 15em;
}
.letter.B :nth-child(17){
width:9em;
bottom: 9em;
left: 15em;
}
/* C
-------------------------------------------------- */
.letter.C :nth-child(2){
width: 30em;
height: 30em;
top: 0em;
left: 0em;
}
.letter.C :nth-child(3){
width: 18em;
height: 18em;
top: 6em;
left: 6em;
}
.letter.C :nth-child(4){
width: 6em;
height: 6em;
top: 3em;
right: 12em;
}
.letter.C :nth-child(5){
width: 6em;
height: 6em;
bottom: 3em;
right: 12em;
}
.letter.C :nth-child(6){
width: 12em;
height: 12em;
top: 0em;
right: 0em;
}
.letter.C :nth-child(7){
width: 12em;
height: 12em;
bottom: 0em;
right: 0em;
}
.letter.C :nth-child(8){
width: 6em;
height: 6em;
top: 3em;
right: 3em;
}
.letter.C :nth-child(9){
width: 6em;
height: 6em;
bottom: 3em;
right: 3em;
}
.letter.C :nth-child(10){
width: 6em;
height: 6em;
top: 3em;
right: 3em;
}
.letter.C :nth-child(11){
width: 6em;
height: 6em;
bottom: 3em;
right: 3em;
}
.letter.C :nth-child(12){
width:6em;
top: 6em;
right:6em;
}
.letter.C :nth-child(13){
width:6em;
bottom: 6em;
right:6em;
}
/* D
-------------------------------------------------- */
.letter.D :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.D :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.D :nth-child(4){
width:30em;height: 30em;
top: 0em;
right: 0em;
}
.letter.D :nth-child(5){
width:18em;height: 18em;
top: 6em;
right: 6em;
}
.letter.D :nth-child(6){
width:6em;height: 6em;
top: 12em;
right: 12em;
}
.letter.D :nth-child(7){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.D :nth-child(8){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.D :nth-child(9){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.D :nth-child(10){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.D :nth-child(11){
width:12em;height:12em;
top: 9em;
left: 9em;
}
.letter.D :nth-child(12){
width:12em;height:12em;
bottom: 9em;
left: 9em;
}
.letter.D :nth-child(13){
height: 18em;
top: 6em;
left: 6em;
}
.letter.D :nth-child(14){
width:9em;
top: 15em;
left: 0em;
}
/* E
-------------------------------------------------- */
.letter.E :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.E :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.E :nth-child(4){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.E :nth-child(5){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.E :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.E :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.E :nth-child(8){
width:12em;height:12em;
top: 0em;
right: 0em;
}
.letter.E :nth-child(9){
width:12em;height:12em;
bottom: 0em;
right: 0em;
}
.letter.E :nth-child(10){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.E :nth-child(11){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.E :nth-child(12){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.E :nth-child(13){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.E :nth-child(14){
width:6em;height:6em;
top: 12em;
left: 12em;
}
.letter.E :nth-child(15){
width:6em;height:6em;
top: 12em;
left: 12em;
}
.letter.E :nth-child(16){
width:12em;height:12em;
top: 9em;
left: 9em;
}
.letter.E :nth-child(17){
height: 18em;
top: 6em;
left: 6em;
}
.letter.E :nth-child(18){
width:9em;
top: 6em;
right:6em;
}
.letter.E :nth-child(19){
width:9em;
bottom: 6em;
right:6em;
}
.letter.E :nth-child(20){
width:15em;
top: 15em;
left:0em;
}
/* F
-------------------------------------------------- */
.letter.F :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.F :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.F :nth-child(4){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.F :nth-child(5){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.F :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.F :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.F :nth-child(8){
width:12em;height:12em;
top: 0em;
right: 0em;
}
.letter.F :nth-child(9){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.F :nth-child(10){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.F :nth-child(11){
width:12em;height:12em;
top: 9em;
left: 9em;
}
.letter.F :nth-child(12){
width:6em;height:6em;
top: 12em;
right: 12em;
}
.letter.F :nth-child(13){
width:6em;height:6em;
top: 12em;
right: 12em;
}
.letter.F :nth-child(14){
height: 18em;
top: 6em;
left: 6em;
}
.letter.F :nth-child(15){
width:9em;
top: 6em;
right:6em;
}
.letter.F :nth-child(16){
width:15em;
top: 15em;
left:0em;
}
/* G
-------------------------------------------------- */
.letter.G :nth-child(2){
width: 30em;
height: 30em;
top: 0em;
left: 0em;
}
.letter.G :nth-child(3){
width: 18em; height: 18em;
top: 6em;
left: 6em;
}
.letter.G :nth-child(4){
width: 12em; height: 12em;
top: 9em;
left: 9em;
}
.letter.G :nth-child(5){
width: 12em; height: 12em;
top: 12em;
right: 0em;
}
.letter.G :nth-child(6){
width: 6em; height: 6em;
top: 15em;
right: 3em;
}
.letter.G :nth-child(7){
width: 6em; height: 6em;
top: 15em;
right: 3em;
}
.letter.G :nth-child(8){
width: 9em;
top: 18em;
right: 6em;
}
.letter.G :nth-child(9){
height: 15em;
bottom: 0em;
right: 12em;
}
/* H
-------------------------------------------------- */
.letter.H :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.H :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.H :nth-child(4), .letter.H :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.H :nth-child(5), .letter.H :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.H :nth-child(8){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.H :nth-child(9){
width:12em;height: 12em;
bottom: 0em;
right: 0em;
}
.letter.H :nth-child(10){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.H :nth-child(11){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.H :nth-child(12){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.H :nth-child(13){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.H :nth-child(14){
width:6em;height:6em;
bottom: 12em;
right: 12em;
}
.letter.H :nth-child(15){
width:6em;height:6em;
bottom: 12em;
right: 12em;
}
.letter.H :nth-child(16){
height: 18em;
top: 6em;
left: 6em;
}
.letter.H :nth-child(17){
height: 18em;
top: 6em;
right: 6em;
}
.letter.H :nth-child(18){
width: 9em;
top: 15em;
left: 3em;
}
.letter.H :nth-child(19){
width: 9em;
top: 15em;
right: 3em;
}
/* I
-------------------------------------------------- */
.letter.I :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.I :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.I :nth-child(4), .letter.I :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.I :nth-child(5), .letter.I :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.I :nth-child(8){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.I :nth-child(9){
width:12em;height: 12em;
bottom: 0em;
right: 0em;
}
.letter.I :nth-child(10){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.I :nth-child(11){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.I :nth-child(12){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.I :nth-child(13){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.I :nth-child(14){
width:6em;height:6em;
bottom: 12em;
right: 12em;
}
.letter.I :nth-child(15){
width:6em;height:6em;
bottom: 12em;
right: 12em;
}
.letter.I :nth-child(16){
height: 9em;
top: 3em;
left: 15em;
}
.letter.I :nth-child(17){
height: 9em;
bottom: 3em;
left: 15em;
}
.letter.I :nth-child(18){
width: 18em;
top: 6em;
left: 6em;
}
.letter.I :nth-child(19){
width: 18em;
bottom: 6em;
left: 6em;
}
/* J
-------------------------------------------------- */
.letter.J :nth-child(2){
width:30em;height: 30em;
bottom: 0em;
left: 0em;
}
.letter.J :nth-child(3){
width:18em;height: 18em;
bottom: 6em;
left: 6em;
}
.letter.J :nth-child(4){
width:6em;height: 6em;
bottom: 12em;
left: 12em;
}
.letter.J :nth-child(5){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.J :nth-child(6){
width:6em;height: 6em;
top: 12em;
right: 3em;
}
.letter.J :nth-child(7), .letter.J :nth-child(8){
width:6em;height: 6em;
top: 3em;
right: 3em;
}
.letter.J :nth-child(9){
height: 6em;
top: 6em;
right: 6em;
}
/* K
-------------------------------------------------- */
.letter.K :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.K :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.K :nth-child(4){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.K :nth-child(5){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.K :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.K :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.K :nth-child(8){
width:12em;height:12em;
top: 0em;
right: 0em;
}
.letter.K :nth-child(9){
width:12em;height:12em;
bottom: 0em;
right: 0em;
}
.letter.K :nth-child(10){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.K :nth-child(11){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.K :nth-child(12){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.K :nth-child(13){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.K :nth-child(14){
width:6em;height:6em;
top: 12em;
left: 12em;
}
.letter.K :nth-child(15){
width:6em;height:6em;
top: 12em;
left: 12em;
}
.letter.K :nth-child(16){
width:12em;height:12em;
top: 9em;
left: 9em;
}
.letter.K :nth-child(17){
height: 18em;
top: 6em;
left: 6em;
}
.letter.K :nth-child(18){
width:6em;
top: 6em;
right:6em;
}
.letter.K :nth-child(19){
width:6em;
bottom: 6em;
right:6em;
}
.letter.K :nth-child(20){
width:15em;
top: 15em;
left:0em;
}
/* L
-------------------------------------------------- */
.letter.L :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.L :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.L :nth-child(4), .letter.L :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.L :nth-child(5), .letter.L :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.L :nth-child(8){
width:12em;height: 12em;
bottom: 0em;
right: 0em;
}
.letter.L :nth-child(9), .letter.L :nth-child(10){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.L :nth-child(11){
height: 18em;
top: 6em;
left: 6em;
}
.letter.L :nth-child(12){
width: 9em;
bottom: 6em;
right: 6em;
}
/* M
-------------------------------------------------- */
.letter.M :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.M :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.M :nth-child(4), .letter.M :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.M :nth-child(5), .letter.M :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.M :nth-child(8){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.M :nth-child(9){
width:12em;height: 12em;
bottom: 0em;
right: 0em;
}
.letter.M :nth-child(10), .letter.M :nth-child(12){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.M :nth-child(11), .letter.M :nth-child(13){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.M :nth-child(14){
width:12em;height: 12em;
top: 6em;
left: 9em;
}
.letter.M :nth-child(15), .letter.M :nth-child(16){
width:6em;height: 6em;
top: 9em;
left: 12em;
}
.letter.M :nth-child(17){
height: 18em;
top: 6em;
left: 6em;
}
.letter.M :nth-child(18){
height: 18em;
top: 6em;
right: 6em;
}
.letter.M :nth-child(19){
height: 9em;
top: 3em;
left: 15em;
}
/* N
-------------------------------------------------- */
.letter.N :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 3em;
}
.letter.N :nth-child(3){
width:6em;height: 6em;
top: 3em;
left: 6em;
}
.letter.N :nth-child(4){
width:12em;height: 12em;
bottom: 0em;
right: 3em;
}
.letter.N :nth-child(5){
width:6em;height: 6em;
bottom: 3em;
right: 6em;
}
.letter.N :nth-child(6){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.N :nth-child(7){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.N :nth-child(8), .letter.N :nth-child(9) {
width:6em;height: 6em;
top: 3em;
right: 3em;
}
.letter.N :nth-child(10), .letter.N :nth-child(11) {
width:6em;height: 6em;
bottom: 3em;
left: 3em;
}
.letter.N :nth-child(12) {
height: 18em;
top: 6em;
left: 6em;
}
.letter.N :nth-child(13) {
height: 18em;
top: 6em;
right: 6em;
}
.letter.N :nth-child(14) {
height: 18em;
top: 6em;
left: 15em;
}
/* O
-------------------------------------------------- */
.letter.O :nth-child(2){
width: 30em; height: 30em;
top: 0em;
left: 0em;
}
.letter.O :nth-child(3){
width: 30em; height: 30em;
top: 0em;
left: 0em;
}
.letter.O :nth-child(4){
width: 18em; height: 18em;
top: 6em;
left: 6em;
}
.letter.O :nth-child(5){
width: 18em; height: 18em;
top: 6em;
left: 6em;
}
.letter.O :nth-child(6){
width: 12em; height: 12em;
top: 0em;
right: 0em;
}
.letter.O :nth-child(7), .letter.O :nth-child(8){
width: 6em; height: 6em;
top: 3em;
right: 3em;
}
.letter.O :nth-child(9){
width: 6em; height: 6em;
top: 12em;
right: 3em;
}
.letter.O :nth-child(10){
height: 6em;
top: 6em;
right: 6em;
}
/* P
-------------------------------------------------- */
.letter.P :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.P :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.P :nth-child(4), .letter.P :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.P :nth-child(5), .letter.P :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.P :nth-child(8){
width:18em;height:18em;
top: 0;
right: 0;
}
.letter.P :nth-child(9){
width:12em;height:12em;
top: 3em;
right: 3em;
}
.letter.P :nth-child(10), .letter.P :nth-child(11) {
width:6em;height:6em;
top: 6em;
right: 6em;
}
.letter.P :nth-child(12){
height:18em;
top: 6em;
left: 6em;
}
.letter.P :nth-child(13){
width:12em;
top: 15em;
left: 3em;
}
.letter.P :nth-child(14){
width:9em;
top: 9em;
left: 12em;
}
/* Q
-------------------------------------------------- */
.letter.Q :nth-child(2){
width: 30em; height: 30em;
top: 0em;
left: 0em;
}
.letter.Q :nth-child(3){
width: 30em; height: 30em;
top: 0em;
left: 0em;
}
.letter.Q :nth-child(4){
width: 18em; height: 18em;
top: 6em;
left: 6em;
}
.letter.Q :nth-child(5){
width: 18em; height: 18em;
top: 6em;
left: 6em;
}
.letter.Q :nth-child(6){
width: 12em; height: 12em;
bottom: 0em;
right: 0em;
}
.letter.Q :nth-child(7), .letter.Q :nth-child(8){
width: 6em; height: 6em;
bottom: 3em;
right: 3em;
}
.letter.Q :nth-child(9){
width: 6em; height: 6em;
right: 12em;
bottom: 3em;
}
.letter.Q :nth-child(10){
width: 6em;
bottom: 6em;
right: 6em;
}
/* R
-------------------------------------------------- */
.letter.R :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.R :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.R :nth-child(4), .letter.R :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.R :nth-child(5), .letter.R :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.R :nth-child(8){
width:18em;height:18em;
top: 0;
right: 0;
}
.letter.R :nth-child(9){
width:12em;height:12em;
top: 3em;
right: 3em;
}
.letter.R :nth-child(10), .letter.R :nth-child(11) {
width:6em;height:6em;
top: 6em;
right: 6em;
}
.letter.R :nth-child(12) {
width:12em;height:12em;
bottom: 0em;
right: 3em;
}
.letter.R :nth-child(13), .letter.R :nth-child(14) {
width:6em;height:6em;
bottom: 3em;
right: 6em;
}
.letter.R :nth-child(15){
height:18em;
top: 6em;
left: 6em;
}
.letter.R :nth-child(16){
width:12em;
top: 15em;
left: 3em;
}
.letter.R :nth-child(17){
width:9em;
top: 9em;
left: 12em;
}
/* S
-------------------------------------------------- */
.letter.S :nth-child(2){
width: 12em; height: 12em;
top: 3em;
left: 3em;
}
.letter.S :nth-child(3){
width: 6em; height: 6em;
top: 6em;
left: 6em;
}
.letter.S :nth-child(4){
width: 12em; height: 12em;
bottom: 3em;
right: 3em;
}
.letter.S :nth-child(5){
width: 6em; height: 6em;
bottom: 6em;
right: 6em;
}
.letter.S :nth-child(6){
width: 6em; height: 6em;
top: 3em;
left: 9em;
}
.letter.S :nth-child(7){
width: 6em; height: 6em;
bottom: 3em;
right: 9em;
}
.letter.S :nth-child(8), .letter.S :nth-child(9){
width: 6em; height: 6em;
top: 3em;
right: 3em;
}
.letter.S :nth-child(10), .letter.S :nth-child(11){
width: 6em; height: 6em;
bottom: 3em;
left: 3em;
}
.letter.S :nth-child(12){
width: 12em; height: 12em;
top: 0em;
right: 0em;
}
.letter.S :nth-child(13){
width: 12em; height: 12em;
bottom: 0em;
left: 0em;
}
.letter.S :nth-child(14){
width: 9em;
top: 6em;
left: 15em;
}
.letter.S :nth-child(15){
width: 9em;
bottom: 6em;
right: 15em;
}
.letter.S :nth-child(16){
width: 12em;
top: 15em;
left: 9em;
}
/* T
-------------------------------------------------- */
.letter.T :nth-child(2){
width: 12em; height: 12em;
top: 0em;
left: 0em;
}
.letter.T :nth-child(3){
width: 12em; height: 12em;
top: 0em;
right: 0em;
}
.letter.T :nth-child(4), .letter.T :nth-child(5) {
width: 6em; height: 6em;
top: 3em;
left: 3em;
}
.letter.T :nth-child(6), .letter.T :nth-child(7) {
width: 6em; height: 6em;
top: 3em;
right: 3em;
}
.letter.T :nth-child(8), .letter.T :nth-child(9) {
width: 6em; height: 6em;
top: 12em;
left: 12em;
}
.letter.T :nth-child(10), .letter.T :nth-child(11) {
width: 6em; height: 6em;
bottom: 3em;
left: 12em;
}
.letter.T :nth-child(12) {
width: 12em; height: 12em;
bottom: 0em;
left: 9em;
}
.letter.T :nth-child(13) {
width: 18em;
top: 6em;
left: 6em;
}
.letter.T :nth-child(14) {
height: 9em;
top: 3em;
left: 15em;
}
.letter.T :nth-child(15) {
height: 6em;
bottom: 6em;
left: 15em;
}
/* U
-------------------------------------------------- */
.letter.U :nth-child(2){
width: 30em;
height: 30em;
bottom: 0em;
left: 0em;
}
.letter.U :nth-child(3){
width: 18em;
height: 18em;
bottom: 6em;
left: 6em;
}
.letter.U :nth-child(4){
width: 6em;
height: 6em;
top: 12em;
left: 3em;
}
.letter.U :nth-child(5){
width: 6em;
height: 6em;
top: 12em;
right: 3em;
}
.letter.U :nth-child(6){
width: 12em;
height: 12em;
top: 0em;
left: 0em;
}
.letter.U :nth-child(7){
width: 12em;
height: 12em;
top: 0em;
right: 0em;
}
.letter.U :nth-child(8), .letter.U :nth-child(10){
width: 6em;
height: 6em;
top: 3em;
left: 3em;
}
.letter.U :nth-child(9), .letter.U :nth-child(11){
width: 6em;
height: 6em;
top: 3em;
right: 3em;
}
.letter.U :nth-child(12){
height:6em;
top: 6em;
left:6em;
}
.letter.U :nth-child(13){
height:6em;
top: 6em;
right:6em;
}
/* V
-------------------------------------------------- */
.letter.V :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.V :nth-child(3){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.V :nth-child(4), .letter.V :nth-child(5) {
width: 6em; height: 6em;
top: 3em;
left: 3em;
}
.letter.V :nth-child(6), .letter.V :nth-child(7) {
width: 6em; height: 6em;
top: 3em;
right: 3em;
}
.letter.V :nth-child(8), .letter.V :nth-child(9) {
width: 6em; height: 6em;
top: 15em;
left: 3em;
}
.letter.V :nth-child(10), .letter.V :nth-child(11) {
width: 6em; height: 6em;
top: 15em;
right: 3em;
}
.letter.V :nth-child(12) {
width: 6em; height: 6em;
top: 12em;
left: 12em;
}
.letter.V :nth-child(13), .letter.V :nth-child(14) {
width: 6em; height: 6em;
bottom: 3em;
left: 12em;
}
.letter.V :nth-child(15) {
width: 12em; height: 12em;
bottom: 0em;
left: 9em;
}
.letter.V :nth-child(16) {
height: 12em;
top: 6em;
left: 6em;
}
.letter.V :nth-child(17) {
height: 12em;
top: 6em;
right: 6em;
}
.letter.V :nth-child(18) {
height: 6em;
bottom: 6em;
left: 15em;
}
/* W
-------------------------------------------------- */
.letter.W :nth-child(2){
width:12em;height: 12em;
top: 0em;
left: 0em;
}
.letter.W :nth-child(3){
width:12em;height: 12em;
bottom: 0em;
left: 0em;
}
.letter.W :nth-child(4), .letter.W :nth-child(6){
width:6em;height:6em;
top: 3em;
left: 3em;
}
.letter.W :nth-child(5), .letter.W :nth-child(7){
width:6em;height:6em;
bottom: 3em;
left: 3em;
}
.letter.W :nth-child(8){
width:12em;height: 12em;
top: 0em;
right: 0em;
}
.letter.W :nth-child(9){
width:12em;height: 12em;
bottom: 0em;
right: 0em;
}
.letter.W :nth-child(10), .letter.W :nth-child(12){
width:6em;height:6em;
top: 3em;
right: 3em;
}
.letter.W :nth-child(11), .letter.W :nth-child(13){
width:6em;height:6em;
bottom: 3em;
right: 3em;
}
.letter.W :nth-child(14){
width:12em;height: 12em;
top: 12em;
left: 9em;
}
.letter.W :nth-child(15), .letter.W :nth-child(16){
width:6em;height: 6em;
bottom: 9em;
left: 12em;
}
.letter.W :nth-child(17){
height: 18em;
top: 6em;
left: 6em;
}
.letter.W :nth-child(18){
height: 18em;
top: 6em;
right: 6em;
}
.letter.W :nth-child(19){
height: 9em;
bottom: 3em;
left: 15em;
}
/* X
-------------------------------------------------- */
.letter.X :nth-child(2){
width: 12em; height: 12em;
top: 0em;
left: 0em;
}
.letter.X :nth-child(3){
width: 12em; height: 12em;
top: 0em;
right: 0em;
}
.letter.X :nth-child(4){
width: 12em; height: 12em;
bottom: 0em;
left: 0em;
}
.letter.X :nth-child(5){
width: 12em; height: 12em;
bottom: 0em;
right: 0em;
}
.letter.X :nth-child(6){
width: 12em; height: 12em;
bottom: 15em;
left: 9em;
}
.letter.X :nth-child(7){
width: 12em; height: 12em;
top: 15em;
left: 9em;
}
.letter.X :nth-child(8), .letter.X :nth-child(9) {
width: 6em; height: 6em;
top: 3em;
left: 3em;
}
.letter.X :nth-child(10), .letter.X :nth-child(11) {
width: 6em; height: 6em;
top: 3em;
right: 3em;
}
.letter.X :nth-child(12), .letter.X :nth-child(13) {
width: 6em; height: 6em;
bottom: 3em;
left: 3em;
}
.letter.X :nth-child(14), .letter.X :nth-child(15) {
width: 6em; height: 6em;
bottom: 3em;
right: 3em;
}
.letter.X :nth-child(16){
height: 6em;
top: 6em;
left: 6em;
}
.letter.X :nth-child(17){
height: 6em;
bottom: 6em;
left: 6em;
}
.letter.X :nth-child(18){
height: 6em;
top: 6em;
right: 6em;
}
.letter.X :nth-child(19){
height: 6em;
bottom: 6em;
right: 6em;
}
/* Y
-------------------------------------------------- */
.letter.Y :nth-child(2){
width: 12em; height: 12em;
top: 0em;
left: 0em;
}
.letter.Y :nth-child(3){
width: 12em; height: 12em;
top: 0em;
right: 0em;
}
.letter.Y :nth-child(4), .letter.Y :nth-child(6){
width: 6em; height: 6em;
top: 3em;
left: 3em;
}
.letter.Y :nth-child(5), .letter.Y :nth-child(7){
width: 6em; height: 6em;
top: 3em;
right: 3em;
}
.letter.Y :nth-child(8){
width: 18em; height: 18em;
bottom: 9em;
left: 6em;
}
.letter.Y :nth-child(9){
width: 12em; height: 12em;
bottom: 12em;
left: 9em;
}
.letter.Y :nth-child(10){
width: 12em; height: 12em;
bottom: 0em;
left: 9em;
}
.letter.Y :nth-child(11), .letter.Y :nth-child(12){
width: 6em; height: 6em;
bottom: 3em;
left: 12em;
}
.letter.Y :nth-child(13){
height: 6em;
top: 6em;
left: 6em;
}
.letter.Y :nth-child(14){
height: 6em;
top: 6em;
right: 6em;
}
.letter.Y :nth-child(15){
height: 6em;
top: 18em;
left: 15em;
}
/* Z
-------------------------------------------------- */
.letter.Z :nth-child(2){
width: 12em; height: 12em;
top: 0em;
left: 0em;
}
.letter.Z :nth-child(3){
width: 12em; height: 12em;
bottom: 0em;
right: 0em;
}
.letter.Z :nth-child(4), .letter.Z :nth-child(5) {
width: 6em; height: 6em;
top: 3em;
left: 3em;
}
.letter.Z :nth-child(6), .letter.Z :nth-child(7) {
width: 6em; height: 6em;
bottom: 3em;
right: 3em;
}
.letter.Z :nth-child(8){
width: 6em; height: 6em;
top: 3em;
left: 15em;
}
.letter.Z :nth-child(9){
width: 6em; height: 6em;
bottom: 3em;
right: 15em;
}
.letter.Z :nth-child(8){
width: 6em; height: 6em;
top: 3em;
left: 15em;
}
.letter.Z :nth-child(9){
width: 6em; height: 6em;
bottom: 3em;
right: 15em;
}
.letter.Z :nth-child(10){
width: 6em; height: 6em;
top: 6em;
right: 6em;
}
.letter.Z :nth-child(11){
width: 12em; height: 12em;
top: 3em;
right: 3em;
}
.letter.Z :nth-child(12){
width: 6em; height: 6em;
bottom: 6em;
left: 6em;
}
.letter.Z :nth-child(13){
width: 12em; height: 12em;
bottom: 3em;
left: 3em;
}
.letter.Z :nth-child(14){
width: 9em;
top: 6em;
left: 6em;
}
.letter.Z :nth-child(15){
width: 9em;
bottom: 6em;
right: 6em;
}
.letter.Z :nth-child(16){
width: 12em;
top: 15em;
left: 9em;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.