.social {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

#header-hat .social {
  padding: 0 0.5em 0 0.5em;
}

#header-hat .social a {
  color: var(--colorWhite);
}

.bright #header-hat .social a {
  color: var(--colorBlack);
}

.social li:not(:first-child) {
  margin-left: 0.5em;
}

.footer .social {
  margin: 1em auto;
  font-size: 20px;
}

@media screen and (max-width:480px) {
  #header-hat .social {
    display: none;
  }
}