html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.footer-push {
    flex-grow: 1;
}

.footer__socials {
  .social-icon {
    width: 2rem;
    transition: 0.2s all;
  }
  .social-icon.mastodon {
    fill: #563CCF;
  }
  .social-icon:hover {
    opacity: 0.8;
  }
}

@media (max-width: $md-breakpoint) {
  .footer__socials {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 0 !important;
    li {
      margin-left: 0 !important;
    }
  }
}