.page-footer {
  @include responsive-container;
  margin-top: 1rem;

  .squares {
    display: grid;
    grid-template-columns: min-content repeat(var(--squares, 5), 1fr) min-content;
    height: 1rem;
    margin-bottom: 1rem;

    button {
      align-items: center;
      border: none;
      display: flex;
      font-family: monospace;
      font-size: 1rem;
      height: 100%;
      justify-content: center;
      width: 2rem;
    }

    .square {
      height: 100%;

      &.active {
        opacity: 100%;
      }

      &:not(.active) {
        opacity: 0%;
        transition: opacity var(--square-transition, 5s);
      }
    }
  }

  .technologies {
    background-color: #333;
    padding: 1rem;
  }
}