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

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

.splash {
  height: 100vh;
  width: 100vw;
  background: white url("sfondo.webp") no-repeat center / cover;
}

.cover-all {
  height: 100vh;
  width: 100vw;
  position: absolute;
  inset: 0;
}

.bolle {
  background: transparent url("bolle.webp") no-repeat center / cover;
}

.croce {
  background: transparent url("croce.webp") no-repeat center / cover;
}

.cerniera {
  height: 100vh;
  width: calc(100vw + 2.66vh);
  left: -2.66vh;
  top: 0;
  position: absolute;
  background: transparent url("cerniera.webp") no-repeat center / cover;
  animation: translation 2s linear infinite;
}

.text {
  background-color: #009b7a;
  position: absolute;
  inset: 5vw;
}

.cerchio-piccolo {
  position: absolute;
  animation: rotation 60s linear infinite;
}

.cerchio-grande {
  position: absolute;
  animation: rotation 180s linear infinite reverse;
}

@media (orientation: landscape) {
  .text {
    mask: url("testo.webp") no-repeat center / auto 80%;
    -webkit-mask: url("testo.webp") no-repeat center / auto 80%;
  }

  .cerchio-piccolo {
    height: 100vh;
    width: 100vw;
    inset: 0;
    background: transparent url("cerchio-piccolo.webp") no-repeat center / auto 90%;
  }

  .cerchio-grande {
    inset: -10vh;
    background: transparent url("cerchio-grande.webp") no-repeat center / auto 100%;
  }

}

@media (orientation: portrait) {
  .text {
    mask: url("testo.webp") no-repeat center / contain;
    -webkit-mask: url("testo.webp") no-repeat center / contain;
  }

  .cerchio-piccolo {
    width: 100vh;
    height: 100vh;
    background: transparent url("cerchio-piccolo.webp") no-repeat center / auto 85%;
  }

  .cerchio-grande {
    top: -5vh;
    width: 110vh;
    height: 110vh;
    background: transparent url("cerchio-grande.webp") no-repeat center / auto 100%;
  }
}

@keyframes rotation {
  from {
    transform: none;
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes translation {
  from {
    transform: none;
  }
  to {
    transform: translateX(2.66vh);
  }
}