/* ---------------------------- Globals ----------------------------- */
#overlay {
   position: fixed;
   display: none;
   width: 100%;
   height: 100%;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 2;
   cursor: pointer;
}

.card-body {
   display: flex;
   justify-content: center;
}

.detail-card-body {
   height: 700px;
   width: 400px;
   background-color: #07222b;
   border: 1px solid #000;
   border-radius: 20px;
   color: #fefefe;
   display: flex;
   flex-direction: column;
   justify-content: space-between;
   margin: 20px;
   z-index: 2;
   cursor: default;
}

.flip-vertical-fwd {
	-webkit-animation: flip-vertical-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
	        animation: flip-vertical-fwd 0.5s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

/**
 * ----------------------------------------
 * animation flip-vertical-fwd
 * ----------------------------------------
 */
@-webkit-keyframes flip-vertical-fwd {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
  }
  100% {
    -webkit-transform: translateZ(160px) rotateY(360deg);
            transform: translateZ(160px) rotateY(360deg);
  }
}
  @keyframes flip-vertical-fwd {
  0% {
    -webkit-transform: translateZ(0) rotateY(0);
            transform: translateZ(0) rotateY(0);
  }
  100% {
    -webkit-transform: translateZ(160px) rotateY(360deg);
            transform: translateZ(160px) rotateY(360deg);
  }
}


/* ---------------------------- Card Body Top ----------------------------- */
h3 {
   cursor: pointer;
}

.detail-card-body-top {
   height: 20px;
   padding: 20px 20px;
   display: flex;
   justify-content: space-between;
}

/* ---------------------------- Card Body Img ----------------------------- */
.detail-card-body-img {
   margin-left: auto;
   margin-right: auto;
   border-radius: 50%;
   background-color: #0d3240;
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
}

.pokemon-image {
   height: 300px;
}

.detail-card-icon-body {
   height: 60px;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 20px;
}

.detail-card-icon-body img {
   width: 40px;
   height: 40px;
}

.detail-card-icon-body img:hover {
   cursor: zoom-in;
   width: 60px;
   height: 60px;
}

/* ---------------------------- Card Body Details ----------------------------- */
.details-block {
   display: flex;
   flex-direction: column;
}
.nav {
   display: flex;
   justify-content: space-around;
}

.detail-content {
   background-color: #0d3340;
   min-height: 270px;
   padding: 10px 20px;
   border-bottom-left-radius: 20px;
   border-bottom-right-radius: 20px;
}

.details {
   font-size: 16px;
   padding-top: 5px;
   display: flex;
}

.detail-properties {
   width: 140px;
}

.detail-values {
   width: 220px;
}

.stats-properties {
   width: 130px;
}

.stats-values {
   width: 100px;
}

.stat-bar {
   width: 200px;
}

.progress-bar-container {
    width: 100px; 
    background-color: #e0e0e0; 
    border-radius: 5px; 
    height: 10px; 
}

.progress-bar {
    background-color: #00bfae; 
    height: 100%; 
    border-radius: 5px; 
}

.evo-chain {
   display: flex;
   align-items: center;
   justify-content: space-around;
   height: 100%;   
}

.evo-chain-content {
   align-items: center;
   width: 30%;
}

.evo-chain-image {
   width: 100px;
}



/* ---------------------------- Card Body Bottom ----------------------------- */
.detail_card_body_bottom {
   background-color: #0d3240;
   height: 50px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-left: 10px;
   padding-right: 10px;
}