%p#page-subline
  %span.page-subline-char-1 S
  %span.page-subline-char-2 p
  %span.page-subline-char-3 i
  %span.page-subline-char-4 n
  %span.page-subline-char-5 
  %span.page-subline-char-6 M
  %span.page-subline-char-7 e
  %span.page-subline-char-8 
  %span.page-subline-char-9 R
  %span.page-subline-char-10 o
  %span.page-subline-char-11 u
  %span.page-subline-char-12 n
  %span.page-subline-char-13 d

$chars:13;
$size:190px;
$blue:#12c1c7;

@import url('https://fonts.googleapis.com/css?family=Chelsea+Market');

body{
  background:
    linear-gradient(45deg,transparent 49%,fade-out($blue,.5) 49%,fade-out($blue,.5) 51%,transparent 51%),
    linear-gradient(-45deg,transparent 49%,fade-out(pink ,.5) 49%,fade-out(pink,.5) 51%,transparent 51%),
    linear-gradient(45deg,$blue,pink);
  background-size:
    10px 10px,
    10px 10px,
    auto auto;
  background-color:darken($blue,10%); 
}
#page-subline{
        position:absolute;
        top:50%;
        left:50%;
        z-index:2;
        width:$size;
        height:$size;
        margin:(-$size/2) 0 0 (-$size/2);
        border:2px dotted red;
        border-radius:100%;
        background:
        linear-gradient(45deg,transparent 48%,darken($blue,20%) 48%,lighten($blue,20%) 50%,darken($blue,20%) 52%,transparent 52%),
        linear-gradient(to bottom,darken($blue,2%),transparent);
        background-size:
          5px 15px,
          auto auto;
        background-color:$blue;
        box-shadow:
          0 0 0 5px $blue,
          0 0 0 6px darken($blue,20%),
          8px 0 0 0 fade-out(black,.8),
          inset 1px 0 0 0 fade-out(white,.2),
          8px 0 10px 0 fade-out(black,.5);
        text-shadow:0 1px 0 darken($blue,50%);
        font-family:'Chelsea Market',sans-serif;
        text-align:center; 
        transform:rotate(90deg);
&:before{
  content:' ';
  position:absolute;
  top:50%;
  left:50%;
  display:block;
  box-sizing:border-box;
  width:80%;
  height:80%;
  margin:(-80%/2) 0 0 (-80%/2);
  border:2px dashed darken($blue,20%);
  border-radius:100%;
  clip:rect(0,auto,( ($size/2) - 20 ),0);
  transform:rotate(-90deg);
}
    }
        .page-subline-emphasize{
            color:red;
        }
        [class^="page-subline-char-"]{
            position:absolute;
            left:50%;
            bottom:0;
            width:1em;
            height:($size/2);
            margin-left:(-1em/2);
            color:white;
            font-size:1em;
            line-height:($size - 40px);
            text-transform:uppercase;
            transform-origin:top center;
        }
        @for $i from 1 through $chars {
          .page-subline-char-#{$i} {
  transform:rotate( 0 - ($i*$chars) + deg );
           }
        }