* {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

main {
  background-color: #292d3b;
}

.sugestoes{
  position: relative;
  z-index: 99;
  border: 2px solid #dddddd;
  border-radius: 4px 4px 4px 4px;
  list-style-type: none;
  padding: 0; 
  width: 48%;
  margin-left: auto;
  margin-right: auto;
  text-justify: center;
  border-color: rgb(67, 67, 67);
}

.sugestoes > li:hover{
  background-color: rgb(11, 119, 207);
  color: white;
  text-align: center;    
}

.pokemon_id {
  font-size: 0.9rem;
  color: #ececec;
}

.pokemon_name {
  font-size: 1.3em;
  font-weight: 600;
  margin-top: 12px;
  margin-bottom: 0px;
}

.img_poke {
  text-align: center;
  color: red;
}

.pokemon_types {
  margin-left: 10px;
}

.pokemon_type {
  display: inline-block;
  font-size: 0.9em;
  text-align: center;
  color: rgb(246, 246, 246);
  width: 82px;
  border-radius: 10px;
  margin-right: 10px;
  padding-top: 3px;
  padding-bottom: 3px;
}

.pesq_poke{ 
  font-family: 'Fantasy', sans-serif;
  font-size: small;
  color: white;
  text-align: center;
}

.border{
  border: rgb(231, 222, 222);
  border-radius: 5px;
  width: 20%;
  padding: 10px;
}

.bordername{
  border: rgb(231, 222, 222);
  border-radius: 8px;
  width: 45%;
  padding: 10px;
  text-align: center;
}

.EspacoAlinha{
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: medium;
  margin-top: 4px;
  margin-left: 15px;
  display: inline-block;
}

  
.box_align{
  text-align: center;
}

.borda1{
  border: 5px solid white;
  border-radius: 20px;
  width: 30%;
  padding: 15px;
  margin-left: 75px;
  background-color: white;
  display: inline-block;
}



.bordaCampoNome {
  border: 5px solid white;
  font-family: 'Courier', 'Courier New', monospace;  /* Fontes monoespaçadas com estilo pixelado */
  border-radius: 20px;
  width: 38%;
  padding: 15px;
  margin-left: 20px; /* Reduzido para um alinhamento melhor */
  background-color: white;
  display: inline-block;
  vertical-align: middle; /* Alinha verticalmente ao texto */
  text-align: center;
}

.bordaCampoNome2 {
  border: 5px solid white;
  border-radius: 20px;
  width: 30.5%;
  padding: 15px;
  margin-left: 60px; /* Reduzido para um alinhamento melhor */
  background-color: white;
  display: inline-block;
  vertical-align: middle; /* Alinha verticalmente ao texto */
  text-align: center;
}

.bordaCampoNome3 {
  border: 5px solid white;
  border-radius: 20px;
  width: 30.5%;
  padding: 15px;
  margin-left: 20px; /* Reduzido para um alinhamento melhor */
  background-color: white;
  display: inline-block;
  vertical-align: middle; /* Alinha verticalmente ao texto */
  text-align: center;
}

.Navbar{
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #e71d36;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
  background-color: black;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
}

header {
  top: 0;
  position: sticky;
  z-index: 2;
}

body{
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #FFFDf2;
}


.iframe-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 500px;
  background-color: #f0f0f0;
  padding: 0;
}

.iframe-container iframe {
  border: 5px outset black; 
  border-radius: 5px;    
}

.bordaDesc{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  margin: 20px;
  border: 5px solid white;
  border-radius: 20px;
  padding: 15px;
  background-color: white;
}
.div_center
{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  background-color: #2d3142;
  padding-top: 25px;
  padding-left: 2%;
  padding-right: 2%;
  padding-bottom: 25px;
}

.dropdown_select {
  margin: auto;
  margin-bottom: 10px;
  position: relative;
  display: inline-block;
}

.dropdown_select-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
  padding: 10px 0;
  z-index: 1;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.dropdown_select-content button {
  background: none;
  border: none;
  padding: 10px 20px;
  text-align: left;
  width: 100%;
  font-size: 14px;
}

.dropdown_select-content button:hover {
  background-color: #ddd;
}

.dropdown_select:hover .dropdown_select-content {
  display: block;
}

.dropdown_select-btn {
  padding: 10px 20px;
  width: 120px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 8px;
}


.container {
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

  .item_repeat {
    display: inline-block;
    width: 100%;
    height: 100%;
    background: #939597;
    border-radius: 7px;
  }

  .item_repeat:hover{
    scale: 1.1;
    background-color: #afdceb;
    transition: background-color 0.3s ease, transform 0.3s ease;
    transition: scale 0.3s ease, transform 0.3s ease;
  }

  .poke_img{
    scale: 0.6;
  }

  .imageHome {
    max-width: 80%;
    max-height: 80%;
    margin-left: 10px;
    margin-right: auto;
    object-fit: contain;
  }

  h3{
  margin-left: 10px;
  }

  .more_pokemons {
    margin: auto;
    margin-top: 10px;
    display: block;
    padding: 10px 20px;
    width: 120px;
    background-color: #19b4cf;
    color: white;
    border: none;
    border-radius: 8px;
  }

  .more_pokemons:hover {
    background-color: #1594ab;
  }


  @media (max-width: 1024px) {
    .container {
      grid-template-columns: repeat(3, 1fr); /* 3 colunas com 1fr cada */
    }
  }

/* Para telas menores que 768px (como celulares em paisagem) */
@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr); /* 2 colunas com 1fr cada */
  }
}

/* Para telas muito pequenas (como celulares em retrato) */
@media (max-width: 480px) {
  .container {
    grid-template-columns: 1fr; /* 1 coluna */
  }
}