* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* fa sì che il padding non aumenti la larghezza degli elementi */
  font-family: Arial, Helvetica, sans-serif;
  color: #ffffff;
}

body {
  background-color: #1f1f1f;

  -webkit-user-select: none;
  -khtml-user-select: none;                 
  -moz-user-select: none;                 
  -ms-user-select: none;                 
  -o-user-select: none;                 
  user-select: none;
}

form {
  display: flex;
  justify-content: center; /* Centra orizzontalmente */
  align-items: center;     /* Centra verticalmente */

  width: 100%;
  height: 100vh;
  border:transparent;
  background-color: transparent;
}

fieldset{
  padding: 20px;
  
  /* RESPONSIVITÀ: */
  width: 90%;          /* Occupa il 90% dello schermo su cellulare */
  max-width: 500px;    /* Ma non superare mai i 500px su desktop */
  
  text-align: center;
  /* background-color: rgba(0, 0, 0, 0.3); Leggero sfondo per contrasto */
}

legend {
  padding: 0; /* Spazio attorno al titolo */
  margin: 0 auto;
  color: #3498ff;
}

input[type=text], input[type=password] {
  width: 100%; 
  padding: 15px 20px;
  margin: 10px 0; /* Spazio sopra e sotto */

  border-bottom: 2px solid #3498ff;
  border-right: none;
  border-left: none;
  border-top: none;

  text-align: center;
  background-color: transparent;
  font-size: clamp(1rem, 4vw, 1.4rem);
}

.testInput {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  width: 100%
}

.box_button {
  display: flex;
  flex-direction: row; /* Forza i bottoni a stare vicini */
  justify-content: center; /* Li centra orizzontalmente */
  gap: 10px; /* Spazio tra Login e Delete */
  width: 100%;
}

button {
  background: none;
  border: 1px solid transparent; /* Per evitare salti al passaggio del mouse */
  color: #ffffff;
  padding: 12px 20px;
  cursor: pointer;
  font-size: clamp(1.1rem, 5vw, 1.6rem);
  transition-duration: 0.3s;
  border-radius: 20px;
  font-weight: bold;
  
  /* Larghezza flessibile */
  flex: 1 1 120px; /* Cresce, si restringe, ma parte da 120px */
}

.login:hover{
  background-color: greenyellow;
  color: #000000;
}

.reset:hover{
  background-color: rgb(180, 2, 2);
  color: #ffffff;
}

select {
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: bold;        /* Lo rende più visibile come un titolo */
  text-align: center;
  text-align-last: center;  /* Fix per mobile */
  
  background-color: #1f1f1f; /* Stesso colore dello sfondo pagina per integrazione perfetta */
  color: #3498ff;            /* Testo Azzurro */
  border: none;              /* Via i bordi brutti */
  outline: none;             /* Via il contorno blu quando clicchi */
  
  padding: 5px 10px;
  cursor: pointer;
}

option{
  background: transparent;
  color: #3498ff;
}