body {
  --text-color: #000;
  --bkg-color: #fff;
  --chart-color: white;
}
  
body.tema-scuro {
  --text-color: #eee;
  --bkg-color: #121212;
  --chart-color: silver;
}

@media (prefers-color-scheme: dark) {
  body {
    --text-color: #eee;
    --bkg-color: #121212;
	--chart-color: silver;
  }
  body.tema-chiaro {
    --text-color: #222;
    --bkg-color: #fff;
	--chart-color: white;
  }
}

body {
  font-family: Lato, Arial;
  font-size: 26px;
  font-variant: Lato Bold;
  color: var(--text-color);
  background: var(--bkg-color);
  margin-top:0px;
}

.icona {
height: 64px;
width: 64px;
margin-top: 6px;
position: absolute;
right: 10px;
top: 0px;
}

.pagina {
 margin-top: 0px;
}
.testo {
 padding: 20px;
}

.chart {
  background: var(--chart-color);
  width: 100%;
  height: 250px;
  border: 1px dotted #555;
  padding: 0px 0px 0px 0px;
}

.green {
  background: green;
  width: 100vm;
  color: white;
  text-align: center;
  font-size:26px;
  border: 2px solid black;
  padding: 6px 6px 6px 6px;
}

.yellow {
  background: yellow;
  width: 100vm;
  color: black;
  text-align: center;
  font-size:26px;
  border: 2px solid black;
  padding: 6px 6px 6px 6px;
}

.orange {
  background: orange;
  width: 100vm;
  color: white;
  text-align: center;
  font-size:26px;
  border: 2px solid black;
  padding: 6px 6px 6px 6px;
}

.red {
  background: red;
  width: 100vm;
  color: white;
  text-align: center;
  font-size:26px;
  border: 2px solid black;
  padding: 6px 6px 6px 6px;
}

.maroon {
  background: maroon;
  width: 100vm;
  color: white;
  text-align: center;
  font-size:26px;
  border: 2px solid black;
  padding: 6px 6px 6px 6px;
}