*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue';
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100dvh;
  display: flex;
  flex-wrap: wrap;
  place-content: start;
  overflow: hidden;

  div.square {
    width: 2vw;
    height: 2vw;
    flex-grow: 1;
    border: 1px solid #000;
    transition: background-color 1.5s ease;

    @media (width <=1111px) {
      width: 4vw;
      height: 4vw;
    }

    @media (hover: hover) {
      &:hover {
        transition: 0s;
        background-color: #000f;
      }
    }

    @media not (hover: hover) {
      &.active {
        transition: 0s;
        background-color: #000f;
      }
    }
  }
}