<div class="letter"><span id="a"></span></div>
<div class="letter"><span id="b"></span></div>
<div class="letter"><span id="c"></span></div>
<div class="letter"><span id="d"></span></div>
<div class="letter"><span id="e"></span></div>
<div class="letter"><span id="f"></span></div>
<div class="letter"><span id="g"></span></div>
<div class="letter"><span id="h"></span></div>
<div class="letter"><span id="i"></span></div>
<div class="letter"><span id="j"></span></div>
<div class="letter"><span id="k"></span></div>
<div class="letter"><span id="l"></span></div>
<div class="letter"><span id="m"></span></div>
<div class="letter"><span id="n"></span></div>
<div class="letter"><span id="o"></span></div>
<div class="letter"><span id="p"></span></div>
<div class="letter"><span id="q"></span></div>
<div class="letter"><span id="r"></span></div>
<div class="letter"><span id="s"></span></div>
<div class="letter"><span id="t"></span></div>
<div class="letter"><span id="u"></span></div>
<div class="letter"><span id="v"></span></div>
<div class="letter"><span id="w"></span></div>
<div class="letter"><span id="x"></span></div>
<div class="letter"><span id="y"></span></div>
<div class="letter"><span id="z"></span></div>

@import "compass/css3";

* {
 	box-sizing:border-box; 
}

body {
 	padding:20px; 
}

.letter {
 	display:block;
  width:100px;
  height:100px;
  box-shadow:0 0 1px rgba(0,0,0,0.5);
  margin:50px 10px 80px 10px; 
  float:left;
  position:relative;
  
  span {
    display:block; 
  	position:relative;
    
    &:after,
		&:before {
      content:"";
      display:block;
      position:absolute;
    }
  }
}

#a, #b, #c, #d, #e, #g, #o, #p, #q {
  width:100%;
  height:100%;
  border-radius:50%;
  border:25px solid #111;
}

#a:after {
	height:200%;
  right:-25px;
  top:-25px;
  width:25px;
  background:#111;
}

#b:after,
#h:after,
#k:after{
	height:200%;
  left:-25px;
  bottom:-25px;
  width:25px;
  background:#111;
}

#b:after {
 	height:300%; 
}

#c:after {
  height:50%;
  width:75%;
  top:50%;
  margin-top:-25%;
  right:-25px;
  background:white;
}

#d:after {
	height:300%;
  right:-25px;
  bottom:-25px;
  width:25px;
  background:#111;
}

#e:after {
  height:25px;
  width:190%;
  top:50%;
  margin-top:-25%;
  right:-23px;
  background:#111;
}

#e:before{
	width:100%;
  height:5px;
  background:white;
  right:-25px;
  top:74%;
  z-index:2;
}

#f {
  width:100%;
  height:100%;
  border-left:25px solid #111;
  
  &:before {
    width:75%;
    height:100%;
    border:25px solid #111;
    bottom:25%;
    left:-25px;
    border-radius:40% 0 0 0;
    border-bottom:none;
    border-right-color:white;
  }
  
  &:after {
    width:100%;
    top:0;
    left:-25px;
    background:#111;
    height:25px;
  }
}

#g:after{
	height:200%;
  right:-25px;
  top:-25px;
  width:25px;
  background:#111;
}

#g:before{
 	width:100%;
  height:100%;
  border:25px solid #111;
  bottom:-200%;
  right:-25px;
  border-radius:0 0 40% 0;
  border-top:none;
  border-left-color:white;
}

#h, #k, #m, #n { 
 width:100%;
  height:100%;
  border:25px solid #111;
  border-radius:0% 50% 0% 0%;
  border-bottom:none; 
}

#h:after,
#k:after{
  bottom:0;
}

#i {
  height:100%;
  width:25px;
  margin:0 auto;
  background: #111;
  
  &:after {
    width:25px;
    height:25px;
    border-radius:50%;
    background: #111;
    top:-50%;
    left:0;
  }
}

#j {
 	width:100%;
  border-right:25px solid #111;
  height:100%;
  right:0;
  top:0;
  
  &:before {
    bottom:-75%;
    width:75%;
    height:50%;
    border:25px solid #111;
    right:-25px;
    border-radius:0 0 40% 0;
    border-top:none;
    border-left-color:white;
  }
  
  &:after {
    width:25px;
    height:25px;
    border-radius:50%;
    background: #111;
    top:-50%;
    right:-25px;
  }
}


#k:before{
  height:25px;
  background: #111;
  width:100%;
  top:25%;
  border-radius:0 0 50% 0;
}

#l {
  width:25px;
  background:#111;
  height:150%;
  margin:0 auto;
  bottom:50%;
}	


#m:after, 
#w:after{
  height:100%;
  width:25px;
  background: #111;
  left:12px;
  top:-24px;
}

#p:after {
	height:300%;
  left:-25px;
  top:-25px;
  width:25px;
  background:#111;
}

#q:after,
#y:after{
	height:300%;
  right:-25px;
  top:-25px;
  width:25px;
  background:#111;
}

#r {
  width:100%;
  height:100%;
  overflow:hidden;
  
  &:before {
    height:100%;
    left:0;
    top:0;
    width:25px;
    background:#111; 
  }
  
  &:after {
    border:25px solid #111;
    width:100%;
    height:100%;
    border-radius:50%;
    left:-15px;
  }
}

#s {
 	width:100%;
  height:100%;
  border-radius:50%;
  border:25px solid #111;
  
  &:after {
    width:100%;
    height:25px;
    background:#111;
    border-top:5px solid white;
    border-radius:0 0 50% 0;
    right:-24px;
    top:50%;
    margin-top:-18px;
  }
  
  &:before {
    width:100%;
    height:25px;
    background:#111;
    border-bottom:5px solid white;
    left:-23px;
    top:50%;
    margin-top:-13px;
  }
}

#t {
 	width:25px;
  left:0;
  height:150%;
  bottom:50%;
  background:#111;
  
  &:after {
    background:#111;
    width:300%;
    height:25px;
    bottom:50%;
  }
}

#u, #y {
 	width:100%;
  height:100%;
  border:25px solid #111;
  border-radius:0% 0% 0% 50%;
  border-top:none;
} 

#y:after { 
  top:100%;
  right:-25px;
}

#v, #w {
 	width:100%;
  height:100%;
  border:25px solid #111;
  border-radius:0% 0% 50% 0%;
  border-top:none;
} 

#w:after{
 	bottom:-24px;
  top:auto;
}

#x {
  width:100%;
  height:100%;
  overflow:hidden;
  
  &:before, &:after {
    background: #111;
    width:25px;
    height:200%;
    top:-15px;
    left:100%;
    transform:rotate(45deg);
    transform-origin:0% 0%;
  }
  
  &:after {
    transform:rotate(-45deg);
    right:100%;
    left:auto;
    top:-10px;
  }
}

#y:after {
 	height:100%; 
}

#z{
 	width:100%;
  height:100%;
  overflow:hidden;
  
  &:after {
    border:25px solid #111;
    right:60px;
    border-right-width:40px;
    transform:skewX(-45deg);
    width:100%;
    height:100%;
    overflow:hidden;
  }
  
  &:before {
    bottom:0;
    left:0;
    width:100%;
    height:0;
    border:12px solid #111;
  }
}