html,body{
    height:100%;
    width: 100%;
}
    /*
    border: 1px solid red; */

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #000;
}
#splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000;
}
#splash img {
    max-width: 100%;
    max-height: 100%;
}

/* Impostazioni generali della splash screen */
.splash-screen {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0; /* Colore di sfondo della pagina */
}

/* Contenitore del logo */
.logo-container {
  position: relative;
  width: 230px; /* Dimensione del logo */
  height: 230px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Stile del logo */
.logo {
  width: 93%;
  height: auto;
  border-radius: 50%;
  position: relative;
  z-index: 2; /* Assicurati che il logo stia sopra l'animazione */
}

/* Bordo animato */
.animated-border {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 5px solid transparent; /* Bordo trasparente */
  border-top: 5px solid var(--coloreEvidenza); /* Colore del bordo - Cambia il colore per personalizzare l'aspetto*/
  border-radius: 50%; /* Forma circolare */
  animation: rotate 2s linear infinite; /* Animazione continua (2S) per renderla più lenta o più veloce. */
  z-index: 1; /* Posiziona l'animazione dietro al logo */
}

/* Animazione del bordo */
@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}