:root{--cielo: rgba(93, 215, 250, 0.6);
      --mare: rgba(0, 0, 130, 1);
      --terra: rgba(16, 191, 0, 0.5);
      --sole: rgba(255, 0, 0, 0.8);
  }
@font-face{font-family: "Ronald"; src: url(Ronald_Handwriting.ttf) format(truetype);}
@font-face{font-family: "MHIM"; src: url(Mortal_Heart,_Immortal_Memory.ttf) format(truetype);}
html, body{height: 100%;}
a{color: rgb(16, 191, 0)}
h1{color: black; text-align: center; font-family:"Ronald"; font-size: 5vw; font-weight: normal; padding-bottom: 20px; margin-top: 15px}
.header{background: url('img/index_file/image002.jpg'); background-repeat: no-repeat; background-position: center; background-size: 400px auto; padding-bottom: 5px; margin-top:-20px;}
h3{font-family: serif}
body{font-family: sans-serif; display: flex; flex-direction: column; margin: 0; hyphens: auto; font-size: large;}
.sezioni{width: 100%; overflow: auto; display: flex; flex-wrap: wrap; margin-bottom: 5px; justify-content: space-evenly;}
.sez{color: black; margin-right: 10px; padding: 3px; text-decoration: none; font-family: "MHIM"; font-size: 1.5em; border-radius: 2%;}
a.sez:hover{background-color: var(--cielo); padding: 3px}
a.sez:active{background-color: var(--terra); padding: 3px}
.content{flex: 1 0 auto; padding: 10px 20px}
footer{flex-shrink: 0; color: LightGoldenRodYellow; text-align: center; background-color: var(--mare); width: 100%; padding: 10px 0; font-size: small; margin-right: 10px;}
footer img{width: 8%; float: left; margin-left: 10px; display: none}
.occupa-spazio{float: right; width: 8%; visibility: hidden; padding-right: 10px}