.♥, html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

a, a:link, a:visited, a:hover, a:active {
  color: #000;
  text-decoration: none;
}

.♥ {
  display: table;
}

.♥ li {
  list-style: none;
  text-align: center;
}

.♥ li a {
  -o-transition:.5s;
  -ms-transition:.5s;
  -moz-transition:.5s;
  -webkit-transition:.5s;
  /* ...and now for the proper property */
  transition:.5s;
}

.♥ li.email:hover a {
  color: #EA4C89;
}

.♥ li.twitter:hover a {
  color: #4099FF;
}

.♥ li.github:hover a {
  color: #614381;
}

.♥ li.xing:hover a {
  color: #076f71;
}

@media only screen and (min-width: 480px) {
  
  .♥ {
    display: table;
    height: 100%;
  }
  
  .♥ li {
    display: table-cell;
    vertical-align: middle;
    width: 25%;
    font-size: 5em;
    font-size: 15vw;
  }
  
}


@media only screen and (min-width: 768px) {
  
  .♥ li {
    font-size: 8em;
    font-size: 25vmin;
  }
  
}


@media only screen and (max-width: 479px) {

  .♥ {
    display: table;
    height: 100%;
  }

  .♥ li {
    display: table-row;
    height: 25%;
    font-size: 5em;
    font-size: 18vh;
  }
  
  .♥ li a {
    display: table-cell;
    vertical-align: middle;
  }
  
}