/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
 @font-face {
font-family: "ERASDEMI";
src: url("/Media/eras-itc-demi.ttf") format("truetype");
}

body {
  color: black;
  font-family: ERASDEMI;
  margin: 0;
}


 #VIDEOBACK {
   position: fixed; /* Esta wea hace que aunque hagas scroll se quede el video quieto */
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* Esta wea evita que el video se estire feo */
   z-index: -1; /* y esta wea lo manda al fondo de todo */
 } 

 #container { 
   width: 95%;      /* se adapta al ancho de la pantalla */
   max-width: 900px; /* pero no crece más de 900px en pc */
   margin: 0 auto;   /* lo mantiene centrado */
}

.background {
  position: fixed;
  inset: 0;

  background-image: url("/Media/background.png");
  background-repeat: repeat;

  background-size: 400px 400px;
  image-rendering: pixelated;

  animation: scroll 20s linear infinite;
  opacity:0.3;
}

.background-container {
  width: 100vw;
  height: 100vh;

  position: fixed;
  z-index: -1;

  background: linear-gradient(#aec7ea, #4354e7 50%);
}

.deco {
  width: 100vw;
  height: 126px;

  background-image: url("/Media/deco.svg");
  filter: drop-shadow(4px 4px 6px #00000080);

  animation: scroll-deco 60s linear infinite;
  z-index: 0;
}

.up {
  position: fixed;
  top: 0;
}

.down {
  position: fixed;
  bottom: 0;

  transform: rotate(180deg);
  transform-origin: center;
}

@keyframes scroll {
  from { background-position: 0 0; }
  to   { background-position: -400px -400px; }
}

@keyframes scroll-deco {
  from { background-position: 0 0; }
  to   { background-position: 100vw 0; }
}

.ImagenesCentro {
  display: block;
  margin: auto;
  max-width: 100%;
  height: auto;
}

/* tamaño de TITULOS en PC */
.Titulos {
  font-size: 6vw;
  text-align: center;
}

/* tamaño de TITULOS en TELEFONO */
@media (max-width: 600px) {
  .Titulos {
  font-size: 7vw;
  text-align: center;
  }
}

/* tamaño de TEXTOS en PC */
.Textos {
  font-size: 2vw;
  text-align: center;
}

/* tamaño de TEXTOS en TELEFONO */
@media (max-width: 600px) {
  .Textos {
  font-size: 5vw;
  text-align: center;
  }
}

/* tamaño de TEXTOS mini en PC */
.TextosMini {
  font-size: 1.5vw;
  text-align: center;
}

/* tamaño de TEXTOS mini en TELEFONO */
@media (max-width: 600px) {
  .TextosMini {
  font-size: 4vw;
  text-align: center;
  }
}

.Botones {
  display: inline-block;
  width: 23vw;  /* Ajusta al tamaño de tus botones */
  height: 13vw;
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.2s, filter 0.2s; /* Efectos suaves */
}
.Botones:hover {
  transform: scale(1.05); /* Crece un poquito */
  filter: brightness(1.2); /* Brilla un poco (opcional) */
}