@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;700&display=swap');

* {
    margin: 0;
    padding: 0;
}

hr {
    border: solid 1px;
    height: 1px;
    /* Set the hr color */
    color: red; /* old IE */
    background-color: #fff; /* Modern Browsers */
}


.poke_container {
    display: flex;
    flex-wrap: wrap;
}


.card {
    border: solid #ffcb05 1px; 
    border-radius: 5%;
    width: 15rem;
    aspect-ratio: 479/675;
    transition: transform 500ms ease-in-out;
    transform-style: preserve-3d;

}

.card figure {
    width: 100%;
    height: 100%;
    position: absolute;
    margin: 0;
    backface-visibility: hidden;
}

.card-img-top {
    height: 50%;
    background-color: red;
    transform: translate(-40%, 0%);
}

.hpBox {
    background:rgba(255, 0, 0, 0.25) !important;
}

.card .back {

    border-radius: 5%;


}

.card-container:hover .card {
    transform: rotateY(180deg);

}

.card .back{
    transform: rotateY(180deg);

}


.main-content {
    font-family: 'Bangers', cursive;
}

.overlay-content {
    font-family: 'Open Sans', sans-serif;
}

.overlay-content h3 {
    font-family: 'Bangers', cursive;
}




.grid-divider {
    overflow-x: hidden;
    position: relative;
}

.grid-divider > [class*=col-]:nth-child(n+2):after {
  content: "";
  background-color: red;
  position: absolute;
  top: 0;
  bottom: 0;
}
@media (max-width: 767px) {
  .grid-divider > [class*=col-]:nth-child(n+2):after {
    width: 100%;
    height: 1px;
    left: 0;
    top: -4px;
  }
}
@media (min-width: 768px) {
  .grid-divider > [class*=col-]:nth-child(n+2):after {
    width: 1px;
    height: auto;
    left: -1px;
  }
}

.footer {
    min-width: 100%;
    position: absolute;
    padding: 0;
    margin: 0;

}

.footer-text {
    background-color: #ffcb05;

}



/* TYPES */
#normal{
    border-color: rgb(168,167,122);
    
} 

#fire{

    border-color: rgb(238,129,48);
    
}

#water{
    border-color: rgb(99,144,240);
   } 

#electric{
    border-color: rgb(247,208,44);
} 

#grass{
    border-color: rgb(122,199,76);
} 

#ice{
    border-color: rgb(150,217,214);
} 

#fighting{
    border-color: rgb(194,46,40);
} 
 
#poison{
    border-color: rgb(163,62,161);
} 
 
#flying{
    border-color: rgb(169,143,243);
}  
 
#psychic{
    border-color: rgb(249,85,135);
}  
 
#bug{
    border-color: rgb(166,185,26);
}  
 
#ground{
    border-color: rgb(226,191,101);
}  
 
#rock{
    border-color: rgb(182,161,54);
} 

#ghost{
    border-color: rgb(115,87,151);
}  

#dragon{
    border-color: rgb(111,53,252);
}  

#dark{
    border-color: rgb(112,87,70);
}  

#steel{
    border-color: rgb(183,183,206);
} 
  
#fairy{
    border-color: rgb(214,133,173);
} 


/* TEST */


.card__stats {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}


.card__stats th {
    text-align: left;
    font-size: 1rem;
    font-weight: 300;
}

.card__stats td {
    font-weight: 700;
    font-size: 1.2rem;
    text-align: right;
}

.card__stats th, .card__stats td {
    padding: 0.25em 0.5em 0;
  }

.ability .label {
    font-size: 0.8rem;
}