body {
    /* Elimina el margen exterior predeterminado del navegador */
  margin: 0;
  
  /* Elimina el relleno interior predeterminado del navegador */
  padding:0;
  
  /* Establece el color de fondo general en un tono gris oscuro */
  background: #262626;
  }
/* Selecciona la lista no ordenada (ul) que contiene los iconos */
ul {
  /* Activa Flexbox para colocar los elementos de la lista en una línea horizontal */
  display: flex;
  
  /* Posiciona la lista de manera absoluta, sacándola del flujo normal del documento */
  position: absolute;
  
  /* Empuja el borde superior de la lista al 50% de la altura de la pantalla */
  top: 50%;
  
  /* Empuja el borde izquierdo de la lista al 50% del ancho de la pantalla */
  left: 50%;
  
  /* Mueve la lista hacia arriba y hacia la izquierda un 50% de su propio tamaño para centrarla perfectamente */
  transform: translate(-50%, -50%);
}
/* Selecciona cada elemento individual de la lista (los botones) */
ul li {
  
  /* Elimina las viñetas o puntos predeterminados de la lista */
  list-style: none;
}
/* Selecciona los enlaces (a) que están dentro de los elementos de lista */
ul li a {
  
  /* Establece un ancho fijo de 80 píxeles para el botón */
  width: 80px;
  
  /* Establece una altura fija de 80 píxeles para el botón */
  height: 80px;
  
  /* Aplica un color de fondo blanco al botón */
  background-color: #fff;
  
  /* Centra el icono horizontalmente dentro del botón */
  text-align: center;
  
  /* Iguala la altura de la línea al alto del botón (80px) para centrar el icono verticalmente */
  line-height: 80px;
  
  /* Define el tamaño del icono a 35 píxeles */
  font-size: 35px;
  
  /* Agrega un margen de 0 arriba/abajo y 10 píxeles a los lados para separar los botones entre sí */
  margin: 0 10px;
  
  /* Convierte el enlace en un bloque para que respete las medidas de ancho y alto */
  display: block;
  
  /* Redondea todos los bordes al 50% para convertir el cuadrado en un círculo perfecto */
  border-radius: 50%;
  
  /* Permite que los pseudo-elementos (::before) se posicionen en relación a este botón */
  position: relative;
  
  /* Oculta cualquier contenido o color que se desborde del límite del círculo */
  overflow: hidden;
  
  /* Crea un borde blanco sólido de 3 píxeles alrededor del círculo */
  border: 3px solid #fff;
  
  /* Establece el nivel de apilamiento en 1 (el fondo blanco quedará en la capa base) */
  z-index: 1;
}
/* Selecciona específicamente el elemento que tiene la clase "icon" (los íconos de FontAwesome) */
ul li a .icon {
  
  /* Permite que el ícono se posicione por encima del fondo de color mediante el z-index */
  position: relative;
  
  /* Pinta el icono del mismo color gris oscuro que el fondo de la página */
  color: #262626;
  
  /* Agrega una transición suave de medio segundo (0.5s) para animar cambios de color o giro */
  transition: .5s;
  
  /* Establece el nivel de apilamiento en 3 para asegurar que el ícono siempre esté por encima del fondo y el borde */
  z-index: 3;
}
/* Selecciona los íconos cuando el usuario pasa el mouse por encima del botón (hover) */
ul li a:hover .icon {
  
  /* Cambia el color del ícono a blanco para que contraste con el fondo de color que va a aparecer */
  color: #fff;
  
  /* Gira el ícono 360 grados en el eje Y (como si diera la vuelta sobre sí mismo como una tarjeta) */
  transform: rotateY(360deg);
}
/* Crea un pseudo-elemento invisible antes del contenido del enlace (este será el fondo de color que sube) */
ul li a:before {
  
  /* Contenido obligatorio para que el pseudo-elemento exista; al estar vacío no muestra texto */
  content: "";
  
  /* Lo posiciona de forma absoluta para poder moverlo libremente dentro del botón */
  position: absolute;
  
  /* Lo empuja al 100% de la parte superior (lo esconde completamente abajo del botón) */
  top: 100%;
  
  /* Lo alinea al borde izquierdo del botón */
  left: 0;
  
  /* Le da un ancho del 100% para que cubra todo el botón */
  width: 100%;
  
  /* Le da una altura del 100% para que cubra todo el botón */
  height: 100%;
  
  /* Le asigna un color de fondo rojo (este es el color por defecto, que será sobrescrito más abajo) */
  background: #f00;
  
  /* Agrega una transición suave de medio segundo para que el movimiento de subida sea animado */
  transition: .5s;
  
  /* Establece el nivel de apilamiento en 2 (quedará por encima del fondo blanco z:1, pero por debajo del ícono z:3) */
  z-index: 2;
}
/* Selecciona el pseudo-elemento cuando el usuario pasa el mouse sobre el botón */
ul li a:hover:before {
  
  /* Cambia la posición superior a 0, lo que hace que el fondo de color "suba" y cubra el botón blanco */
  top: 0;
}
/* Selecciona el primer botón de la lista (Facebook) y su pseudo-elemento */
ul li:nth-child(1) a:before{
  
  /* Sobrescribe el color rojo predeterminado con el azul oficial de Facebook */
  background: #3b5999;
  
/* Cierra el bloque de estilos para Facebook */
}
/* Selecciona el segundo botón de la lista (Twitter) y su pseudo-elemento */
ul li:nth-child(2) a:before{
  
  /* Sobrescribe el color con el azul cielo oficial de Twitter */
  background: #55acee;
  
/* Cierra el bloque de estilos para Twitter */
}
/* Selecciona el tercer botón de la lista (LinkedIn) y su pseudo-elemento */
ul li:nth-child(3) a:before {
  
  /* Sobrescribe el color con el azul oficial de LinkedIn */
  background: #0077b5;
  
/* Cierra el bloque de estilos para LinkedIn */
}
/* Selecciona el cuarto botón de la lista (Google Plus) y su pseudo-elemento */
ul li:nth-child(4) a:before {
  
  /* Sobrescribe el color con el rojo oficial de Google Plus */
  background: #dd4b39;
}