@font-face {
  font-family: PKMN RBYGSC Regular;
  src: url("/fonts/PKMN RBYGSC.ttf");
}

@font-face { font-family: Px437 Cordata PPC-400; src: url("/fonts/Px437_Cordata_PPC-400.ttf"); }

@font-face { font-family: LanaPixel; src: url('/fonts/LanaPixel.ttf'); }

body {
  background-image: url("https://wolfrayetlaw.com/imgs/background/lightbg1.png");
  background-size: cover;
  background-attachment: fixed;
  image-rendering: pixelated;
  font-family: "Px437 Cordata PPC-400";
}

.container {
  display: grid;
  justify-content: center;
  grid-template-rows: auto;
  grid-template-columns: 400px 400px;
  grid-auto-flow: row;
  grid-auto-columns: 400px;
  grid-gap: 10px;
}

.intro {
  grid-row: 1 / 2;
  grid-column: 1 / 3;
}

.support {
  grid-row: 2 / 2;
  grid-column: 1 / 3;
}

.kanto {
  grid-row: 3 / 3;
  grid-column: 1 / 2;
}

.johto {
  grid-row: 3 / 3;
  grid-column: 3 / 2;
}

details {
  border: 1px solid black;
  padding: 5px;
}

summary {
  border-bottom: 1px solid black;
}

h1.generation {
  font-family: PKMN RBYGSC Regular;
  font-size: 1.3em;
}

h1.generation a {
  color: white;
  font-family: PKMN RBYGSC Regular;
  font-size: 1.3em;
  text-shadow:
    -3px -1px 0 black,
    3px -1px 0 black,
    -3px 1px 0 black,
    3px 1px 0 black,
    -2px -3px 0 black,
    2px -3px 0 black,
    -2px 3px 0 black,
    2px 3px 0 black;
  filter: drop-shadow(3px 3px 0 #8f8f8f);
  text-decoration: none;
}

h1.generation a:hover {
  font-size: 1.4em;
  text-decoration: none;
}

a,
figure {
  display: inline-block;
}

h4 {
  margin: 0;
  font-family: LanaPixel;
}

a {
  color: gray;
  font-weight: bold;
}

a:hover {
  font-size: larger;
}

p.current {
  border: 3px double black;
  padding: 10px;
  width: max-content;
}

figcaption {
  margin: 5px 0 0 0;
  font-family: "LanaPixel";
  font-weight: bold;
  font-variant: var(--heading-font);
  color: #2b2b2b;
}

figcaption.pkmn1 {
  width: 300px;
  padding-top: 10px;
}

figcaption strong {
  font-family: PKMN RBYGSC Regular;
}

figure img:hover {
  transform: scale(1.1);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
}
figure img {
  image-rendering: auto;
  transition: transform 0.2s;
  -webkit-transition: -webkit-transform 0.2s;
  -moz-transition: -moz-transform 0.2s;
  -o-transition: -o-transform 0.2s;
}

figure {
  padding: 5px;
}

.floating {
  animation-name: floating;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

@keyframes floating {
  0% {
    transform: translate(0, 0px);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, -0px);
  }
}

h1.support {
  font-size: 35px;
  font-family: LanaPixel;
  -webkit-background-clip: text;
  background-clip: text;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 100;
  font-weight: bold;
  text-shadow:
    -3px -1px 0 black,
    3px -1px 0 black,
    -3px 1px 0 black,
    3px 1px 0 black,
    -2px -3px 0 black,
    2px -3px 0 black,
    -2px 3px 0 black,
    2px 3px 0 black;
  filter: drop-shadow(3px 3px 0 #8f8f8f);
}

.pkmn1 {
  color: black;
  background: white;
  padding: 20px;
  background-clip: padding-box;
  border-radius: 25px;
  border-image-slice: 7;
  border-image-width: 14px;
  border-image-repeat: round;
  border-style: solid;
  border-color: transparent;
  image-rendering: pixelated;
  border-image-source: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAVAgMAAAA/TvYGAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAAxQTFRFAAAAAAAA////+Pj4EZhu1AAAAAR0Uk5TAP///7MtQIgAAABaSURBVHicY2T9zcDA+ptRUkeA4Yg6YyhrAMPq34xZ+nsYRdQYpbw/MLguY2TtLmBInc3IZnWAQfI5o+RzBgY2KxIodkuwPqgpkj4fGFyWo1ukLcBwVI0R4hYAN4IjlkoaqZsAAAAASUVORK5CYII=");
}