body {

  background: #1a1a2e;
  min-height: 100vh;
}

header {
  background-color: #e3350d;
  padding: 24px 32px 28px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  border-bottom: 6px solid var(--red-dark);
}

header h1 {
  font-size: 40px;
  letter-spacing: 4px;
  margin-bottom: 20px;
  font-family: "Pixel Operator";
  font-style: italic;
}

@font-face{
  font-family: "Pixel Operator";
  src: url('/Fonts/PixelOperator.ttf') format('truetype');
}

header p {
    color: #ffcb05;
    font-size: 35px;
    font-family: "Pixel Operator";
}

#gallery { 
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 20px;
  list-style: none;
  max-width: 1200px;
  margin: 0 auto;
}

article.pokemon {
    background: #ffffff;
    border-radius: 16px;
    padding: 20px 12px 16px;
    text-align: center;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    cursor: pointer;
    transition: transform .25s, box-shadow .25s;
    animation: fadeUp .4s ease both;
    position: relative;
    overflow: hidden;
}

.pokemon-gif { /*e mudar o nome*/
    width: 95px;
    height: 95px;
    image-rendering: pixelated;
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,.2));
    transition: transform .25s;
    object-fit: contain; /*isto força a imagem a comprimir*/
}

.pokemon:hover {
  transform: translateY(-6px) scale(1.03);
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

.num{
    color:grey;
}

main { padding: 32px 24px; }

.barra-procura{
  border-radius: 25px;
  height: 40px;
  padding: 0 15px;
}