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

a {
    -webkit-transition: all 0.3s ease-in;
    -moz-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

a, a:link, a:visited, a:active{color:#222;}
a:hover, a:focus{color:#f60;}
img{border:0;}

html{
    font-size: 62.5%;
}
body{
    font-family: Lucida grande, Tahoma, Verdana, Arial, Sans-serif;
    margin: 0;
	
    background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%,rgba(0,0,0,0.2) 15%,rgba(0,0,0,0) 100%); /* W3C */
    background-color: #eee;
    
    background-repeat:no-repeat;
    background-position:0 0
}
.wrapper{
    font-size:1.2em;
    margin:0 auto;
    padding:0;
    position:relative;
	width:300px;
	text-align:center;
}
header{
    text-align:center;
    margin:0;
    padding:0;
}
h1{
    font: 60px/68px 'LeagueGothicRegular', Arial, sans-serif;letter-spacing: 0;
}
header h1{
    text-transform:uppercase;
    padding:0 0 0 0;
    margin:0;
    line-height:5rem;
    color:#000;
}
header h1 span{
    text-transform:lowercase;
    color:#f60;
}
footer{
    margin: 0;
    padding:0 3rem;
}
.social{
	display:block;
	text-align:left;
	text-decoration:none;
	padding: 1rem 1rem;
	margin: 1rem;
    background-color:#fff;
	font-size:1.6rem;
    
    border-radius: 2rem;
    
    -webkit-box-shadow: inset 0px 0px 5px 0px #444444;
    -moz-box-shadow: inset 0px 0px 5px 0px #444444;
    box-shadow: inset 0px 0px 5px 0px #444444; 
}
.social svg{display: inline-block; vertical-align: middle; width: 4rem; height: 4rem; margin: 1rem}
.social p{display: inline-block; vertical-align: middle; padding: .5rem; margin: 0;}
.social strong{display:block; font-size:2rem;}

@keyframes tailMove {
    0% {transform: rotate(0deg);}
    25% {transform: rotate(10deg);}
    100% {transform: rotate(0deg);}
}

#cat-tail {
    transform: rotate(0deg);
    transform-origin: 100px 200px;
}
#cat-tail:hover {
    animation: .5s linear 0s tailMove;
    animation-iteration-count: infinite;
}
#cat-head {
    transform-origin: 145px 63px;
}