footer {
  position: relative;
}
footer ul{
  list-style: none;
  display: flex;
  padding: 0px;
  gap: 1rem;
  margin-top: -.1em;
  margin-bottom: 0px;
}
footer ul li svg{
  height: 18px;
  transition-property: fill;
  transition-duration: .3s;
}
footer ul li a{
  transition-property: opacity;
  transition-duration: .3s;
}
footer .button-top{
  position: absolute;
  bottom: 25px;
  right: 25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: transparent;
  transition-property: border, background;
  transition-duration: .3s;
}
footer .button-top svg{
  height: 12px;
  margin-top: -0.25rem;
}
footer .footer--copyright{
  padding-right: 50px
}

{# DEFAULT COLORS #}
footer{
  background: var(--secondary)
}
footer, footer a{
  color: var(--white)
}
footer ul li a svg{
  fill: var(--white)
}
footer a:hover{
  color: var(--link_color)
}
footer ul li a:hover svg{
  fill: var(--link_color)
}
footer .button-top{
  border: 1px solid var(--white);
  background: transparent;
}
footer .button-top:hover{
  border: 1px solid var(--primary);
  background: var(--primary);
}
footer .button-top svg{
  fill: var(--white);
}


@media (min-width: 767px){
  footer .footer--copyright{
    padding-right: 0px
  }
}