/* Scrollbar */

::-webkit-scrollbar {
  width: 20px;
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

.navbar .navbar-brand img {
  max-height: 64px;
}

.pokemon-card {
  border-width: 0;
  min-height: 180px;
  min-width: 272px;
  transition: transform 0.15s ease-in-out;
  background-image: url("img/pokeball-white.png");
  background-repeat: no-repeat;
  background-position-x: 125%;
  background-position-y: 190%;
  background-size: 60%;
}

.pokemon-card:hover:not(.big) {
  transform: translateY(-0.25rem);
}

.pokemon-card.big {
  height: 80vh;
  max-height: 700px;
  max-width: 450px;

  background-position-x: 150px;
  background-position-y: 150px;
  background-size: 70%;
}

@media (max-width: 451px) {
  .pokemon-card.big {
    height: 100vh;
    width: 100vw;
    max-height: 100vh;

    border-radius: 0 !important;
  }

  .pokemon-card.big .card-body {
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}

.pokemon-card .image {
  min-width: 150px;
  position: relative;
}

.pokemon-card .image img {
  position: absolute;
  bottom: -1.75rem;
  right: -1.25rem;
}

.pokemon-card .image svg {
  height: 24px;
  width: 24px;
}

.pokemon-card.big .image img {
  max-height: 250px;
  position: relative;
  margin-top: -1.75rem;
  margin-bottom: -5rem;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

.pokemon-card.grass {
  background-color: #1bd361;
}

.pokemon-card.bug {
  background-color: #35a370;
}

.pokemon-card.fire {
  background-color: #ff4141;
}

.pokemon-card.water,
.pokemon-card.ice,
.pokemon-card.dragon {
  background-color: #53afff;
}

.pokemon-card.normal {
  background-color: #ff9f50;
}

.pokemon-card.ground,
.pokemon-card.rock,
.pokemon-card.steel {
  background-color: #adb5bd;
}

.pokemon-card.poison {
  background-color: #6f42c1;
}

.pokemon-card.electric {
  background-color: #fdd049;
}

.pokemon-card.fairy {
  background-color: #e685b5;
}

.pokemon-card.psychic,
.pokemon-card.ghost {
  background-color: #6610f2;
}

.pokemon-card.fighting,
.pokemon-card.dark {
  background-color: #343a40;
}

.spin {
  animation-name: spin;
  animation-duration: 1000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}