* {
  box-sizing: border-box;
}

body{

  text-align: center;
  overflow-x: hidden;


  }

  #pokedex-container {
      width: 100%;
      max-width: 1400px;
      margin: 0 auto;
      padding: 16px;
  }

  #pokedex-container > .row {
      margin-left: 0;
      margin-right: 0;
  }

  .pokedex-main-column {
      display: flex;
  }

  .pokedex-container {
        background: #58595a;
        border-radius: 12px;
        border: 5px solid rgb(58, 57, 57);

        padding: 20px;
        box-shadow: 5px 4px 10px rgba(0,0,0,0.1);
        max-width: 500px;
        margin: 40px auto;
      }

      .pokemon-item {
        padding: 10px 15px;
        border: 0;
        border-radius: 8px;
        margin-bottom: 8px;
        background: rgb(102, 182, 5);
        transition: 0.2s ease;
        cursor: pointer;
        color: #111111;
        font: inherit;
        text-align: center;
      }

      .pokemon-item:hover,
      .pokemon-item:focus-visible {
        background: #088a01;
        color: rgb(190, 216, 20);
        transform: translateX(5px);
        outline: 3px solid #e9ff70;
        outline-offset: 2px;
      }

      .pokedex-title {
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
        font-size: 1.5rem;
      }

      .type-filter {
        margin-bottom: 15px;
        border: 3px solid #2d2d2d;
        font-weight: 700;
      }

      .type-filter-message {
        width: 100%;
        margin: 0;
        padding: 12px;
        color: #111111;
        font-weight: 700;
        background: #e1e8b9;
        border-radius: 8px;
      }




  #pokedex img{
  padding: 20px;
  width: 300px;
  flex: auto;
  display: inline-block;
  }


  p {         margin: auto;
          width: min-content;
      padding: 20px;

      border-radius: 10px;
  flex: auto;
  display: inline-block;

  }

  /* screen css */
  #pokedex-body-plate section {
      width: 100%;
  }

  #pokedex-body-plate {
      width: 100%;
      min-height: 700px;
      padding: 20px;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      gap: 25px;
  }

  .pokescreen {

      width: 100%;
      height:400px;
      background-color: #e1e8b9;
      color: rgb(0, 0, 0);
      font-family: 'Courier New', Courier, monospace;
      padding: 20px;
      box-sizing: border-box;
      border-radius: 10px;
      overflow-y: auto;
      border: #575027 4px solid;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
  }

  .pokemon-screen-name {
      margin: 0;
      width: auto;
      font-size: larger;
      font-weight: bold;
  }

  .pokemon-screen-sprite {
      width: min(100%, 240px);
      min-height: 240px;
      object-fit: contain;
  }

  .pokemon-screen-info {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: stretch;
      gap: 10px;
      color: rgb(39, 39, 39);
      font-weight:bolder;
  }

  .pokemon-screen-info p {
      flex: 1 1 0;
      min-width: 0;
      min-height: 70px;
      margin: 0;
      padding: 10px;
      overflow-wrap: anywhere;
      word-break: normal;
      white-space: normal;
      border-radius: 10px;
      font-size: clamp(14px, 2vw, 18.5px);
  }

  #pokedex-on-icon{

      width: 40px;
      height: 40px;
      background-color: rgb(26, 122, 177);
      border-radius: 50%;
      align-self: flex-start;
      margin-top: 20px;
      margin-left: 20px;

  }

  #pokedex-control-buttons {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }

  #pokedex-control-buttons-plate {
      background-color: rgb(211, 77, 65);
      border-radius: 10px;
      width: 100% !important;
      min-width: 0;
      min-height: max-content;
      flex-wrap: wrap;
      gap: 12px;
  }

  #pokemonName {
      width: 100%;
      max-width: 260px;
  }

  .pokedex-control-button {
      width: 70px;
      height: 70px;
      background-color: #2d2d2d;
      border: 4px solid #111111;
      border-radius: 50%;
  }

  @media (max-width: 991.98px) {
      #pokedex-container {
          padding: 12px;
      }

      #pokedex-container .col-lg-4 {
          padding: 12px !important;
      }

      #pokedex-container .mt-5 {
          margin-top: 12px !important;
      }

      #pokedex-body-plate {
          min-height: auto;
          padding: 16px;
          gap: 16px;
      }

      .pokescreen {
          height: auto;
          min-height: 360px;
          padding: 16px !important;
      }

      .pokemon-screen-info {
          flex-direction: column;
      }

      .pokemon-screen-info p {
          width: 100%;
          min-height: auto;
          font-size: 16px;
      }

      #pokedex-control-buttons-plate {
          justify-content: center !important;
      }
  }

  @media (max-width: 480px) {
      #pokedex-container {
          padding: 8px;
      }

      #pokedex-body-plate {
          padding: 12px;
      }

      .pokescreen {
          min-height: 320px;
      }

      .pokemon-screen-sprite {
          width: min(100%, 190px);
          min-height: 190px;
      }

      #pokedex-control-buttons-plate {
          padding: 12px !important;
      }

      #pokemonName,
      #pokedex-control-buttons-plate .btn {
          width: 100%;
      }
  }
  /* screen css */



  /* spinner  */