@media (max-width: 560px) {
   header {
      height: 100px;
   }

   .spinner-img img {
      width: 50%;
   }

   .header-content {
      flex-direction: column;
      font-size: 24px;
   }

   header img {
      width: 40px;
      margin-left: 20px;
      margin-right: 20px;
   }

   .search-field {
      height: 20px;
   }
}

@media (max-width: 380px) {
   .detail-card-body {
      height: 600px;
      width: 300px;
      overflow: auto;
   }

   .pokemon-image {
      height: 200px;
      width: 180px;
   }

   .detail-content {
      padding: 0;
      font-size: 14px;
   }

   .details {
      padding-left: 5px;
      padding-right: 5px;
      font-size: 14px;
   }

   .detail-properties {
      width: 125px;
   }

   .detail-content {
      width: auto;
   }

   .detail-values {
    width: 150px;
}

   svg {
      width: 100%;
      font-size: 14px;
   }

   .stat-bar {
      x: 220px;
   }

   .stat-name {
      x: 20px; 
   }

   .stat-value {
      x: 120px;
   }
}