@import url("font.css"); /* od3 è il font OpenDyslexic v. 3  */

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family:od3;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
}

header {
    background: #253193;
    color: white;
    padding: 10px 0;
    text-align: center;
}

nav ul {
    list-style: none;
    padding: 0;
}

nav ul li {
    display: inline;
    margin: 0 15px;
}

nav ul li a {
    color: white;
    text-decoration: none;
}

nav ul li a:hover {
  color: yellow;
}

/* Permette al main di espandersi e occupare lo spazio disponibile */
main {
    flex: 1;
    padding: 20px;
}

footer {
    background: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
}

/* Colore giallo per i link nel piè di pagina senza sottolineatura */
footer a {
    color: yellow;         
    text-decoration: none;
}

/* Aggiunge la sottolineatura al passaggio del mouse */
footer a:hover {
    text-decoration: underline;
}

/* Messaggi che non possono essere ignorati */
.importante {
  border-color: #253193;
  background-color: #ffffcc;
  border-left: 8px solid #ffff00;
  margin-top: 16px;
  margin-bottom: 16px;
  padding: 16px;
}

.responsive-image {
	max-width: 300px;  /* Limite massimo di larghezza */
	width: 100%;       /* Larghezza al 100% del contenitore fino al limite massimo */
	height: auto;      /* Altezza automatica per mantenere le proporzioni */
	display: block;    /* Necessario per centrare l'immagine */
	margin: 0 auto;    /* Margine automatico per centrare l'immagine */
}

.form-importa {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.form-importa h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-importa label {
  display: block;
  margin-bottom: 10px;
}

.form-importa input[type="file"] {
  width: 100%;
  height: 40px;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ccc;
}

.form-importa input[type="submit"] {
  width: 100%;
  height: 40px;
  background-color: #253193;
  color: #fff;
  padding: 10px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.form-importa input[type="submit"]:hover {
  background-color: black;
}

.tabella {
  margin-left:auto;
  margin-right:auto;
  border-collapse:collapse;
  width:80%;
  border:1px solid #ddd;
}

.tabella th {
  background-color:#f0f0f0;
  padding:10px;
  border:1px solid #ddd;
}

.tabella td {
  padding:10px;
  border:1px solid #ddd;
}

/* Colore di sfondo per le righe pari */
.tabella tr:nth-child(even) {
  background-color:#f9f9f9;
}

/* Giallo chiaro quando il mause passo sopra una riga */
.tabella tr:hover {
    background-color: #ffffcc;
}

/* Stile per il contenitore */
.pagination {
    margin: 20px 0;
    text-align: center; /* Centra i link */
}

/* Stile per i link delle pagine */
.page-link {
    display: inline-block;
    margin: 0 5px;                      /* Spaziatura tra i link */
    padding: 10px 15px;                 /* Padding per rendere i link più grandi */
    background-color: #007bff;          /* Colore di sfondo */
    color: white;                       /* Colore del testo */
    text-decoration: none;              /* Rimuove la sottolineatura */
    border-radius: 5px;                 /* Angoli arrotondati */
    transition: background-color 0.3s;  /* Transizione per l'effetto hover */
}

/* Colore di sfondo al passaggio del mouse */
.page-link:hover {
    background-color: #0056b3;
}

 /* Evidenziazione dei tasti per la scelta modifica corso */
.button {
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  border-radius: 5px;
}

.modulo {
  margin: 20px 0;
  text-align: center;
}

.button1 {
	background-color: #04AA6D; /* Green */
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2 {
	background-color: #FF0000; /* Red */
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}

.stats {
    max-width: 600px;
    margin: 40px auto;
    padding: 20px;
    background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      margin: 15px 0;
    }
}

.progress-bar {
    background-color: #e0e0e0;
    border-radius: 5px;
    height: 20px;
    width: 100%;
    margin-top: 5px;
}

.progress {
    background-color: #ff5733;
    height: 100%;
    border-radius: 5px;
}

select {
    padding: 10px;
    border: 2px solid #007BFF; /* Colore del bordo */
    border-radius: 5px; /* Angoli arrotondati */
    background-color: #fff; /* Colore di sfondo */
    color: #333; /* Colore del testo */
    font-size: 16px; /* Dimensione del font */
    transition: border-color 0.3s; /* Transizione per il bordo */
    appearance: none; /* Rimuove l'aspetto predefinito del browser */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10"><polygon points="0,0 10,0 5,5" fill="%23007BFF"/></svg>'); /* Freccia personalizzata */
    background-repeat: no-repeat;
    background-position: right 10px center; /* Posizione della freccia */
    background-size: 10px; /* Dimensione della freccia */
    width: 100%;
}

select:focus {
    border-color: #0056b3; /* Colore del bordo quando è in focus */
    outline: none; /* Rimuove il contorno predefinito */
}