@import url("https://fonts.googleapis.com/css2?family=Oswald:wght@400;700&family=Raleway:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");

/* 
STRUTTURA BASE DI UNA REGOLA CSS 

selettore {
	chiave1: valore;
	chiave2: valore;
	chiaveN: valore;
}
*/

body {
  margin: 0;
  padding: 0;
  font-family: "Raleway", sans-serif;
}

/* Formattiamo tutti i titoli da h1 a h6 */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Oswald", sans-serif;
}

h1 {
  font-size: 48px;
}

a {
  color: green;
  text-decoration: none;
}

a:hover {
  /* :hover  elementi al passaggio del mouse */
  color: yellowgreen;
  text-decoration: underline;
}

a:active {
  /* :active  elementi al momento del clic con il mouse */
  color: darkgreen;
}

a:visited {
  /* :visited -- link già visitati */
  /*color: deeppink;*/
}

blockquote {
  font-family: Georgia, serif;
  font-size: 18px;
  font-style: italic;
  line-height: 150%;
  color: dimgray;

  border-style: dotted;
  border-width: 1px;
  border-color: silver;

  border: 1px dotted silver;
  border-left: 4px solid gainsboro;
  background-color: whitesmoke;
  padding: 10px;
  margin-bottom: 24px;
}

blockquote cite {
  display: block;
  margin-top: 16px;
  font-weight: bold;
}

