body {
  margin: 0;
  font-family: "Titillium Web", Arial, sans-serif;
}

header {
  background: #eecd00;
  display: grid;
  grid-template-columns: auto 1fr;
  padding: 1em;
  gap: 1em;
  align-items: center;
}

header img {
  max-width: 150px;
  max-height: 75px;
}

h1 {
  text-align: right;
}

#links-row {
  display: flex;
  flex-wrap: wrap;
  gap: .6em;
  justify-content: center;
  padding: .7em 1em;
  background: rgba(238, 205, 0, .5);
}

#links-row a {
  padding: .5em .9em;
  border: 2px solid #17002d;
  border-radius: 1em;
  background: #fff;
  color: #17002d;
  text-decoration: none;
  font-weight: 600;
  font-size: .9em;
}

#links-row a:hover {
  background: #17002d;
  color: #fff;
}

#periods-row {
  display: flex;
  flex-wrap: wrap;
  gap: .7em;
  justify-content: center;
  padding: 1em;
  background: rgba(238, 205, 0, .5);
  border-top: 1px solid rgba(0, 0, 0, .15);
}

#periods-row button {
  padding: .65em 1em;
  border: 1px solid #777;
  border-radius: 1em;
  background: #eecd00;
  color: #111;
  font-weight: bold;
  cursor: pointer;
}

#periods-row button.active {
  outline: 9px solid #fff;
  box-shadow: 0 0 0 2px #111;
}

nav {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5em;
  padding: .5em;
  background: rgba(248, 224, 69, .5);
}

.tendina {
  display: grid;
  grid-template-columns: auto 1fr;
  margin: auto;
}

nav label {
  border: 1px solid #888;
  border-top-left-radius: .75rem;
  border-bottom-left-radius: .75rem;
  padding: .24rem;
}
nav select {
  border: 1px solid #888;
  border-top-right-radius: .75rem;
  border-bottom-right-radius: .75rem;
  padding: .24rem;
}

nav label {
  background: #eecd00;
}

nav select {
  min-width: 20em;
}

#periodo-attivo {
  text-align: center;
  grid-column: 1 / 3;
  font-weight: bold;
  font-size:1.5em;
}

#descrizione {
  text-align: center;
  grid-column: 1 / 3;
}

table {
  margin: 3em 1em;
  width: calc(100% - 2em);
  border-collapse: collapse;
}

table, td, th {
  border: 1px solid #777;
  text-align: center;
  vertical-align: middle;
}

td, th {
  padding: .5em;
}

.foot {
  display: none;
}

@media (max-width: 767px) {
  nav {
    grid-template-columns: 1fr;
  }

  .tendina {
    grid-template-columns: 1fr;
  }

  #descrizione {
    grid-column: 1;
  }

  nav select {
    min-width: 0;
  }

}

#tabellone td { border:1px solid gray; width: 15vw }
#tabellone th:first-child div { font-size:2rem}
#tabellone th:first-child div { display:block; font-size: 50%}
#tabellone td span {display: block}
#tabellone td span.prof {font-style: italic}
#tabellone td span.att {font-size: 125%}
#tabellone td span.classe {font-size: 150%}

  /* Colori per i blocchi delle ore (classi assegnate da JavaScript) */
.gruppo_0 { background-color: rgb(255, 170, 170); }
.gruppo_1 { background-color: rgb(255, 200, 140); }
.gruppo_2 { background-color: rgb(255, 235, 140); }
.gruppo_3 { background-color: rgb(190, 235, 140); }
.gruppo_4 { background-color: rgb(140, 230, 170); }
.gruppo_5 { background-color: rgb(140, 225, 225); }
.gruppo_6 { background-color: rgb(145, 195, 245); }
.gruppo_7 { background-color: rgb(175, 165, 240); }
.gruppo_8 { background-color: rgb(215, 160, 235); }
.gruppo_9 { background-color: rgb(245, 165, 215); }

.gruppo_10 { background-color: rgb(255, 82, 100); }
.gruppo_11 { background-color: rgb(255, 145, 55); }
.gruppo_12 { background-color: rgb(255, 215, 45); }
.gruppo_13 { background-color: rgb(130, 220, 45); }
.gruppo_14 { background-color: rgb(45, 215, 100); }
.gruppo_15 { background-color: rgb(40, 210, 210); }
.gruppo_16 { background-color: rgb(55, 155, 240); }
.gruppo_17 { background-color: rgb(105, 80, 220); }
.gruppo_18 { background-color: rgb(185, 65, 220); }
.gruppo_19 { background-color: rgb(235, 65, 170); }