_footer.scss

.footer {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
  padding: 2rem 1rem;
  background-color: $secondary;
  color: $primary;
  font-size: $body + 2px;
  margin-top: 2vw;

  .title {
    text-transform: uppercase;
    font-weight: 700;
  }

  .content {
    display: flex;
    justify-content: center;
    gap: 1.5rem;

    a {
      color: $primary;
      font-size: ($icon / 2) - 2px;

      i {
        transition: transform 100ms ease-in, color 100ms ease-in;

        &:hover {
          transform: translateY(-2px) scale(1.15);
          color: $decoration;
        }
      }
    }
  }

  .copywrite {
    margin-top: 1rem;
    font-size: $body;

    .name {
      box-shadow: inset 0 -0.125rem 0 $decoration;
      transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
      color: $decoration;
      text-decoration: none;
      display: inline-block;

      &:hover {
        background-color: $decoration;
        color: $primary;
      }
    }
  }
}