snowflake

<style type="text/css">

.pfor {display: none;}

::-webkit-scrollbar-thumb:vertical {background: transparent; border: 1px solid #FF0033; border-radius: 90px; height: 100px;}
::-webkit-scrollbar-thumb:horizontal {background-color: #CCCCCC; width: 5px; height: 100px !important;}
::-webkit-scrollbar {height: 1px; width: 5px; background-color: #fcfcfc;}


#profile{border:none;
background-color:transparent;
}

body {background-color:#000;
background-image: url("http://i.picpar.com/4v4b.png");
background-position: 0% 0%;
background-repeat:no-repeat;
background-attachment: fixed;
background-size: 100%;
margin-right: 0px;
}

 .derp{
position:absolute;
top:1%;
left:1%;
width:560px;
}

a.cui:link, a.cui:active, a.cui:visited{
display: block;
float: left;
width: 55px;
height:55px;
margin-right: 25px;
margin-top: 15px;
border:6px double #;
border-radius: 50%;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/qWWDPMk.gif);
background-position: center;
background-repeat:no-repeat;
transform: rotate (0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate (0deg);
-webkit-transition: all 0.6s ease-out;
-moz-transition: all 0.6s ease-out;
}

a.cui:hover{
border:6px double #;
border-radius:0%;
text-decoration: none;
background-size: 100% 100%;
background-color:#;
background-image:url(http://i.imgur.com/qWWDPMk.gif);
background-position: center;
background-repeat:no-repeat;
-webkit-transform:rotate(-765deg);
-webkit-transition: all 0.9s ease-out;
-moz-transition: all 0.9s ease-out;
}
</style>

<div class="derp">
<a href="#01" class="cui"></a>
<a href="#02" class="cui"></a>
<a href="#03" class="cui"></a>
<a href="#04" class="cui"></a>
<a href="#05" class="cui"></a>
<a href="#06" class="cui"></a>
<a href="#reset" class="cui"></a>
</div>