body {
  line-height: 1.5;
}

.container {
  max-height: 75vh;
  border: 0.25rem solid;
  overflow: auto;
}

table {
  border-collapse: collapse;
  min-width: 100%;
}

caption {
  padding: 0.125rem;
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: #fff;
  text-align: center;
}

tbody {
  padding-top: 6px;
}

th,
td {
  padding: 0.125rem 0.5rem;
  text-align: left;
}

.name {
  min-width: 10rem;
}
.description {
  min-width: 20rem;
}
.resources {
  min-width: 10rem;
}

/* Sticky behavior */
th[scope='row'],
thead th:first-child {
  position: sticky;
  left: 0;
  background-color: lightgreen;
  /* Non-scrolling border */
  background-image: linear-gradient(
    to right,
    transparent calc(100% - 0.0625rem),
    currentColor calc(100% - 0.0625rem)
  );
}
th[scope='col'],
thead th:first-child {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: lightpink;
  border-top: 0.0625rem solid;
  /* Non-scrolling border */
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - 1px),
    currentColor calc(100% - 1px)
  );
}
thead th:first-child {
  z-index: 2;
  background-image: linear-gradient(
      to right,
      transparent calc(100% - 1px),
      currentColor calc(100% - 1px)
    ),
    linear-gradient(
      to bottom,
      transparent calc(100% - 1px),
      currentColor calc(100% - 1px)
    );
}
