body {
  margin: 0;
  color: #ddd;
  background-color: #222;
}

main {
  position: relative;
  width: 300px;
  height: 300px;
  --size: 45px;
  --line: 3px; 
  --delta: 50px;
  overflow: hidden;
}

div {
  /* --size: 15vmin;
  --line: 1vmin;
  --delta: calc(var(--size) + var(--line) * 2); */

  position: relative;
  top: var(--delta);
  left: var(--delta);
  width: var(--size);
  height: var(--size);
  border: var(--line) solid grey;

  &:hover {
    color: red;
    border-color: orange;
    counter-increment: divs;
  }

  &::after {
    content: attr(title) " " counter(divs);
  }
}

/* Show the GitHub logo */
a.github {
  width: 0;
  height: 0;

  img {
    position: absolute;
    right: 3px;
    bottom: 3px;
    width: 32px;
    height: 32px;
    filter: grayscale(1);
    opacity: 0.25;

    &:hover {
      opacity: 1;
    }
  }
}