input[type=text], input[type=number] {
	border: 1px solid silver;
	border-radius: 4px;
	padding: 6px;
	background: linear-gradient(to bottom, #f6f6f6 0%,#fcfcfc 100%);
}

input[type=text]:hover, input[type=number]:hover {
	border-color: deepskyblue;
	background: linear-gradient(to bottom, #fbfbfb 0%,#fefefe 100%);
}

input[type=text]:focus, input[type=number]:focus {
	border-color: deepskyblue;
	background: #FFFFFF;
	box-shadow: 0 0 8px skyblue;
	outline: 2px solid deepskyblue;
}

button {
	border: 1px solid silver;
	border-radius: 4px;
	padding: 6px 12px;
	background: linear-gradient(to bottom, #f6f8f9 0%,#e5ebee 50%,#d7dee3 51%,#f5f7f9 100%);
}

button:hover {
	background: linear-gradient(to bottom, #ebf1f6 0%,#abd3ee 50%,#89c3eb 51%,#d5ebfb 100%);
	border-color: #89c3eb;
}

button:active {
	background: linear-gradient(to bottom, #b6ccde 0%,#75b7e3 50%,#56aae2 51%,#91cbf5 100%);
	border-color: #56aae2;
}

button:focus {
	outline: none;
	box-shadow: 0 0 12px #89c3eb;
}


.contenitore {
  /* Imponiamo una larghezza massima di 1200 pixel */
  max-width: 1200px;
  width: 100%;
  /* Margine interno di 20 pixel a sinistra e a destra */
  padding-left: 20px;
  padding-right: 20px;
  /*centriamo il contenuto rispetto alla pagina*/
  margin-left: auto;
  margin-right: auto;
  /* Imponiamo che il calcolo della larghezza comprenda anche i bordi */
  box-sizing: border-box;
}

/* Fa in modo che le immagini diventino responsive */
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* PAGINA SERIE TV */
.elenco-serie-tv {
  display: block; /* visualizzazione come blocco */
  margin: 0; /* margine esterno */
  padding: 0; /* margine interno */
  text-align: center;
  list-style-type: none;
}

.elenco-serie-tv > li {
  text-align: center; /* allineamento orizzontale */
  width: 30%; /* larghezza */
  display: inline-block; /* visualizzazione come blocco-inline */
  background-color: #333333; /* colore di sfondo delle caselle */
  margin: 0;
  padding: 0;
  border: 2px solid white;
  box-sizing: border-box;
}

.elenco-serie-tv > li .didascalia {
  height: 32px; /* altezza elemento */
  font-size: 12px; /* dimensione testo */
  color: white; /* colore testo */
  padding: 4px 8px; /* cuscinetto: sopra-sotto -- sinistra-destra */
}

.elenco-serie-tv > li a {
  color: inherit; /* eredita il colore dall'elemento padre */
  text-decoration: none; /* togliamo sottolineatura */
}

.elenco-serie-tv > li .foto {
  height: 240px;
  line-height: 240px; /* Altezza riga (serve a centrare verticalm.) */
}

.elenco-serie-tv > li img {
  max-width: 100%;
  max-height: 240px;
  height: auto;
  width: auto;
  vertical-align: middle;
}

.parallasse {
  height: 480px;

  /* Lo sfondo rimane fermo mentre la pagina scorre */
  background-attachment: fixed;
  /* fa in modo che lo sfondo riempa lo spazio a disposizione, tagliando via eventuali parti in eccesso. */
  background-size: cover;

  /* allineamento verticale e orizzontale dell'immagine */
  background-position: center center;
}

table.ta-bella {
  width: 100%;
  border: 1px solid silver;
  border-collapse: collapse; /* fonde tra loro i bordi adiacenti */
}

table.ta-bella td,
table.ta-bella th {
  border: 1px solid gainsboro;
  padding: 8px;
}

table.ta-bella th {
  background: #ffffff;
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #f1f1f1 50%,
    #e1e1e1 51%,
    #f6f6f6 100%
  );
}

table.ta-bella tbody tr:nth-of-type(2n) {
  background-color: whitesmoke;
}

table.ta-bella tbody tr:hover {
  background-color: cornsilk;
}

.pagina-strappata .sopra img,
.pagina-strappata .sotto img {
  display: block;
}

.pagina-strappata .contenuto {
  background-image: url(immagini/pagina-libro.png);
  padding: 0 64px;
  border: 1px solid transparent;
  line-height: 150%;
}

ul.griglia {
  display: block;
}

ul.griglia > li {
  display: inline-block;
  text-align: center;
  width: 128px;
}

p.capolettera:first-letter {
  color: #903;
  float: left;
  font-family: Georgia;
  font-size: 75px;
  line-height: 60px;
  padding-top: 4px;
  padding-right: 8px;
  padding-left: 3px;
}

.intro {
  text-align: justify;
  font-weight: 300;
  font-size: 24px;
  line-height: 150%;
}

.interruzione-colonna {
  clear: both;
}

ul.photo-gallery {
  display: block;
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

ul.photo-gallery > li {
  display: inline-block;
  width: 200px;
  height: 200px;
  background-color: #444444;
  border-radius: 6px;
  margin: 2px;
  line-height: 200px;
  vertical-align: middle;
  overflow: hidden;
  text-align: center;
}

ul.photo-gallery > li a {
  display: block;
}

ul.photo-gallery > li img {
  max-width: 100%;
  max-height: 200px;
  height: auto;
  vertical-align: middle;
}

ul.home-tiles {
  display: flex;
  margin: 0;
  padding: 0;
  text-align: center;
  flex-flow: row wrap;
  flex-basis: content;
  margin-bottom: 48px;
}

ul.home-tiles li {
  flex: auto;
  display: inline-block;
  vertical-align: top;
  margin: 10px;
}

ul.home-tiles li > a {
  display: block;
  padding: 18px 24px;
  border: 2px solid white;
  border-radius: 8px;
  box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.2);
  color: white;
  background-color: deepskyblue;
  font-size: 32px;
  font-weight: 300;
  transition-property: filter, transform;
  transition-duration: 200ms;
  transition-timing-function: ease-out;
}

ul.home-tiles li > a:hover {
  text-decoration: none;
  filter: brightness(110%);
  transform: scale(1.2);
  transition-property: filter, transform;
  transition-duration: 150ms;
  transition-timing-function: ease-in;
}

ul.home-tiles > li.rossa > a {
  background: linear-gradient(135deg, #a90329 0%, #8f0222 44%, #6d0019 100%);
  border-color: #6d0019;
}
ul.home-tiles > li.verde > a {
  background: linear-gradient(135deg, #d2ff52 0%, #91e842 100%);
  color: black;
  border-color: #91e842;
}
ul.home-tiles > li.gialla > a {
  background: linear-gradient(135deg, #f1e767 0%, #feb645 100%);
  color: black;
  border-color: #feb645;
}
ul.home-tiles > li.fucsia > a {
  background: linear-gradient(135deg, #ff5db1 0%, #ef017c 100%);
  border-color: #ef017c;
}
ul.home-tiles > li.azzurra > a {
  background: linear-gradient(135deg, #a9e4f7 0%, #0fb4e7 100%);
  border-color: #0fb4e7;
}
ul.home-tiles > li.nera > a {
  background: linear-gradient(135deg, #7d7e7d 0%, #0e0e0e 100%);
  border-color: #0e0e0e;
}
ul.home-tiles > li.blu > a {
  background: linear-gradient(135deg, #007ffe 0%, #0a73dc 44%, #0f5996 100%);
  border-color: #0f5996;
}
ul.home-tiles > li.arancio > a {
  background: linear-gradient(135deg, #ffa84c 0%, #ff7b0d 100%);
  border-color: #ff7b0d;
}
ul.home-tiles > li.indaco > a {
  background: linear-gradient(135deg, #e570e7 0%, #c85ec7 47%, #a849a3 100%);
  border-color: #a849a3;
}

@media screen and (min-width: 768px) {
  .allinea-sinistra {
    float: left;
    margin-right: 10px;
  }
  .allinea-destra {
    float: right;
    margin-left: 10px;
  }
}

/* Regole di responsive design */
@media screen and (max-width: 767px) {
  /* le regole contenute in questo blocco 
	vengono applicate quando la larghezza dello schermo è 
	inferiore a 768 pixel */

  .elenco-serie-tv > li {
    width: 48%;
  }
}

@media screen and (max-width: 479px) {
  /* le regole contenute in questo blocco 
	vengono applicate quando la larghezza dello schermo è 
	inferiore a 480 pixel */

  .elenco-serie-tv > li {
    width: 100%;
  }
}

@media print {
  /* Regole specifiche per la stampa su carta */
}