@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(2, 0, 36, 1) 0%,
    rgba(26, 62, 121, 1) 35%,
    rgba(0, 212, 255, 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_gallo {
  max-width: 15%;
  margin-top: -10px;
}

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

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

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

input {
  margin-top: 12px;
}

.custom-file-upload {
  background: #1b427d;
  border: solid;
  border-color: #fdc718;
  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: #e3032c;
  scale: 120%;
  margin-bottom: 10px;
}

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

@media screen and (max-width: 620px) {
  body {
    font-size: 1rem; /* Ajustado para ser mais razoável */
    background: linear-gradient(
      42deg,
      rgba(2, 0, 36, 1) 0%,
      rgba(26, 62, 121, 1) 35%,
      rgba(0, 212, 255, 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: #1b427d;
    border: solid;
    border-color: #fdc718;
    color: #fafafa;
    padding: 0.5rem 1rem; /* Ajustado para tamanhos menores */
    border-radius: 0.5rem;
    cursor: pointer;
  }

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

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