footer {
  margin-top: 1em;
  text-align: right;
  font-size: 0.8em;
}

  footer .social {
    overflow: hidden;
    margin-bottom: 1em;
  }

    footer .social .wrapper {
        float: left;
        box-sizing: border-box;
        padding: 0 1%;
        width: 20%;
    }

      footer .social .wrapper .box {
        display: block;
        border-radius: 0.5em;
        padding: 0.5em 0;
        text-align: center;

        transition: all 0.5s ease;
      }

        footer .social .wrapper .box:hover {
          text-decoration: none;
        }

        footer .social .wrapper .box.facebook {
            background: var(--color-social-facebook);
        }

            footer .social .wrapper .box.facebook:hover {
                background: var(--color-social-facebook-dark);
            }

        footer .social .wrapper .box.twitter {
            background: var(--color-social-twitter);
        }

            footer .social .wrapper .box.twitter:hover {
                background: var(--color-social-twitter-dark);
            }

        footer .social .wrapper .box.vk {
            background: var(--color-social-vk);
        }

            footer .social .wrapper .box.vk:hover {
                background: var(--color-social-vk-dark);
            }

        footer .social .wrapper .box.linkedin {
            background: var(--color-social-linkedin);
        }

            footer .social .wrapper .box.linkedin:hover {
                background: var(--color-social-linkedin-dark);
            }

        footer .social .wrapper .box.flattr {
            background: var(--color-social-flattr);
        }

            footer .social .wrapper .box.flattr:hover {
                background: var(--color-social-flattr-dark);
            }

        footer .social .wrapper .box svg {
            width: 1.5em;
            height: 1.5em;
        }

        footer .social .wrapper .box span {
            padding-left: 0;
            font-size: 1em;
            font-weight: bold;
            color: #ffffff;
        }