main {
  z-index: 13;
  position: relative;
  top: 95px;
}

.container-adote {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.deu-match-wrapper {
  height: 75px;
}

.deu-match-container {
  text-align: center;
  height: 5px;
  overflow: hidden;
  filter: blur(8px);
  animation: move-container-deu-match 1s ease 250ms forwards;
}

.deu-match-container h2 {
  color: var(--corSecundaria);
  text-transform: uppercase;
  font-size: 2.5rem;
  font-weight: 300;
}

.deu-match-container p {
  color: var(--corPrimaria);
  font-size: 1.5rem;
  font-weight: 300;
}

.formulario-busca {
  min-width: 50%;
  text-align: center;
}

.formulario-busca label {
  font-size: 1.25rem;
  font-weight: 300;
  color: var(--corPrimaria);
  margin-bottom: 100px;
}

.filtro-nome-cidade {
  border: 2px solid var(--corSecundaria);
  display: flex;
  border-radius: 15px;
  padding: 10px;
  margin-top: 5.5px;
}

#busca-pets {
  flex: 1;
  border: none;
  background-color: var(--corFundo);
  width: 90%;
  font-size: 1.5rem;
  color: var(--corPrimaria);
  padding: 0.1rem; 
}

#busca-pets:focus {
  outline: none;
}

.filtro-nome-cidade button {
  border: none;
  cursor: pointer;
}

.filtro-nome-cidade i {
  color: var(--corSecundaria);
  font-size: 1.5rem;
}

.filtro-nome-cidade i:hover {
  color: var(--corPrimaria);
}

.filtro-lista {
  display: flex;
  width: min-content;
  width: 90%;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}

.filtro {
  background-color: var(--corSecundaria);
  height: 500px;
  border-radius: 10px;
  padding: 2rem;
  outline: 2.5px solid var(--corPrimaria);
  outline-offset: 5px;
  transition: outline-color 1s ease;
}

.filtro:hover {
  outline-color: var(--corSecundaria);
}

.filtro p {
  text-align: center;
  font-size: 1.25rem;
  background-color: var(--corPrimaria);
  padding: 5px;
  border-radius: 10px;
  color: white;
  margin-bottom: 10px;
}

.opcoes-de-filtro {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.24rem;
}

.checkboxes {
  color: white;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.checkbox-container {
  display: flex;
  gap: 2rem;
}

.checkbox-container label {
  flex: 1;
}

.botao-buscar {
  background-color: var(--corPrimaria);
  border: 0.5px solid white;
  border-radius: 5px;
  font-size: 15px;
  width: 120px;
  height: 25.5px;
  color: white;
  cursor: pointer;
  transition: background-color 250ms ease, border-color 500ms ease, scale 250ms ease;
}

.botao-buscar:hover {
  background-color: var(--corSecundaria);
  border-color: var(--corPrimaria);
  scale: 1.1;
}

.lista-pet {
  padding: 10px;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, 1fr);
  scroll-behavior: auto;
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 420px;
  width: 70%;
  overscroll-behavior-block: contain;
  scroll-snap-type: block mandatory;
  scroll-padding-block: 10px;
}

.lista-pet > * {
  scroll-snap-align: start;
}

.container-resultado-vazio {
  color: var(--corPrimaria);
  text-align: center;
  grid-column: 3 span;
  padding: 10px;
}

.pet-info {
  padding: .5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  transition: scale 250ms linear, filter 250ms ease-in-out;
  width: 300px;
}

.pet-info img {
  object-fit: cover;
  width: 300px;
  height: 300px; 
  border-radius: 15px;
  transition: scale 250ms linear, filter 200ms ease;
}

.pet-info:hover img {
  scale: 1.02;
  filter: drop-shadow(11.5px 0 10px var(--corBorda));
}

.pet-mini-sobre {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
}

.pet-info:hover p {
  color: var(--corSecundaria);
  scale: 1.08;
 }
 
 .pet-info p {
  font-size: 1.1rem;
  color: var(--corPrimaria);
  font-weight: bold;
  transition: color 250ms ease-in, scale 500ms ease;
 }

.pet-info:hover .link-adotar {
  transform: scale(1.1);
}

.link-adotar {
  background-color: var(--corSecundaria);
  padding: 10px;
  text-decoration: none;
  color: white;
  align-self: center;
  border-radius: 10px;
  transition: 
  background-color 500ms ease, 
  transform 250ms ease-in-out, 
  offset 500ms ease;
  position: relative;
  outline: 2.5px solid var(--corSecundaria);
  outline-offset: 1.25px;
  border: none;
  cursor: pointer
}

.link-adotar:hover {
  background-color: var(--corPrimaria);
  position: relative;
  outline-color: var(--corPrimaria);
  outline-offset: 2.5px
}


/* .link-adotar:hover::after {
  content: attr(data-pet-nome) "\A" attr(data-pet-peso) "\A" attr(data-pet-idade) "\A" attr(data-pet-sobre);
  padding: 1rem;
  background-color: var(--corSecundaria);
  outline: 2px solid var(--corPrimaria);
  outline-offset: 1.25px;
  position: absolute; 
  top: var(--mouseY); 
  left: var(--mouseX); 
  transform: translate(-50%, -50%);
  border-radius: 25px;
  z-index: 10;
  pointer-events: none; 
  border-radius: 25px;
  opacity: 1;
  display: block;
  white-space: pre;
  text-align: center;
  font-size: 12px;
  color: white;
  transition: opacity 500ms ease, background-color 1s ease-in-out, outline 750ms ease-in-out;
} */

@keyframes move-container-deu-match {
  to {
    height: 75px;
    filter: none;
  }
}