#name-list{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.poke-name{
  padding:8px 12px;
  border-radius:10px;

  font-size:14px;
  font-weight:500;

  cursor:pointer;
  text-transform:capitalize;

  transition:.18s;
}

.poke-name:hover{
  background:rgba(255,255,255,.25);
  transform:translateX(3px);
}

.poke-name.active{
  background:rgba(255,255,255,.45);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  font-weight:600;
}


/* SEARCH */
.search-box{
  display:flex;
  gap:10px;
}

.search-box input{
  flex:1;
  padding:12px 14px;
  border:none;
  outline:none;

  border-radius:10px;
  background:rgba(255,255,255,.8);

  font-size:14px;
  transition:.2s;
}



.search-box input:focus{
  box-shadow:0 0 0 2px rgba(0,0,0,.15);
}

.search-box button{
  padding:12px 18px;
  border:none;
  border-radius:10px;
  cursor:pointer;

  font-weight:600;
  background:rgba(255,255,255,.18);
  color:white;
  border:1px solid rgba(255,255,255,.25);

  transition:.18s;
}

.search-box button:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(0,0,0,.2);
}


/* RESULT */
.pokemon-result{
  width:100%;
  min-height:280px;

  border-radius:18px;
  background:rgba(255,255,255,.22);
  padding:22px;

  display:flex;
  justify-content:center;
  align-items:center;
}


/* CARD */
.pokemon-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  text-align:center;
}

.pokemon-image{
  background:rgba(255,255,255,.35);
  padding:14px;
  border-radius:14px;
}

.pokemon-image img{
  width:160px;
  height:160px;
  object-fit:contain;
}



/* TABLET UI */
@media (max-width:1024px){

  .pokemon-image img{
    width:140px;
    height:140px;
  }

}

/* MOBILE UI */
@media (max-width:768px){

  .search-box{
    flex-direction:column;
  }

  .search-box button{
    width:100%;
  }

  .pokemon-image img{
    width:120px;
    height:120px;
  }

  .pokemon-result{
    padding:16px;
    min-height:220px;
  }

}