/* ------ Quadrata (default) ------ */

@media screen
  and (orientation: landscape)
  and (min-aspect-ratio: 1/1)
  and (max-aspect-ratio: 2/1)
  {
    body {
      background-size: 100vw auto;
    }
  }

@media screen
  and (orientation: landscape)
  and (min-aspect-ratio: 1/1)
  and (max-aspect-ratio: 4/3)
  {
    body {
      background-image: url('bg7.jpg');
    }
  }
/* ------ Orizzontale (  4:3  /  16:9  ) ------ */
@media screen
  and (orientation: landscape)
  and (min-aspect-ratio: 4/3)
  and (max-aspect-ratio: 16/9)
  {
    body {
      background-image: url('bg4.jpg');
    }
  }

/* ------ Orizzontale (  16:9  /  2:1  ) ------ */
@media screen
  and (orientation: landscape)
  and (min-aspect-ratio: 16/9)
  and (max-aspect-ratio: 2/1)
  {
    body {
      background-image: url('bg6.jpg');
    }
  }

/* ------ Orizzontale (panoramica) ------ */
@media screen
  and (orientation: landscape)
  and (min-aspect-ratio: 2/1)
  {
    body {
      background-image: url('bg2.jpg');
      background-size: auto 100vh;
    }
  }

/* ------ Verticale ------ */
@media screen
  and (orientation: portrait)
  {
    body {
      background-image: url('bg8.jpg');
      background-size: 100vw auto;
    }
  }

/* ----- Stili di pagina ----*/
h1 {
  font-size: 10vh;
  color: white;
  text-shadow: 2px 2px #222;
  top: 10vh;
  left: 10vw;
  position: absolute;
}

h2 {
  font-size: 4vh;
  color: white;
  text-shadow: 2px 2px #222;
  text-align: right;
  top: 40vh;
  right: 10vw;
  position: absolute;
}

h3 {
  position: absolute;
  font-size: 3vh;
  color: white;
  text-shadow: 2px 2px #222;
  bottom: 10vh;
  width: 100%;
  text-align: center;
}

h3 > a {
  color: white;
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  background-repeat: no-repeat;
  font-family: sans-serif;
}