html,css {width:100%;height:100%;}
.position {margin-left:auto;margin-right:auto;text-align:center;margin-top:15%;}
#workarea {position:absolute;width:100%;height:100%;background-color:#1e1a3e;font-family:Raleway;}
#personal {color:white;text-decoration:none;position:absolute;bottom:15px;right:2%;}
.spot {position:absolute;width:100%;height:100%;top:0;left:0;}
.svg-wrapper {margin-top:0;position:relative;width:150px;height:40px;display:inline-block;border-radius:3px; margin:0 40px 20px;}
#shape {stroke-width:6px;fill:transparent;stroke:#009FFD;stroke-dasharray:85 400;stroke-dashoffset:-220;transition:1s all ease;}
#text {margin-top:-30px;text-align:center;}
#text a {color:#666;;text-decoration:none;font-weight:100;font-size:1.1em;}
.svg-wrapper:hover #shape {stroke-dasharray:50 0;stroke-width:3px;stroke-dashoffset:0;stroke:#faa419;}
.svg-wrapper.on #shape {stroke-dasharray:50 0;stroke-width:3px;stroke-dashoffset:0;stroke:#faa419;}
