* {
    margin:0;
    padding:0;
    list-style:none;
}
body {
    background:url(bg.png);
}
h1 {
    text-align:center;
    font-family:'Nothing You Could Do', cursive;
    padding:10px;
    text-shadow:1px 1px #333;
    background-color:#000;
    color:#fff;
}
.pics {
    margin:auto;
    margin:0px auto;
    position:relative;
    height:500px;
    width:800px;
}
.pics a {
    background:#fff;
    display:inline;
    float:left;
    width:auto;
    padding:10px 10px 30px 10px;
    text-align:center;
    text-decoration:none;
    color:#333;
    font-size:28px;
    font-family:'Nothing You Could Do', cursive;
    font-weight:bold;
    -webkit-box-shadow:0px 0px 10px rgba(0,0,0,1);
    -moz-box-shadow:0px 0px 10px rgba(0,0,0,1);
    box-shadow:0px 0px 10px rgba(0,0,0,1);
    -webkit-transition:all .30s;
    -moz-transition:all .30s;
    -o-transition:all .30s;
    transition:all .30s;
    position:absolute;
}
.pics img {
    display:block;
    padding-bottom:20px;
}
.pics a:hover {
    z-index:100;
}
.pics a:after {
    content:attr(title);
}

/* Pictures placement, scaling and rotation */

.pics li:nth-child(1n) a {
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
    -moz-transform:rotate(30deg) scale(0.7,0.7);
    transform:rotate(30deg) scale(0.7,0.7);
    top:0%;
    left:60%;
}
.pics li:nth-child(2n) a {
    -webkit-transform:rotate(-30deg) scale(0.7,0.7);
    -moz-transform:rotate(-30deg) scale(0.7,0.7);
    transform:rotate(-30deg) scale(0.7,0.7);
    top:40%;
    left:80%;
}
.pics li:nth-child(3n) a {
    -webkit-transform:rotate(40deg) scale(0.7,0.7);
    -moz-transform:rotate(40deg) scale(0.7,0.7);
    transform:rotate(40deg) scale(0.7,0.7);
    top:50%;
    left:-10%;
}
.pics li:nth-child(4n) a {
    -webkit-transform:rotate(-30deg) scale(0.7,0.7);
    -moz-transform:rotate(-30deg) scale(0.7,0.7);
    transform:rotate(-30deg) scale(0.7,0.7);
    top:0%;
    left:-10%;
}
.pics li:nth-child(5n) a {
    -webkit-transform:rotate(-20deg) scale(0.8,0.8);
    -moz-transform:rotate(-20deg) scale(0.8,0.8);
    transform:rotate(-20deg) scale(0.8,0.8);
    top:50%;
    left:20%;
    z-index:3;
}
.pics li:nth-child(6n) a {
    -webkit-transform:rotate(30deg) scale(0.7,0.7);
    -moz-transform:rotate(30deg) scale(0.7,0.7);
    transform:rotate(30deg) scale(0.7,0.7);
    top:60%;
    left:55%;
}
.pics li:nth-child(7n) a {
    -webkit-transform:rotate(10deg) scale(0.7,0.7);
    -moz-transform:rotate(10deg) scale(0.7,0.7);
    transform:rotate(10deg) scale(0.7,0.7);
    top:0%;
    left:25%;
}

/* Pictures rotation and scaling on hover */

.pics li:nth-child(n) a:hover {
    -webkit-transform:rotate(0deg) scale(1,1);
    -moz-transform:rotate(0deg) scale(1,1);
    transform:rotate(0deg) scale(1,1);
}