@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

* {
  padding: 0;
  margin: 0;
  font-family: "Inter", sans-serif;
}

body,
html {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: linear-gradient(
    42deg,
    rgba(230, 37, 128, 1) 0%,
    rgba(144, 38, 131, 1) 100%
  );
  color: #fafafa;
}

h1 {
  font-size: 1em;
  text-align: center;
}

#overlay_sample {
  max-width: 20%; /* Ajustado para 100% da largura do contêiner */
  height: auto; /* Manter proporção da imagem */
  border-radius: 100%;
  clip-path: circle();
}

#logo_mara {
  max-width: 25%;
  margin: 3% 0% 3% 0%;
}

.form {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}

input[type="file"] {
  display: none;
}

input[type="submit"] {
  background-color: #902683;
  color: #fafafa;
  padding: 8px 28px;
  border: none;
  border-radius: 0.5rem;
}

input {
  margin-top: 12px;
}

.custom-file-upload {
  background: #ff84be;
  border: solid;
  border-color: #902683;
  color: #fafafa;
  padding: 1rem 2rem;
  font-family: sans-serif;
  border-radius: 0.5rem;
  cursor: pointer;
  margin-top: 1rem;
  transition: all 0.3s;
}

.custom-file-upload:hover {
  border-color: #fafafa;
  scale: 120%;
  margin-bottom: 10px;
}

form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 12px;
}

footer p {
  font-size: smaller;
  text-align: center;
  text-decoration: none;
}

@media screen and (max-width: 620px) {
  body {
    font-size: 1rem; /* Ajustado para ser mais razoável */
    background: linear-gradient(
      42deg,
      rgba(230, 37, 128, 1) 0%,
      rgba(144, 38, 131, 1) 100%
    );
  }

  h1 {
    font-size: 1em; /* Ajustado para ser menor */
  }

  #logo_gallo {
    max-width: 50%; /* Ajustado para ser responsivo */
  }

  #overlay_sample {
    max-width: 40%;
  }

  .custom-file-upload {
    background: #ff84be;
    border: solid;
    border-color: #902683;
    color: #fafafa;
    padding: 1rem 1rem; /* Ajustado para tamanhos menores */
    border-radius: 0.5rem;
    cursor: pointer;
  }

  .custom-file-upload:hover {
    border-color: #fafafa;
    scale: 110%;
    margin-bottom: 5px;
  }

  input[type="submit"] {
    background-color: #902683;
    border: solid;
    border-color: #ff84be;
    color: #fafafa;
    font-size: 1rem; /* Ajustado para tamanhos menores */
    padding: 8px 16px; /* Ajustado para tamanhos menores */
    border-radius: 0.5rem;
    margin-top: 0.5rem; /* Ajustado para tamanhos menores */
  }

  footer p {
    font-size: 10px;
  }
}