body h1.fire {
  color: #FFE6C8;
  text-shadow: #CD3C46 1px 0px, #CD3C46 -1px 0px, #CD3C46 0px -1px, #CD3C46 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #CD3C46 -1px 1px, #CD3C46 1px -1px, #CD3C46 -1px -1px;
  background: linear-gradient(#FFAF87, #DC414B);
}
body h1.electric {
  color: #F0F0D2;
  text-shadow: #CDB42D 1px 0px, #CDB42D -1px 0px, #CDB42D 0px -1px, #CDB42D 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #CDB42D -1px 1px, #CDB42D 1px -1px, #CDB42D -1px -1px;
  background: linear-gradient(#FFFA9B, #DCB40A);
}
body h1.rock {
  color: #F5EBDC;
  text-shadow: #968273 1px 0px, #968273 -1px 0px, #968273 0px -1px, #968273 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #968273 -1px 1px, #968273 1px -1px, #968273 -1px -1px;
  background: linear-gradient(#D2C3B4, #A58C78);
}
body h1.steel {
  color: #E6E6E6;
  text-shadow: #787887 1px 0px, #787887 -1px 0px, #787887 0px -1px, #787887 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #787887 -1px 1px, #787887 1px -1px, #787887 -1px -1px;
  background: linear-gradient(#BEC8D7, #7D879B);
}
body h1.dragon {
  color: #CDEBF0;
  text-shadow: #007896 1px 0px, #007896 -1px 0px, #007896 0px -1px, #007896 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #007896 -1px 1px, #007896 1px -1px, #007896 -1px -1px;
  background: linear-gradient(#B9E6F5, #0F87A5);
}
body h1.psychic {
  color: #FFE6F0;
  text-shadow: #D76996 1px 0px, #D76996 -1px 0px, #D76996 0px -1px, #D76996 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #D76996 -1px 1px, #D76996 1px -1px, #D76996 -1px -1px;
  background: linear-gradient(#FFB4DC, #E66E9B);
}
body h1.flying {
  color: #D7EBFA;
  text-shadow: #5578CD 1px 0px, #5578CD -1px 0px, #5578CD 0px -1px, #5578CD 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #5578CD -1px 1px, #5578CD 1px -1px, #5578CD -1px -1px;
  background: linear-gradient(#B6D7FF, #5A82F0);
}
body h1.grass {
  color: #CDFFA5;
  text-shadow: #419646 1px 0px, #419646 -1px 0px, #419646 0px -1px, #419646 0px 1px, rgba(0, 0, 0, 0.25) 2px 2px, #419646 -1px 1px, #419646 1px -1px, #419646 -1px -1px;
  background: linear-gradient(#69B964, #46A04B);
}
body nav ul li {
  width: 65px;
}
body #pk-opponents .pk-opponent {
  width: clamp(270px, 50vw, 415px);
}
body #pk-opponents .pk-opponent .pk-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #F0FAFF;
  color: #416973;
  border-radius: 10px;
  padding-block: 10px;
  width: 100%;
}
body #pk-opponents .pk-opponent .pk-panel img {
  width: 100px;
}
body #pk-opponents .pk-opponent .pk-panel .pk-sync-move {
  position: absolute;
  width: 30px;
  top: 0px;
  right: 10px;
}
body #pk-opponents .pk-opponent .pk-panel h2 {
  font-size: 16px;
  margin-block-start: 10px;
}
body #pk-opponents .pk-opponent .pk-panel .pk-advice-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  cursor: pointer;
}
body #pk-opponents .pk-opponent .pk-panel .pk-advice-button h3 {
  font-family: Geometric;
  font-size: 14px;
  color: #FFFFFF;
  margin: 0;
}
body #pk-opponents .pk-opponent .pk-panel .pk-advice-button img {
  position: absolute;
  right: 0;
  width: 20px;
}
body #battles h2 {
  margin-block-end: 20px;
}
body #battles #battle-list .battle .battle-info .battle-recap {
  display: none;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  background-color: #D2EBEB;
  border-radius: 10px;
  margin: 5px;
  padding: 5px;
}
@media screen and (min-width: 1024px) {
  body #battles #battle-list .battle .battle-info .battle-recap {
    width: 620px;
  }
}
body #battles #battle-list .battle .battle-info .battle-recap a {
  width: 55px;
  text-decoration: none;
  font-size: 12px;
  font-family: Geometric;
  text-align: center;
  color: #FFFFFF;
  background-color: #87AFBE;
  border: 2px solid #C8D7DC;
  border-radius: 10px;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.25);
  padding-block: 5px;
  margin: 2px;
  transition: 0.2s;
}
body #battles #battle-list .battle .battle-info .battle-recap a:hover {
  transform: scale(1.02);
}
body #battles #battle-list .battle .battle-info .battle-recap a.version {
  position: relative;
  margin-block: 10px;
}
body #battles #battle-list .battle .battle-info .battle-recap a .name-version {
  position: absolute;
  top: -10px;
  right: 0;
  font-size: 8px;
  font-style: italic;
  color: #3C8296;
}