body {
  height: 100%; /* Ensures the background covers the full height */
  margin: 0;
  font-family: Larish Nue;
  background-color: aliceblue;
  display: flex;
  flex-direction: column;
}

#ingredients-table th {
  color: black !important; /* Force the text color to black */
}

.select select,
.input {
  background-color: aliceblue !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  border-radius: 10px;
  color: #000;
  padding: 10px;
}

.container {
  width: 100%;
  max-width: 600px;
  color: black;
  margin: auto; /* Centers the form vertically */
  padding: 20px;
}

.title1 {
  margin-top: 20px;
  color: #0a0a0a;
  font-size: 44px;
  font-weight: bold;
  text-align: center; /* Aggiunto per centrare il testo */
}

form {
  margin-top: 20px;
}
.form-control {
  width: 100%; /* Gli input occupano tutta la larghezza disponibile */
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

button {
  margin-top: 10px;
}
.form-label {
  font-size: 22px;
  display: block; /* Makes labels take full width, forcing inputs below */
}
.gif-container {
  margin-left: -100px; /* Adds space between the form and the GIF */
}
.gif-container img {
  max-width: 100%; /* Ensures the image is responsive */
  height: auto; /* Maintains aspect ratio */
  opacity: 0.7; /* Slightly transparent */
}

.button {
  background-color: transparent !important; /* Transparent background */
  border: 1px solid #000000 !important; /* Simple border */
  color: #000000 !important; /* Text color */
  font-family: "Sansation", sans-serif !important; /* Different font */
  font-weight: normal !important; /* Normal font weight */
  transition: all 0.3s ease !important; /* Smooth transition */
  margin-left: 5px;
}

.button:hover {
  background-color: #000000 !important; /* Background on hover */
  color: #ffffff !important; /* Text color on hover */
}

.table {
  background-color: white; /* Set the table background to white */
  color: black; /* Set the text color to black for readability */
  border: 1px solid #ccc; /* Optional: Add a border for better visibility */
}

.table th,
.table td {
  border: 1px solid #ccc; /* Add borders to table cells */
  padding: 10px; /* Add padding for better spacing */
}

.table th {
  color: black; /* Set the text color of table headers to black */
}

.centered-form {
  display: flex;
  justify-content: center;
}

.fieldset {
  position: relative;
  width: 100%;
  max-width: 500px;
  margin: 2rem auto;
  border: 1px solid #ccc;
  border-radius: 20px;
  padding: 30px;
  background-color: white;
  box-sizing: border-box;
}

form-label {
  display: inline-block; /* Le label sono più corte */
  width: 150px; /* Imposta una larghezza fissa per le label */
  margin-bottom: 10px; /* Spazio tra la label e l'input */
}

.form-control,
.form-label {
  margin-bottom: 15px; /* Distanza tra ogni campo */
}

.button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 20px; /* opzionale: spazio sopra il pulsante */
}

.button {
  width: 100%;
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
  .container {
    padding: 10px;
  }

  .fieldset {
    max-width: 90%;
    padding: 20px;
  }

  .form-label {
    font-size: 18px;
  }
}

@media (max-width: 480px) {
  .fieldset {
    max-width: 100%;
    padding: 15px;
    margin: 1rem auto;
  }

  .form-label {
    font-size: 16px;
  }

  .form-control {
    padding: 8px;
  }

  .button {
    padding: 8px;
  }
}