:root {
  --grass: #00923880;
  --fire: #e73b0c7c;
  --water: #4591c47c;
  --electric: #fbd72b7c;

  --pokecolor: black;
}

body {
  font-family: consolas, monospace;
  font-size: 0.6em;
}

header {
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-inline: 10px;
  z-index: 10;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: rgb(127, 200, 155);
  background: linear-gradient(
    90deg,
    rgba(127, 200, 155, 0.3) 0%,
    rgba(243, 159, 136, 0.3) 50%,
    rgba(164, 201, 226, 0.3) 100%
  );
}

.hero {
  flex: 1 1 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  flex-direction: row;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr 1fr;
  gap: 1em;
}

.pokemon-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  gap: 0.5em;

  justify-content: space-between;
  align-items: center;

  border: 3px solid var(--pokecolor);
  border-radius: 20px;

  box-shadow: 5px 5px 3px 0px rgba(0, 0, 0, 0.3);
}

.kanto {
  grid-column: 1 / -1;
  background: rgb(80, 149, 245);
  background: linear-gradient(
    90deg,
    rgba(80, 149, 245, 0.2) 0%,
    rgba(247, 211, 51, 0.2) 49%,
    rgba(244, 77, 11, 0.2) 100%
  );
}

.johto {
  grid-row: 2 / -1;
  flex-direction: column;

  background: rgb(214, 101, 248);
  background: linear-gradient(
    180deg,
    rgba(214, 101, 248, 0.2) 0%,
    rgba(40, 40, 45, 0.2) 100%
  );
}

.sinnoh {
  grid-column: 2 / -1;

  background: rgb(82, 233, 95);
  background: linear-gradient(
    90deg,
    rgba(82, 233, 95, 0.2) 0%,
    rgba(50, 206, 230, 0.2) 100%
  );
}

.kalos {
  background: rgba(251, 54, 120, 0.2);
}

.hoenn {
  background: conic-gradient(
    from 320deg at 50% 50%,
    rgba(80, 149, 245, 0.2),
    rgba(247, 211, 51, 0.2),
    rgba(244, 77, 11, 0.2),
    rgba(251, 54, 120, 0.2),
    rgba(50, 206, 230, 0.2),
    rgba(82, 233, 95, 0.2),
    rgba(40, 40, 45, 0.2),
    rgba(214, 101, 248, 0.2),
    rgba(80, 149, 245, 0.2)
  );
}

a {
  color: black;
  text-decoration: none;
}

a > img {
  display: inline-block;
}

.pokemon {
  width: 100px;
  padding: 1em;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  aspect-ratio: 1.67;
}

@media (min-width: 768px) {
  body {
    font-size: 1em;
  }
  .pokemon {
    width: 200px;
  }
}

.pokemon img {
  flex: 1 1 100%;
  width: 100%;
}

.pokemon:hover img:nth-child(1) {
  opacity: 0;
}

.pokemon img:nth-child(2) {
  position: absolute;
  top: 0;
  opacity: 0;
}

.pokemon:hover img:nth-child(2) {
  opacity: 1;
}

.w-\[100px\] {
  width: 100px;
}

.pokemon img[src$="gif"] {
  width: 100%;

  padding: 28%;

  /* width: auto;
  object-fit: scale-down; */
}

#glaceon img[src$="gif"] {
  padding: 30% 15% 0 15%;
}

#leafeon img[src$="gif"] {
  padding: 20% 15% 0 25%;
}

#flareon img[src$="gif"] {
  padding: 20% 10% 0 26%;
}

#espeon img[src$="gif"] {
  padding: 26% 15% 0 28%;
}