@font-face {
  font-family: "GameBoy Advanced";
  src: url(../fonts/Pokemon\ GB.ttf);
}
.selector {
  position: relative;
  display: flex;
  justify-content: space-evenly;
}

.header {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: center;
  justify-items: center;
}
@media only screen and (min-width: 768px) {
  .header {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
}
.header__title {
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 5vh 0 0 0;
}
.header-gen {
  text-align: center;
  padding: 5vh 5vw;
}
.header-gen__dropdown {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 10px 25px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  background-color: #1d1d1d;
}
.header-gen__dropdown:hover {
  background-color: #5f5f5f;
}
.header-gen-list {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
  padding: 10px 25px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.header-gen-list__item {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 15px 50px;
  color: black;
  font-weight: 700;
  background-color: white;
  border-radius: 15px;
}
.header-gen-list__item:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}
.header-type {
  text-align: center;
  padding: 5vh 5vw;
}
.header-type__dropdown {
  padding: 10px 25px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  background-color: #1d1d1d;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
}
.header-type__dropdown:hover {
  background-color: #5f5f5f;
}
.header-type-list {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  display: none;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
}
.header-type-list__item {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  gap: 15px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  cursor: pointer;
  padding: 10px 16px;
  max-height: 90px;
  min-width: 100px;
  color: white;
  text-transform: uppercase;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}
.header-type-list__item:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: white;
}
.header-type-list__item img {
  width: 15px;
}
.header-search {
  display: flex;
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  height: 40px;
  padding: 5vh 5vw;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  background-color: #1d1d1d;
}

