style.css

@font-face {
	font-family: 'RobotoSlabLight';
    src: url('font/robotoslab_light_macroman/RobotoSlab-Light-webfont.eot');
    src: url('font/robotoslab_light_macroman/RobotoSlab-Light-webfont.eot?#iefix') format('embedded-opentype'),
         url('font/robotoslab_light_macroman/RobotoSlab-Light-webfont.woff') format('woff'),
         url('font/robotoslab_light_macroman/RobotoSlab-Light-webfont.ttf') format('truetype'),
         url('font/robotoslab_light_macroman/RobotoSlab-Light-webfont.svg#RobotoSlabRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

html {
	background: no-repeat center right url('icons/bg.jpg') black;
	background-size: contain;
}

html, body { height: 100%; }
body {
	background: rgba(0,0,0,0.6);
	margin: 0;
}

#main {
	position: absolute;
	width: 100%;
	overflow: auto;
	top: 50%;
	margin-top: -250px;
	text-align: center;
	font-size: 5em;
	padding: 1em 0;
	color: #fff;
	background: rgba(255,255,255,0.1);
}

h1 {
	font-family: 'RobotoSlabLight';
	font-size: 1em;
	margin: 0;
}

hr {
	width: 600px;
	border: 0;
	border-bottom: 2px dashed;
	opacity: 0.5;
}

#main a + a { margin-left: 10px; }
#main a {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 100px; height: 100px;
	image-rendering: -webkit-optimize-contrast;
}

#main a .solid {
	position: absolute;
	left: 0px; right: 0px;
	top: 0px; bottom: 0px;
	border: 2px solid;
	border-radius: 100%;
		transition: all 1s;
		opacity: 0;
}

#main a:hover .solid {
	opacity: 1;
}

#main a .dashed {
	position: absolute;
	left: 4px; right: 4px;
	top: 4px; bottom: 4px;
	border-radius: 100%;
	background: center no-repeat;
	background-size: 106%;
	transition: all 0.5s;
		opacity: 0;
}

#main a:hover .dashed{
	opacity: 1;
	transform:rotate(-15deg);
	-moz-transform:rotate(-15deg);
	-webkit-transform:rotate(-15deg);
}

#main a .text {
	position: absolute;
	left: 4px; right: 4px;
	top: 4px; bottom: 4px;
	background: center no-repeat;
	background-size: 106%;
		transition: all 0.5s;
		opacity: 0;
		transform:rotate(-90deg);
		-moz-transform:rotate(-90deg);
		-webkit-transform:rotate(-90deg);
 }

#main a:hover .text{
	opacity: 1;
	transform:rotate(0deg);
	-moz-transform:rotate(-0deg);
	-webkit-transform:rotate(-0deg);
}

#main a .icon{
	position: absolute;
	margin-top : -1px;
	margin-left: -1px;
	background: center no-repeat;
	border: 1px solid transparent;
		transition: all 0.25s;
		top:   20%; left:   20%;
		width: 60%; height: 60%;
		background-size: 100%;
		border-radius: 0%;
}

#main a:hover .icon{
	top:   25%; left:   25%;
	width: 50%; height: 50%;
	border-radius: 100%;
	background-size: 144%;
}

#main a[href*="linkedin"]:hover    .icon   { background-size: 110%; }
#main a[href*="gmail"]    .icon   { background-image: url('icons/Gmail.png'); }
#main a[href*="github"]   .icon   { background-image: url('icons/GitHub.png'); }
#main a[href*="linkedin"] .icon   { background-image: url('icons/LinkedIn.png'); }
#main a[href*="skype"]    .icon   { background-image: url('icons/Skype.png'); }
#main a[href*="gmail"]    .text   { background-image: url('icons/Gmail_text.png'); }
#main a[href*="github"]   .text   { background-image: url('icons/GitHub_text.png'); }
#main a[href*="linkedin"] .text   { background-image: url('icons/LinkedIn_text.png'); }
#main a[href*="skype"]    .text   { background-image: url('icons/Skype_text.png'); }
#main a[href*="gmail"]    .dashed { background-image: url('icons/Gmail_dashed.png'); }
#main a[href*="github"]   .dashed { background-image: url('icons/GitHub_dashed.png'); }
#main a[href*="linkedin"] .dashed { background-image: url('icons/LinkedIn_dashed.png'); }
#main a[href*="skype"]    .dashed { background-image: url('icons/Skype_dashed.png'); }
#main a[href*="gmail"]    {color:#e14d42;}
#main a[href*="github"]   {color:#ddd;}
#main a[href*="linkedin"] {color:#007bb6;}
#main a[href*="skype"]    {color:#009fe3;}

#main a .text b {
	display: block;
}

#main a:after {
	display: block;
	content: "";
	clear: both;
}