td {
  word-wrap: break-word;
  max-width: 80px;
}

td {
  vertical-align: bottom;
  padding: 0px;
}

th {
  position: sticky;
  top: 0; /* Don't forget this, required for the stickiness */
  vertical-align: top;
  background-color: black;
  z-index: 1;
  padding: 0px;
}

th:first-child {
  position: static;
  top: auto;
}

table {
  border-spacing: 0px;
}

img {
  margin: 0;
}

td:hover {
  width: 160px;
  max-width: 160px;
}

.boxes tr td a {
  display: inline-block;
  margin-right: 10px;
}

.boxes tr td a img {
  filter: drop-shadow(8px -8px gold);
}

.boxes tr td a.canonical img  {
  filter: drop-shadow(8px -8px red);
}

.boxes tr td a:has(img):before, .boxes tr td a:has(img):after {
  content:'';
  position: relative;
  display: block;
}

.boxes tr td a:has(img):before {
  height: 100%;
  width: 0;
  top:0;
  border-bottom:8px solid gold;
  border-left:8px solid transparent;
}

.boxes tr td .canonical:has(img):before {
  border-bottom:8px solid red;
}

.boxes tr td a:has(img):after {
  height: 100%;
  width: 0;
  top: -8px;
  left: 100%;
  border-left:8px solid gold;
  border-bottom:8px solid transparent;
  transform: rotate(0deg);
}

.boxes tr td .canonical:has(img):after {
  border-left:8px solid red;
}