body {
    overflow-x: hidden; background: rgb(255,255,255);
background: linear-gradient(120deg, );
    font-size: 30px;
}

@font-face {
    font-family: "TituloPrincipal";
    src: url(../fonts/) format("truetype");
}

@font-face {
    font-family: "Subtitulos";
    src: url(../fonts/) format("truetype");
}

@font-face {
    font-family: "MainFont";
    src: url(../fonts/) format("truetype");
}

@font-face {
    font-family: "SecondFont";
    src: url(../fonts/) format("truetype");
}


@font-face {
    font-family: "Parisienne";
    src: url(../fonts/Playball.ttf) format("truetype");
}

@font-face {
    font-family: "CENTURI_GOTHIC";
    src: url(../fonts/GOTHIC.TTF) format("truetype");
}

@font-face{
    font-family:"Grand-Rainbow-Demo";
    src: url(../fonts/Grand-Rainbow-Demo.ttf) format("truetype");
}

@font-face{
    font-family:"Allison";
    src: url(../fonts/Allison.ttf) format("truetype");
}

@font-face{
    font-family:"SEGOE";
    src: url(../fonts/Oregano.ttf) format("truetype");
}

.cuentaRegresiva{
    width: 100%;
    height: 350px;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-size: contain;

}

.fondoAnimado{
    background-image: url(../fnd01.png);
    animation-duration: 60s;
    animation-name: moverFondo;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;

}

.nombreFestejado{
    font-size: 5em;
}

.invitacion{
    max-width: 650px;
    margin:0px auto;
}

.fotoRedondeada{
        border-radius:3%; margin-top: 0px; box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
}

.tablaRedondeada{
     border-radius:3%; margin-top: 0px; box-shadow: 4px 4px 10px 4px rgba(0, 0, 0, 0.2);
}


.carousel-image{
    /*width:100vw;*/
    height: 100vh;

    animation-duration: 8s;
    animation-name: zoomin;
    animation-iteration-count: infinite;
    animation-direction: alternate;


}

.textoTitular{
  font-family: "TituloPrincipal";
    font-size: em;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    line-height:2em;
}

.textosSubtitulos{
  font-family: "Subtitulos";
  font-size: em;
}

.textosInteriores{
    font-family: "MainFont";
    font-size: em;
    color: aliceblue;
    text-shadow: 1px 1px 2px black;
    line-height:1.2em;
    /*background-color: blue;*/

}



.textosTitulos{
    font-family: "SecondFont";
    font-size: em;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    line-height:2em;
    /*background-color: blue;*/

}

.nombresPadrinos{
    font-family: "MainFont";
    font-size: 2em;
    color: #fff;
    text-shadow: 1px 1px 2px black;
    line-height:1em;

}

.stop-scrolling {
  height: 100%;
  overflow: hidden;
}

.pergaminoTinte {
  background-color: ;
  
  background-blend-mode: multiply;
}

.container {
  position: relative;
    height: 20%;
    width: 100%;
    /*background-color: aqua;*/
}

.centered-element {
    width: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-150%);
}

.textoNormal{
    margin-top: 35px;
    font-family: "MainFont";
    font-size: 25px;
    color: aliceblue;
    text-shadow: 1px 1px 2px black;
    line-height:25px;
}

.textoCuentaRegresiva{
    margin-top: 50px;
    font-family: "MainFont";
    font-size: 2em;
    color: aliceblue;
    text-shadow: 1px 1px 2px black;
    line-height:1em;
}

.textoPieInvitacion{
    font-family: "MainFont";
    font-size: 0.5em;
}

.mitadAncho{
    margin-top: 50px;
    /*max-width: 75%;*/
}

.c-negro{
    color:#333;
    text-shadow: none;
}


.fadeInAnimation{
    animation-duration: 1.5s;
    animation-name: fadein;
    animation-iteration-count: 1;
}



.aparecible{

}

@keyframes moverFondo {
  from {
    background-position: 0% 100%;
  }

  to {
   background-position: 0% 0%;
  }
}


@keyframes fadein {
  from {
    opacity: 0.0;
  }

  to {
   opacity: 1.0;
  }
}

@keyframes zoomin {
  from {
    background-size: auto 100vh;
  }

  to {
    background-size: auto 115vh;
  }
}

@media (max-width: 500px) {
  /* … */


    body{
        font-size:25px;
    }
}

.animation-rotate-Y{
		  animation-name: enterRotatingY;
		  animation-duration: 2s;  
		  animation-delay: 0s;
		  animation-fill-mode: backwards;
	}

    .animation-rotate-X{
		  animation-name: enterRotatingX;
		  animation-duration: 2s;  
		  animation-delay: 0s;
		  animation-fill-mode: backwards;
	}

.animation-move-l-to-r{
		  animation-name: slideInFromRight;
		  animation-duration: 2s;  
		  animation-delay: 0s;
		  animation-fill-mode: backwards;
	}
	
	.animation-move-r-to-l{
		  animation-name: slideInFromLeft;
		  animation-duration: 2s;  
		  animation-delay: 0s;
		  animation-fill-mode: backwards;
	}
	
	@keyframes enterRotatingY {
	  0% {
		transform:  rotateX(90deg);
		opacity:0.5;
	  }
	  100% {
		transform:  rotateX(0deg);
		opacity:1;
	  }
	}

    @keyframes enterRotatingX {
	  0% {
		transform:  rotateY(90deg);
		opacity:0.5;
	  }
	  100% {
		transform:  rotateY(0deg);
		opacity:1;
	  }
	}
	
	@keyframes slideInFromRight {
	  0% {
		transform: translateX(50%) rotateX(120deg);
		opacity:0;
	  }
	  100% {
		transform: translateX(0) rotateX(0deg);
		opacity:1;
	  }
	}
	
	@keyframes slideInFromLeft {
	  0% {
		transform: translateX(-50%) rotateX(120deg);
		opacity:0;
	  }
	  100% {
		transform: translateX(0) rotateX(0deg);
		opacity:1;
	  }
	}
	
	.hideOverflow{
		overflow: hidden;;
	}

  .video-background {
  position: relative;
  width: 100%;
  height: 100vh; /* Full viewport height */
  overflow: hidden; /* Prevents video from spilling over */
}

.video-background video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the div area */
  z-index: -1; /* Puts the video behind the content */
  clip-path: inset(5px 5px);
}

.content {
  position: relative;
  z-index: 1; /* Ensures content is on top of the video */
  text-align: center;
  color: white; /* Make text visible over the video */
  padding: 20px;
}