html,body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    font-family:Helvetica,sans-serif;
    background-color: #333;
}
a{
    color:transparent;
    text-decoration:none;
}
a:hover{
    color:#eee;
}
.neon, .neon-up{
    width: 32px;
    height: 32px;
}
.neon:hover{
    border-radius:5px;
    box-shadow:0px 0px 1px #ffffff;
    background-color:#ffffff;
}
.neon-up:hover{
    border-radius:5px 5px 0 0;
    box-shadow:0px 0px 1px #ffffff;
    background-color:#ffffff;
}
.px32{
    width: 32px;
    height: 32px;
    z-index: 5;
}
.caption {
    position: absolute;
    top:52px;
    display: none;
    padding: 0 10px 0 10px;
    font-size: 0.7em;
    border-radius:0 5px 5px 5px;
    box-shadow:0px 0px 1px #ffffff;
    background-color:#ffffff;
    z-index: 0;
}
.love1:hover + .caption1 {
    display: block;
    left: 128px;
}
.love2:hover + .caption2 {
    display: block;
    left: 173px;
}
.love3:hover + .caption3 {
    display: block;
    left: 219px;
}
.love4:hover + .caption4 {
    display: block;
    left: 264px;
}
.love5:hover + .caption5 {
    display: block;
    left: 309px;
}
.love6:hover + .caption6 {
    display: block;
    left: 355px;
}
.love7:hover + .caption7 {
    display: block;
    left: 400px;
}
.avatar{
    margin-right: 20px;
    width: 150px;
    height: 150px;
    border-radius:10px;
}
#blog,#labs,#cv,#info{
    position:absolute;
    margin:0;
    padding:0;
    width:50%;
    height:50%;
    text-align:center;
    font-size:3em;
    z-index:1;
    transition-property: width,height;
    transition-duration: 0.2s;
    transition-timing-function: ease-out;
    box-shadow: 1px 1px 12px #333333;
    vertical-align: middle;
    display: inline;
}
#blog{
    top:0;
    left:0;
    border:0;
    background-image:url(images/blog.jpg);
    background-position:40%,50%;
}
#labs{
    top:0;
    right:0;
    border:0;
    background-image:url(images/labs.jpg);
    background-position:50%,50%;
}
#cv{
    bottom:0;
    left:0;
    border:0;
    background-image:url(images/cv.jpg);
    background-position:40%,50%;
}
#cv.a:hover{
    color:#eee;
}
#info{
    bottom:0;
    right:0;
    border:0;
    color: #999;
    background-color:#333;
}
#blog:hover,#labs:hover,#cv:hover{
    z-index:2;
    width:60%;
    height:60%;
}
#avatar{
    position:absolute;
    right:0;
    bottom:0;
}
#logo {
    position:absolute;
    bottom:38px;
    right:140px;
    text-align:right;
    color: #fff;
    font-size:1em;
}
#logo_ombre {
    position:absolute;
    bottom:0;
    right:140px;
    text-align:right;
    margin-top:-10px;
    color:#555;
    font-size:1em;
    transform: scale(1, -1);
}
#social{
    position:absolute;
    left:40px;
    top:30px;
}
#love{
    position:absolute;
    left:40px;
    top:85px;
    border-top:2px solid #333;
}
#vcard{
    position:absolute;
    left:0;
    bottom:0;
    padding: 20px 20px 30px 40px;
    cursor:pointer;
    border-radius:0 10px 0 0;
    z-index:3;
}
#vcard:hover{
    background-color:#000;
    background-image:url(images/qrcode.png);
    background-repeat:no-repeat;
    background-position:50% 50%;
    color: rgba(0,0,0,0);
    height:50%;
    width:50%;
    border:0;
}
.myvcard{
    display: none;
    position:absolute;
    left:20px;
    bottom:20px;
}
#copyright{
    color:#777;
    position:absolute;
    right:2px;
    font-size:0.18em;
}