html, body { margin: 0; padding: 0; height: auto; min-height: 100%; }

body {
  min-height: 100svh;             /* altezza almeno pari alla viewport visibile */
  background-image:
    /*linear-gradient(to bottom, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0.1)),*/
    url('../img/sfondo.jpg');
  background-size: 100% 100%, cover;
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  font-family: Arial, Helvetica, sans-serif;
  text-align: center;
}

input::placeholder,
textarea::placeholder { color: #666; opacity: 1; }

/* testo normale */
input, select, textarea { color: #111; }

/* “placeholder” del select finché è invalido */
select:required:invalid { color: #666; }

/* nascondi il placeholder dal menu dopo l’apertura (opzionale) */
select option[disabled][value=""] { display: none; }

/* colore delle opzioni valide nel menu */
select option { color: #111; }

@font-face {
  font-family: opensansextra;
  src: url('../font/open-sans.extrabold.ttf');
  font-weight: bold;
}

@font-face {
  font-family: opensans;
  src: url('../font/open-sans.bold.ttf');
  font-weight: bold;
}

p.eb {
  font-family: opensansextra;
  font-size: 50px;
}

p.b {
  font-family: opensans;
  font-size: 25px;
}

p.mb {
  font-family: opensans;
  font-size: 15px;
}

input[type=text] {
  width: 300px;
  padding: 14px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.13);
  box-sizing: border-box;
}

input[type=emamil] {
  width: 300px;
  padding: 14px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.13);
  box-sizing: border-box;
}

input[type=tel] {
  width: 300px;
  padding: 14px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.13);
  box-sizing: border-box;
}

input[type=password] {
  width: 300px;
  padding: 14px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  border-radius: 20px;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.13);
  box-sizing: border-box;
}

input[type=submit] {
  width: 300px;
  background-color: #4CAF50;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

select, option{
  -webkit-appearance: none
}

select {
  width: 300px;
  padding: 14px 20px;
  margin: 8px 0;
  display: inline-block;
  border: none;
  border-radius: 20px;
  background-color: white;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.13);
  box-sizing: border-box;
}

select.smallselect {
  width: 220px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

input.smallinput {
  width: 70px;
  background-color: #4CAF50;
  color: white;
  padding: 12px 10px;
  margin: 8px 0;
  display: inline-block;
  border-radius: 4px;
  cursor: pointer;
}

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

.custom-file-upload {
  width: 300px;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
}

.allinea {
  align-items: center;
  display: flex;
  justify-content: space-between;
  max-width: 300px;
  margin: 0 auto;
  padding: 10px 0;
}

.form {
  background-color:#ffffff;
  width: 400px;
  height: auto;
  padding: 20px;
  border-radius: 30px;
  margin: auto;
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.247);
}

.error {
  background-color:#ff000077;
  color: white;
  width: 400px;
  height: auto;
  padding: 14px;
  border-radius: 20px;
  margin: auto;
}

.success {
  background-color:#4CAF50;
  color: white;
  width: 400px;
  height: auto;
  padding: 14px;
  border-radius: 20px;
  margin: auto;
}

button {
  background-color: rgb(221, 221, 221);
  border: none;
  color: rgb(0, 0, 0);
  padding: 12px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 10px;
}

.small {
  background-color: #f2f2f2; 
  border: 2px solid black;
  color: rgb(0, 0, 0);
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 12px;
  margin-left:3px;
  cursor: pointer;
}

.small:hover {
  background: rgb(221, 221, 221);
}