#ubx-exist {
  & td {
    outline: 1px solid #05472A;
   }
  & .ubx-img {
    background-color: #2E8B57;
  }
  & .ubx-txt {
    background-color: #9ACD32;
  }
}

#ubx-cat {
  & td {
      outline: 1px solid #05472A;
   }
  & .ubx-img {
    background-color: #E34234;
  }
  & .ubx-txt {
    background-color: #ED9121;
  }
}

#bio {
  grid-column-end: span 3;
  grid-row-end: span 4;
}

#socials {
  grid-row-end: span 2;
  & li { display: inline; }
}

.paperlink {
  background-color: white;
  grid-row-end: span 2;
  padding-bottom: -20px;

  background-clip: padding-box;
  border-style: solid;
  border-width: 10px;
  border-color: transparent;
  border-image: url("/resources/imgs/rough_border.png")
    20 fill round;

  &:hover {
    transform: rotate(-0.008turn) scale(1.1);
    & img {
      filter: brightness(0) saturate(100%) invert(83%) sepia(43%) saturate(6401%) hue-rotate(349deg) brightness(99%) contrast(87%);
    }
  }
}

#okw-notice {
  grid-column-end: span 3;
  grid-row-end: span 2;
}

#favs {
  grid-column-end: span 4;
}

#colors {
  display: flex;
  justify-content: space-evenly;
  flex-wrap: wrap;
}
.swatch {
  width: 66px;
  border: 1px solid #123425;
  border-radius: 3px;
  background-color: #fff;
  padding: 3px;
  margin: 1px;
  font-size: 10pt;
  filter: drop-shadow(4px 4px 0 #123425);
}
.colorblock {
  border-bottom: 1px solid #000;
  height: 66px;
  margin: -3px;
  margin-bottom: 5px;
}
.swatch:nth-child(even) {
  transform: rotate(-0.004turn);
}
.swatch:nth-child(2n) {
  transform: rotate(-0.004turn) translateY(-4px);
}
.swatch:nth-child(odd) {
  transform: rotate(0.004turn);
}
.swatch:nth-child(6n-3) {
  transform: rotate(0.004turn) translateX(-3px) translateY(3px);
}
.swatch:nth-child(6n) {
  transform: rotate(-0.004turn) translateX(-3px);
}

#basement-horse {
  grid-column-end: span 4;
  margin-top: 3em;
  text-align:center;
}