@font-face {
   font-family: Pokemon;
   src: url("PokemonGb-RAeo.ttf");
}

@font-face {
   font-family: PokemonSolid;
   src: url("Pokemon\ Solid.ttf");
}

body {
   margin: 0;
   min-height: 100vh;
}

h1 {
   margin: 0;
}

#whatGeneration {
   margin-top: 3rem !important;
}

h3 {
   font-size: 1.2rem;
   margin-top: 1.5rem;
}

h4 {
   font-size: 1.1rem;
}

header {
   display: flex;
   justify-content: space-between;
   background-color: #C5BF87;
   padding-right: 1rem;
   padding-left: 1rem;
   box-shadow: 2.0px 4.0px 4.0px hsl(0deg 0% 0% / 0.44);
}

.header-img {
   margin-top: 2rem;
   margin-bottom: 2rem;
   width: 300px;
}

.d-none{
   display: none !important;
}

navbar {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
   padding-bottom: 0.2rem;
   padding-top: 0.5rem;
}

navbar div {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   border: 2px solid rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   background-color: rgb(165, 165, 165);
   box-shadow: 2.0px 4.0px 4.0px hsl(0deg 0% 0% / 0.44);
   width: 130px;
}

navbar div:hover {
   cursor: pointer;
   filter: brightness(1.1);
}

navbar div h4 {
   font-size: 1rem;
   margin: 0 !important;
   line-height: unset !important;
   padding: 4px 0;
   padding-bottom: 10px;
}

.pokemon-solid-font {
   color: #FFCD00;
   font-family: PokemonSolid;
   -webkit-text-stroke: 0.5px #356ABC;
   text-shadow: 1px 2px 2px #356ABC;
   font-weight: 700;
}

.search-input {
   background-color: rgb(233, 233, 233);
   padding-left: 1rem;
   padding-top: .4rem;
   padding-bottom: .4rem;
   padding-right: 1rem;
   border: rgba(0, 0, 0, 0.5);
   border-width: 2px;
   border-style: inset;
}

#searchbtn {
   border-style: inset;
   border-width: 2px;
   border-color: rgba(0, 0, 0, 0.5);
   padding-top: .4rem;
   padding-bottom: .4rem;
   padding-left: .5rem;
   padding-right: .5rem;
}

.btn {
   margin-bottom: 4rem;
}

form {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1px;
}

#pokemonList {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   padding: 2rem 0;
}

.loader {
   border: 10px solid #f3f3f3;
   border-top: 10px solid #3498db;
   border-radius: 50%;
   width: 40px;
   height: 40px;
   animation: spin 2s linear infinite;
   margin: 2rem;
}

@keyframes spin {
   0% {
       transform: rotate(0deg);
   }
   100% {
       transform: rotate(360deg);
   }
}

.container {
   width: 100%;
   max-width: 1200px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start !important;
   padding: 0;
}

.dex-bg {
   background: rgb(186, 246, 155);
   background: linear-gradient(45deg, rgba(186, 246, 155, 1) 2%, rgba(190, 251, 158, 1) 25%, rgba(255, 237, 171, 1) 74%);
}

.card {
   padding: 0 1rem;
   margin: .5rem;
   border-radius: 2rem;
   box-shadow: 2.0px 4.0px 4.0px hsl(0deg 0% 0% / 0.44);
}

.card:hover {
   cursor: pointer;
   transform: translateY(-.4rem);
   transition-duration: 200ms;
}

.card-img,
.card-img-bottom,
.card-img-top {
   width: 12rem;
   padding-top: 1rem;
}

.card-body {
   padding-top: 0;
}

.card-text {
   text-shadow: 1.0px 2.0px 2.0px hsl(0deg 0% 0% / 0.44);
}

.card-small-img-top {
   width: 10rem;
}

.card-small-img-top:hover {
   cursor: pointer;
   transform: translateY(-.4rem);
   transition-duration: 200ms;
}

#whatGeneration {
   position: relative !important;
   left: 0;
   padding-left: 3rem;
   margin-top: 1rem;
   margin-bottom: 1rem;
}

.poke-types {
   display: flex;
   gap: 1rem;
   font-size: 0.8rem;
}

.pokeball {
   width: 2rem;
}

.info-container {
   background-color: white;
   border-radius: 4rem;
   margin-top: -4rem;
   align-items: center;
}

.info-header {
   padding-top: 2rem;
   padding-bottom: 5rem;
   border-top-left-radius: 4rem;
   border-top-right-radius: 4rem;
}

.info-img {
   margin-top: -120px;
   border-radius: 100%;
   padding: 1.5rem;
}

.info-topic {
   padding-left: .5rem;
   padding-right: .5rem;
}

.info-topic p {
   padding: .5rem;
   margin: 0;
   border-radius: 5px;
   background-blend-mode: blur(16px);
}

.info-topic h3:hover {
   cursor: pointer;
   background-color: rgba(0, 0, 0, 0.1);
   border-radius: 5px;
}

.info {
   width: 100%;
   padding: 0 5rem;
}

.infobox {
   padding: 1rem;
   gap: 1rem;
   text-align: center;
}

.base-stats {
   width: 100%;
   padding: 0 5rem;
   margin-bottom: 2rem;
}

.progress-table {
   width: 100%;
   font-size: 0.5rem;
   border-spacing: 0;
}

.base-stats h4 {
   font-family: Pokemon;
   font-size: 0.8rem;
   padding-right: .5rem;
   margin-bottom: 0;
}

.base-stats tr {
   height: 3rem;
}

.evolution {
   width: 100%;
   padding: 0 5rem;
   margin-bottom: 2rem;
}

.evo-path {
   display: flex;
}

.gap {
   gap: 1rem;
}

.gray {
   color: #707070;
}

.abilityinfo {
   font-size: 0.9rem;
   font-style: italic;
}

.icon {
   height: 24px;
   width: 24px;
}

.icon:hover {
   cursor: pointer;
   filter: brightness(0.9);
}

.evoarrow {
   height: 48px;
}

.pokemon-font {
   font-family: Pokemon;
   font-size: 0.6rem;
}

.small-font {
   font-size: 0.6rem;
}

.showthem {
   visibility: visible;
}

#pokemonDetails {
   margin-top: 2rem;
   margin-bottom: 2rem;
   border-radius: 4rem;
}

#pokeDetailTypes {
   padding-top: .5rem;
   gap: .2rem;
}

.info-top-left {
   padding-left: 2rem;
}

.info-top-right {
   padding-right: 2rem;
   align-items: flex-end;
}

.icon {
   margin-bottom: 1rem;
}

.topcardinfo {
   margin-top: 5rem;
   font-weight: 700;
   font-size: 1.5rem;
}

.weak-and-strong {
   width: fit-content;
}

.weak-and-strong th {
   padding-right: .5rem;
   vertical-align: text-top;
   font-size: .9rem;
}

.weak-and-strong td {
   display: flex;
   flex-wrap: wrap;
   gap: .5rem;
   align-items: center;
}

.weak-and-strong tr {
   min-height: 2.5rem;
}

.is-rendered {
   font-weight: 700;
   border-bottom: 4px solid rgba(186, 246, 155, 1);
}

.abilities {
   margin-bottom: 2rem;
}

.arrow {
   height: 24px;
   width: 24px;
   margin-top: 2rem;
   margin-bottom: 0.5rem;
}

.arrow:hover {
   cursor: pointer;
   filter: brightness(0.8);
}

.justForMediaChild {
   text-align: center;
}

h6 {
   margin-bottom: 0;
   line-height: 1;
}