header{
  padding-top: 0.5em;
}

header, h1{
  margin-top:  0px;       /* Rimuove il margine superiore dell titolo*/
}

h1, h2{
  text-align: center;     /* Centra titoli e paragrafi */
}

main h2{
  margin: 0.5em;          /* Rendi più distinguibili i paragrafi */
  margin-top: 2em;        /* Rendi più distinguibili i paragrafi */
}

p{
  margin: 0.5em;          /* Distanzia i paragrafi dal bordo */
  margin-left: 2%;        /* Distanzia i paragrafi dal bordo */
}

.in-block p{
  margin-top: 0.2em;      /* Bordo più piccolo del normale */
}

li{
  margin-left: 4%;        /* Metti in risalto le liste */
}

iframe{
  width: 100%;            /* Adatta i video alla pagina */
  border-radius: 14px;    /* Arrotonda */
  margin-top: 1em;        /* Non morire video */
  margin-bottom: 2.5em;   /* Separa i paragrafi */
}

 /*****************************************************************************/
.in-block {
  text-align: center;     /* Centra i testi sotto le immagini*/
  display: inline-block;  /* Affianca i blocchi */
  width: 30%;             /* Massimo 5 blocchi per linea */
  border: 1px solid;      /* Evidenzia i blocchi con un bordo */
  border-radius: 10px;    /* Arrotonda i bordi */
  padding: 8px;           /* Evita che le immagini escano dai bordi*/
  margin: 0.3%;           /* Distanzia i blocchi tra loro */
}

/* Gestione blocchi */
/******************************************************************************/

main{
  margin: 0px;            /* Sfoltisci sui bordi */
  padding: 0px;           /* Sfoltisci sui bordi */
}

.innerImg {
  width: 60%;             /* Meh */
  border-radius: 14px;    /* Arrotonda */
  margin-left: 12%;       /* Non morire immagine */
  margin-top: 1em;        /* Non morire immagine */
  margin-bottom: 2.5em;   /* Separa i paragrafi */
}

.inLineImg{
  height: 1.3em;
}

/******************************************************************************/
@media only screen and (max-resolution: 100dpi) and (min-width: 761px){
  body{
    background-size: 20%;
  }

  iframe{
    margin-left: 20%;     /* Se a schermo largo rimpicciolisci i video */
    width: 60%;           /* Se a schermo largo rimpicciolisci i video */
  }

  .in-block{
    width: 16%;           /* A schermo intero ci sta pure così */
  }

  main{
    margin-right: 20%;    /* Dai spazio a shinobu */
  }
}

/******************************************************************************/
body{
  background-repeat: no-repeat;       /**/
  background-attachment: fixed;       /* Valido in ogni formato */
  background-position: bottom right;  /**/
}

a{
  text-decoration: none;              /* Voglio un testo pulito */
  font-weight: bold;                  /* Usa il grassetto per i link*/
  outline: none;                      /* Togli quelle orribili linee di quando passi il mouse */
}

li{
  list-style-type: circle;            /* Formato standard per le liste: cerchio */
}


/******************************************************************************/


div img.innerImg{
  margin: 0px;            /* Sennò si rompe tutto */
  border-radius: 8px;     /* Tondo è bello */
  width: 100%;            /* Butta le immagini in una dimensione accettabile */
}

/* Il footer mi piace così */
footer{
  margin-top:10%;
  font-size: 0.8em;
}
footer > p{
  margin: 0px;
}
footer a{
  font-weight: normal;
}

.static{
  text-align: center;
}
.contacts{
  margin-left: 15px;              /* Altrimenti le icone rimangono attaccate */
  margin-right: 15px;
}
.contact_icon{
  width: 30px;                    /* Come dimensionne è buona */
}
.credits{
  text-decoration: underline;     /* Invece qui lascia sottolineato così si capisce */
}

.hidden{
  display: none !important;       /* Assegna classe "hidden" per nasconder un oggetto */
}