@font-face {
  font-family: "OpenSans";
  src: url("../fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype") tech("variations"), url("../fonts/OpenSans-VariableFont_wdth_wght.ttf") format("truetype-variations"), url("../fonts/OpenSans-Regular.ttf") format("truetype");
  font-weight: 300 800;
  font-stretch: 75% 100%;
}
@font-face {
  font-family: "TangoSans";
  src: url("../fonts/TangoSans.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
#dexList {
  display: flex;
  flex-direction: column;
  margin: 1% auto;
  max-width: 1200px;
  background-color: #555;
  padding: 5px;
  border-radius: 10px;
}
#dexList p {
  align-self: center;
  text-wrap: wrap;
}
#dexList a {
  text-decoration: none;
}
#dexList a .row {
  min-height: 81px;
  background-color: transparent;
  transition: background-color 0.1s ease-in-out;
}
#dexList a .row:hover {
  background-color: #888;
}
#dexList a .row:hover .hpColor {
  background-color: #ff8c8c;
}
#dexList a .row:hover .atkColor {
  background-color: #f4c7a8;
}
#dexList a .row:hover .defColor {
  background-color: #f9e9a9;
}
#dexList a .row:hover .spaColor {
  background-color: #d0dbf4;
}
#dexList a .row:hover .spdColor {
  background-color: #d6ffbf;
}
#dexList a .row:hover .speColor {
  background-color: #f9c5d6;
}
#dexList ol {
  margin: 5px 0px;
  padding-inline-start: 19px;
}
#dexList ol li::marker {
  font-size: 1.4rem;
  color: #eee;
}
#dexList ol li:nth-child(3)::marker, #dexList ol li.hiddenAbility::marker {
  content: "H. ";
}
#dexList .row {
  display: grid;
  grid-template-columns: 50px repeat(3, 1fr) repeat(7, 70px);
  align-items: center;
  border-bottom: 2px solid #777;
}
#dexList .pkmIconWrapper {
  display: flex;
  height: 45px;
}
#dexList .sticky {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #555;
  max-width: 1200px;
}
#dexList:has(.sticky) {
  padding-top: 40px;
}
#dexList .sortable {
  display: flex;
  align-items: center;
  cursor: pointer;
}
#dexList .statDiv {
  display: flex;
  justify-content: center;
  align-self: stretch;
}
#dexList .statDiv p {
  font-size: 2rem;
  font-weight: 600;
}
#dexList .statDiv:not(.noColor) p, #dexList .statDiv:not(.noColor) h3, #dexList .statDiv:not(.noColor) h4 {
  color: black;
}
#dexList .statDiv.hpColor, #dexList .statDiv.atkColor, #dexList .statDiv.defColor, #dexList .statDiv.spaColor, #dexList .statDiv.spdColor, #dexList .statDiv.speColor {
  transition: background-color 0.1s ease-in-out;
}
#dexList .statDiv.hpColor {
  background-color: #ff5959;
}
#dexList .statDiv.atkColor {
  background-color: #f5ac78;
}
#dexList .statDiv.defColor {
  background-color: #fae078;
}
#dexList .statDiv.spaColor {
  background-color: #9db7f5;
}
#dexList .statDiv.spdColor {
  background-color: #a7db8b;
}
#dexList .statDiv.speColor {
  background-color: #fa92b2;
}