@font-face {
    font-family: pokemonHollow;
    src: url(fonts/Pokemon\ Hollow.ttf);
}
@font-face {
    font-family: pokemonSolid;
    src: url(fonts/Pokemon\ Solid.ttf);
}
.pokeSolid{
    font-family: pokemonSolid !important;
    color: rgb(0, 0, 0) !important;
}

.pokeHollow{
    font-family: pokemonHollow !important;
    color: black !important;
}
.grass.poison {
  background: linear-gradient(to left, green, red) !important;
}
.poison {
  background: crimson !important;
}
.grass {
  background: greenyellow !important;
}
.fire.flying {
  background-image: linear-gradient(to left, blue, red) !important;
}
.normal {
  background-color: aliceblue !important;
}
.normal.flying {
  background-color: blueviolet !important;
}
.electric {
  background-color: blue !important;
}
.fire {
  background-color: red !important;
}
.water {
  background-color: aqua !important;
}
.bug {
  background-image: linear-gradient(to left, gray, wheat) !important;
}
.bug.flying {
  background: linear-gradient(to left, gray, blue) !important;
}
.bug.poison {
  background-image: linear-gradient(to left, gray, crimson) !important;
}

.card:hover {
  cursor: pointer;
}
.card-img-bottom {
  transition: transform 0.2s;
}
.card-img-bottom:hover {
  transform: scale(1.2);
}
.input-group-text {
  cursor: pointer;
}
.input-group-text:hover {
  background-color: rgb(86, 105, 229);
}
html,
body {
  width: 100%;
  height: 100%;
  scroll-behavior: smooth;
}
.smallAnimation{
    position: fixed;
    /* bottom: 0; */
    width: 100px;
    height: 100px;
}
.horizontal {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.vertical {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.pokeBallImg {
  width: 100px;
  height: 100px;
  -webkit-animation: spin 4s linear infinite;
  -moz-animation: spin 4s linear infinite;
  animation: spin 1s linear infinite;
}
.blur{
    filter: blur(8px);
    -webkit-filter: blur(8px);
}

#pokemonWindow {
  /* width: auto; */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 100;
}

.pokemonCard{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    border: solid red;
    border-radius: 10px;
}

.pokemonImg:hover{
    cursor: pointer;
    transform: scale(1.1);
}

.pokemonImg{
    height: 270px;
    width: 270px;
    transition: transform 0.2s;

}
.nameDiv{
    margin-top: 20px;
}
.statsDiv{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
}
span{
    font-size: 24px;
    font-family: pokemonHollow !important;
    color: rgb(0, 0, 0) !important;
}

.slideshow{
    background-color: rgb(0, 0, 0, 0.5);
    z-index: 1;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
.close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 40px;
    color: white;
    cursor: pointer;
}
#loadMoreBtn{
    margin-top: 20px;
    margin-bottom: 20px;
    position: fixed;
    bottom: 0;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}