body {
  background-color: #01011C;
  a:hover { color: #fff; text-shadow: 0px 0 25px #F2C85E; }
    }


video#bgvid { 

	position: fixed; right: 0; bottom: 0;
	
	min-width: 100%; min-height: 100%;
	
	width: auto; height: auto; z-index: -100; 
	
	background: url(snap2.jpg) no-repeat;
	
	background-size: cover; 
	
	z-index: 0;
    top: -1%;
    filter: grayscale(0%) brightness(60%) contrast(100%); 
}

video { display: block; } 

@media only screen and (max-width: 768px) {

		video#bgvid {display:yes;}	
		
		body {background: url(snap2.jpg) no-repeat center top; background-size: cover; }
		
}    

/* Add some content at the bottom of the video/page */
.box {
  width: 100%;
  height: 95vh;
  display: flex;
  flex-direction: column;
}
.contentx {
  position: relative;
  bottom: 0;
   width: 100%;
   height: fit;
  padding: -1px;
  	

}

/* Stile base per Computer (Schermi grandi) */
.navbar-nav {
    display: flex;
    justify-content: flex-end; /* Allinea a DESTRA */
    width: 100%;
    list-style: none;
    padding: 10;
    margin: 10;
}

.testo-5 {
  font-size: 16px;
}


.testo-6 {
  font-size: 44px;
}

/* Stile per Smartphone (Schermi fino a 768px) */
@media (max-width: 768px) {
    .navbar-nav {
        justify-content: center; /* Sposta al CENTRO */
        flex-direction: row;     /* Mantiene i link affiancati */
    }
}

    .navbar-nav a {
  color: rgba(90,173,248,0.7); /* Colore in formato Esadecimale */
  text-decoration: none;
}

footer a {
  color: rgba(90,173,248,0.2); /* Sostituisci con il colore che preferisci */
  font-family: 'Inter', sans-serif;
  text-decoration: none; /* Rimuove la sottolineatura (opzionale) */
}
    
.responsive {
 max-width: 100%;
 height: auto;
}

.testo-5 {
  font-size: 16px;
}


.testo-6 {
  font-size: 44px;
}

.contenitore-flex {
  display: flex;       /* Attiva Flexbox per affiancare i figli */
  gap: 20px;          /* Crea uno spazio di 20px tra i blocchi */
}

.gruppo-testo {
  flex: 1;            /* Opzionale: distribuisce lo spazio in parti uguali */
}



p {
 
font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.5;
   padding:20px; 
 margin:20px; 
 border-radius: 15px;
 box-shadow: 4px 4px 6px 1px rgba(90,173,248,0.4);
 background-color:rgba(1,1,28,0.30); 
 border:none; 
 width: 85%; 
  color: #E0D8CE;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  to {
    
    opacity: 1;
  transform: translateY(0);
  }
}

.fade-in-container {
  animation: fadeIn 1.5s ease-in-out forwards;
}

.fade-in-container2 {
  animation: fadeIn 3.5s ease-in-out forwards;
}

.fade-in-container3 {
  animation: fadeIn 5.5s ease-in-out forwards;
}
.fade-in-container4 {
  animation: fadeIn 7.5s ease-in-out forwards;
}

h1  {
 
font-family: 'rungkutregular';
	font-size:58px;
	font-weight: normal;
    font-style: normal;
	color: #E0D8CE;
}

.testoCorpo3{
	font-family: 'cinzel_decorativeregular';
	font-size:17px;
		
}
.testoCorpo4{
	font-family: 'rungkutregular';
	font-size:18px;
		
}

@font-face {
    font-family: 'cinzel_decorativeregular';
    src: url('cinzeldecorative-regular-webfont.woff2') format('woff2'),
         url('cinzeldecorative-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}

@font-face {
    font-family: 'sinkin_sans400_regular';
    src: url('sinkinsans-400regular-webfont.woff2') format('woff2'),
         url('sinkinsans-400regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'gavona_elegantregular';
    src: url('gavonaelegantregular-vn764-webfont.woff2') format('woff2'),
         url('gavonaelegantregular-vn764-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'therefore_demoregular';
    src: url('thereforedemoregular-8o00m-webfont.woff2') format('woff2'),
         url('thereforedemoregular-8o00m-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'rungkutregular';
    src: url('rungkut-ayde9-webfont.woff2') format('woff2'),
         url('rungkut-ayde9-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'landasansmedium';
    src: url('landasansmedium-alj6m-webfont.woff2') format('woff2'),
         url('landasansmedium-alj6m-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

.box-complesso {
  width: 70%;
  margin-top: 100px; 
  padding: 20px;
  background: rgba(1,1,28,0.30);
  color: #E0D8CE;
  border-radius: 12px;
  font-family: 'Inter', sans-serif;
  
  text-align: center;
   box-shadow: 4px 4px 6px 1px rgba(90,173,248,0.4);
  
  /* Applica l'animazione complessa */
  animation: arrivoCinematico 5.2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* Definizione dell'effetto di arrivo */
@keyframes arrivoCinematico {
  0% {
    opacity: 0;
    filter: blur(12px);                 /* Parte completamente sfocato */
    transform: scale(0.8) translateY(50px) rotateX(-20deg); /* Piccolo, in basso e inclinato in 3D */
  }
  50% {
    opacity: 0.5;
    filter: blur(3px);                  /* Inizia a mettersi a fuoco */
  }
  100% {
    opacity: 1;
    filter: blur(0);                    /* Nitidezza perfetta */
    transform: scale(1) translateY(0) rotateX(0deg); /* Ritorna alla posizione e dimensione originale */
  }
}