/**
 * The base file that should be imported by every file.
 * There should be no CSS generation in this or from imported scss files at all!
 */
/**
 * Library
 */
/**
 * Variables and functions
 */
.socials {
  display: flex;
  flex-wrap: wrap;
  gap: 1em; }
  .socials .social {
    display: inline-block;
    font-size: 20.65105px; }
    @media (max-width: 980px) {
      .socials .social {
        flex: 1;
        background: rgba(255, 255, 255, 0.13);
        border-radius: 10px;
        text-align: center;
        padding: .2em 1em; } }
    .socials .social:last-child {
      margin-right: 0; }
    .socials .social a {
      text-decoration: none;
      color: #00B6E8;
      transition: color .3s ease-in-out, border-color .3s ease-in-out; }
      .socials .social a:hover {
        color: #ffc840 !important;
        text-decoration: none !important; }

@media (max-width: 980px) {
  footer .socials {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 250px;
    margin: 2em auto 0; } }

footer .socials .social {
  background: transparent;
  padding: 0; }
  footer .socials .social a {
    width: 60px;
    height: 60px;
    font-size: 25px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff; }
    @media (min-width: 981px) {
      footer .socials .social a {
        width: 30px;
        height: 30px;
        font-size: 12px; } }
    footer .socials .social a:hover {
      border-color: #ffc840; }

/*# sourceMappingURL=socials.css.map */