.list-visible-type {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  position: absolute;
  background-color: #9f9f9f;
  z-index: 100;
}
@media only screen and (min-width: 1024px) {
  .list-visible-type {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media only screen and (min-width: 1440px) {
  .list-visible-type {
    grid-template-columns: repeat(4, 1fr);
  }
}

.list-visible-gen {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, 1fr);
  position: absolute;
  background-color: #9f9f9f;
  z-index: 100;
}

.pokeball {
  position: absolute;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  width: 192px;
  height: 192px;
  background: radial-gradient(white 16px, black 17px 18px, white 19px 24px, black 25px 32px, transparent 33px), linear-gradient(to bottom, red 0 80px, black 81px 96px, white 97px 100%);
  border-radius: 50%;
  border: 8px solid black;
}

.loading {
  animation: loading 1s infinite;
}

.visible {
  display: flex;
}

.background {
  position: absolute;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
  display: grid;
  justify-items: center;
  align-items: center;
}

@keyframes loading {
  25% {
    transform: rotate(60deg);
  }
  50% {
    transform: rotate(120deg);
  }
  75% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes bounce {
  20% {
    transform: translateY(-6px);
  }
  40% {
    transform: translateY(0px);
  }
  60% {
    transform: translateY(-2px);
  }
  80% {
    transform: translateY(0px);
  }
}
@keyframes alive {
  25% {
    transform: rotate(10deg);
    transform: translate(15px 5px);
  }
  75% {
    transform: rotate(-10deg);
    transform: translate(15px -5px);
  }
}
#pokedex {
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
  padding: 5vh 0;
}
@media only screen and (min-width: 425px) {
  #pokedex {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  }
}

.card-subtitle {
  color: white;
  font-family: "GameBoy Advanced", sans-serif;
  text-transform: uppercase;
}

.type {
  display: flex;
  justify-content: center;
  gap: 25%;
}
.type span {
  display: flex;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.type span img {
  width: 15px;
}

.container {
  padding: 1% 5%;
  margin: 0 auto;
}

h1 {
  text-transform: uppercase;
  text-align: center;
  font-size: 2rem;
}

.card {
  list-style: none;
  padding: 10%;
  background-color: #f4f4f4;
  color: #222;
  text-align: center;
  border: 5px solid rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  cursor: pointer;
}
.card:hover {
  animation: bounce 0.5s linear;
}
.card:hover .card-image {
  animation: alive 2s infinite;
}
.card-title {
  text-transform: uppercase;
  font-size: 1.5rem;
  font-weight: normal;
  margin-bottom: 0;
}
.card-image {
  height: 180px;
}

span {
  display: flex;
  justify-content: space-around;
}

.normal {
  background-color: #aa9;
}

.fire {
  background-color: #f42;
}

.water {
  background-color: #39f;
}

.electric {
  background-color: #fc3;
}

.grass {
  background-color: #7c5;
}

.ice {
  background-color: #6cf;
}

.fighting {
  background-color: #b54;
}

.poison {
  background-color: #a59;
}

.ground {
  background-color: #db5;
}

.flying {
  background-color: #89f;
}

.psychic {
  background-color: #f59;
}

.bug {
  background-color: #ab2;
}

.rock {
  background-color: #ba6;
}

.ghost {
  background-color: #66b;
}

.dragon {
  background-color: #76e;
}

.dark {
  background-color: #754;
}

.steel {
  background-color: #aab;
}

.fairy {
  background-color: #e9e;
}

.all {
  background-color: #fff;
  color: black;
}

.footer {
  display: grid;
  grid-template-columns: 4fr 1fr;
  align-items: center;
  justify-content: center;
  background-color: rgb(200, 200, 200);
  padding: 2.5vh 2.5vw;
  width: 100%;
  position: fixed;
  bottom: 0px;
}
.footer-info {
  color: black;
  font-size: 1rem;
  font-weight: 700;
}
.footer-info a {
  font-size: 1rem;
  color: black;
  font-weight: 700;
}

.popUpContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 100;
  gap: 5px;
  position: fixed;
  overflow: hidden;
  background-color: #f4f4f4;
  color: black;
  text-align: center;
  align-items: center;
  padding: 20px 20px;
  border: 25px solid rgba(0, 0, 0, 0.5);
  border-radius: 15px;
  font-weight: 700;
  width: 60%;
}
@media only screen and (min-width: 1440px) {
  .popUpContainer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2fr 1fr 1fr 1fr 2fr;
    justify-items: center;
  }
}
.popUpContainer h2 {
  display: flex;
  font-size: 50px;
  grid-column-start: 1;
  grid-column-end: 4;
  grid-row-start: 1;
}
.popUpContainer-nameId {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  text-transform: uppercase;
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 2;
  grid-row-end: 3;
}
.popUpContainer__close {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fefefe;
  padding: 5px;
  border: 1px solid #888;
  width: 10%;
  border-radius: 10px;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 1;
  grid-row-end: 2;
  cursor: pointer;
}
@media only screen and (min-width: 1440px) {
  .popUpContainer__close {
    padding: 20px;
  }
}
.popUpContainer__height {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 3;
  grid-row-end: 4;
}
.popUpContainer__weight {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 4;
  grid-row-end: 5;
}
.popUpContainer__graph {
  box-sizing: content-box;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 2;
  grid-row-end: 5;
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  padding: 15px;
  height: 200px;
}
.popUpContainer__sprite {
  height: 100%;
  grid-column-start: 3;
  grid-column-end: 4;
  grid-row-start: 2;
  grid-row-end: 5;
}
.popUpContainer__flavor {
  display: flex;
  margin: auto;
  grid-column-start: 1;
  grid-column-end: 4;
  padding: 0 10vw;
}
.popUpContainer img:hover {
  animation: bounce 0.5s linear;
}

.modal {
  display: none;
  position: fixed;
  justify-content: center;
  align-items: center;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.8);
}

.popup-visible {
  display: flex;
  background-color: rgba(0, 0, 0, 0.8);
}

html {
  scroll-behavior: smooth;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  list-style: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #7B0002;
  font-family: "GameBoy Advanced", sans-serif;
  color: white;
}

#goToTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: rgb(155, 0, 0); /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}
#goToTop:hover {
  background-color: #555;
}/*# sourceMappingURL=pokeapi.css.map */