/* Recolours for homepage */

h1 { border-bottom-color: var(--col-extra); border-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-extra) 50%) 1; }

a { color: var(--col-extra) }
a:hover { background-image: linear-gradient(-45deg, #00ffff, #00B5ff 25%, var(--col-extra)); }

blockquote p { border-image: linear-gradient(to top, #0ff, #00b5ff 20%, var(--col-extra)) 1; }

pre { border-image: linear-gradient(-45deg, #00ffff, #00b5ff 20%, var(--col-extra)) 1; }

table { border-image: linear-gradient(-45deg, #00ffff, #00b5ff 20%, var(--col-extra)) 1; }

/* Trinket styling */

h2.tr-head { margin-bottom: 0.2em; }

td.tr-imag { background-color: #bcbcbd; width: 48px; padding: 8px; }
td.tr-name { font-weight: bold; }
td.tr-desc { width: 40ch; }

img.tr-imag { border: 1px solid #2b2b2b; border-radius: 6px; padding: 8px; }
img.tr-afty { display: inline; vertical-align: sub; }

/* Button styling */

section { display: grid; grid-template-columns: repeat(5, 88px); justify-items: center; justify-content: center; gap: 1px; }
section > a { height: 31px; }

/* Pokémon styling */

:root { --cols: 12; }
@media (width < 1700px) { :root { --cols: 9; } }
@media (width < 1336px) { :root { --cols: 6; } }
@media (width < 1000px) { :root { --cols: 3; } }
@media (width < 550px)  { :root { --cols: 2; } }

section#mons {  display: grid; grid-template-columns: repeat(var(--cols), auto); justify-items: center; justify-content: center;
  width: 99vw; grid-gap: 2px; }

aside#jump { position: fixed; float: left; top: 230px; border-left: solid 3px transparent;
  border-image: linear-gradient(-45deg, #00ffff, #00b5ff 20%, var(--col-extra)) 1; }

@media (width < 550px)  { aside#jump { top: 270px; } }
@media (height < 550px) { aside#jump { top: 65px; right: 10px; } }

aside#jump > h1 { font-family: 'IBM Plex Sans', sans-serif; color: var(--col-txt); font-size: unset; border: unset; margin: 1ex; }

aside#jump > p { margin: 1ex; }

/* aside#jump > p > a { color: var(--col-txt); } */

div.mon > p { text-align: center; font-size: smaller; letter-spacing: 0.2px; }

div#p0001 > img, div#p0152 > img, div#p0252 > img, div#p0387 > img, div#p0494 > img, div#p0650 > img, div#p0722 > img, div#p0810 > img, div#p0906 > img {
  border-left: solid 2px #007fff; border-image: linear-gradient(-45deg, #00ffff, #00b5ff 20%, var(--col-extra)) 1; }