body {
  margin: 0;
  overflow: hidden;
  display: flex;
  justify-content: center;
}

.splash {
  height: 100vh;
  width: 100vw;
}

.splash.landscape {
  background: white url("sfondo.webp") no-repeat center / cover;
}

.splash.portrait {
  background: white url("telefono.png") no-repeat center / cover;
}

.text {
  height: 100vh;
  width: 100vw;
  background: transparent url("testo.webp") no-repeat center / cover;
  position: absolute;
}

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
}

@media (orientation: landscape) {
  .portrait {
    display: none
  }

  .landscape {
    height: 100vh;
    width: calc(32 / 9 * 100vh)
  }

}

@media (orientation: portrait) {
  .landscape {
    display: none
  }
}

.landscape .orbita {
  position: absolute;
}

.landscape .planet {
  animation: orbit infinite linear reverse;
}

.landscape .plutone .planet {
  offset-path: path('M 197,105 A 5450,1090 -20 1,0 942,2154 A 5450,1090 -20 1,0 197,105');
  animation-duration: 1240s;
}

.landscape .nettuno .planet {
  offset-path: path('M 523,-362 A 4400,1100 3.9 1,0 677,1832 A 4400,1100 3.9 1,0 523,-362');
  animation-duration: 824s;
}

.landscape .urano .planet {
  offset-path: path('M 600,97 A 2810,640 3.9 1,0 505,1373 A 2810,640 3.9 1,0 600,97');
  animation-duration: 420s;
}

.landscape .saturno .planet {
  offset-path: path('M 569,261 A 2010,452 3.9 1,0 631,1209 A 2010,452 3.9 1,0 569,261');
  animation-delay: 0.3s;
  animation-duration: 147s;
}

.landscape .giove .planet {
  offset-path: path('M 576,400 A 1403,315 3.9 1,0 624,1069 A 1403,315 3.9 1,0 576,400');
  animation-delay: 0.1s;
  animation-duration: 74s;
}

.landscape .marte .planet {
  offset-path: path('M 583,506 A 975,220 3.9 1,0 615,964 A 975,220 3.9 1,0 583,506');
  animation-delay: 0.4s;
  animation-duration: 9.4s;
}

.landscape .terra .planet {
  offset-path: path('M 589,595 A 590,135 3.9 1,0 611,879 A 590,135 3.9 1,0 589,595');
  animation-delay: 0.3s;
  animation-duration: 5s;
}

.landscape .venere .planet {
  offset-path: path('M 593,643 A 405,90 3.9 1,0 607,827 A 405,90 3.9 1,0 593,643');
  animation-delay: 0.2s;
  animation-duration: 3s;
}

.landscape .mercurio .planet {
  offset-path: path('M 596,685 A 210,50 3.9 1,0 604,785 A 210,50 3.9 1,0 596,685');
  animation-duration: 1.2s;
}

@keyframes orbit {
  0% {
    offset-distance: 0
  }
  100% {
    offset-distance: 100%
  }
}