/* 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." */


@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@700&display=swap');

body {

    margin:0;
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;
}
.contenido{
    width:700px;
    margin-left:15%;
    margin-top:80px;
}
/* EFECTO OLA Y ARCOÍRIS */
.ola-arcoiris {
  display: inline-block; /* Requisito para que el texto se pueda mover */
  font-weight: bold;
  
  /* Animación del movimiento flotante (ola) */
  animation: flotarOla 2s ease-in-out infinite alternate,
             cambioArcoiris 4s linear infinite;
}

/* 1. Animación de movimiento arriba y abajo */
@keyframes flotarOla {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-8px); /* Sube 8 píxeles */
  }
}

/* 2. Animación de cambio de color arcoíris */
@keyframes cambioArcoiris {
  0%   { color: #ff007f; } /* Rosa */
  20%  { color: #ff0000; } /* Rojo */
  40%  { color: #ffaa00; } /* Amarillo */
  60%  { color: #00ff66; } /* Verde neón */
  80%  { color: #00ccff; } /* Azul cian */
  100% { color: #ff007f; } /* Regresa a rosa */
}


body{

    margin:0;
    background:black;
    color:white;
    font-family:Verdana;

}

#loadingScreen{

    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;

    background:black;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    z-index:9999;

}

#loader{

    width:350px;
    height:20px;

    border:2px solid white;

    margin-top:20px;

}

#progress{

    width:0%;
    height:100%;

    background:#ff66cc;

}

#contenido{

    opacity:0;

    transition:opacity 1.5s;

}