/* ======= HOJA DE ESTILO DE 01rey ======= */
*{
  margin: 0 auto;
  padding: 0;
 }
 @font-face {
   font-family: 'grape_nuts';
   src: url('../fuentes/grape_nuts.ttf');
 }
body{
     background-image: url("../imagenes/21_espacio.jpg");
     background-size: cover;
     background-repeat: no repeat;
    }
    .titulo{
      width: 100%;
      height: 70px;
      text-align: center;
      z-index: 999;
      font-family: grape_nuts;
      font-weight: bolder;
      font-size: 24pt;
      animation-name: titulo;
      animation-duration: 15s;
      animation-delay: 0.05s;
      animation-fill-mode: forwards;
      color: white;
      visibility: hidden;
      }

      @keyframes titulo {
        from {visibility: visible;
          opacity: 1;}
        to {visibility:hidden;
          opacity: 0.05;}
      }

      .satelite1{
        width: 100%;
        height: 100vh;
      }
      .texto{
        font-family: grape_nuts;
        font-weight: bolder;
        font-size: 24pt;
        color: white;
      }
      #texto1{
        position: absolute;
        width: 80%;
        height: 50%;
        left: 50%;
        z-index: -100;
        transform: translate(-50%, 0);
        bottom: 0;
        overflow:hidden;
        animation-name: texto_up1;
        animation-duration: 30s;
        animation-delay: 1s;
        visibility: hidden;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
      }
      @keyframes texto_up1{
        0% {visibility: visible; top: 100vh;}

        100%{visibility: hidden; top: -200vh}
      }
      .personaje{
        background-image: url("../imagenes/22_rey.png");
        background-size: cover;
        position: absolute;
        width: 500px;
        height: 500px;
        left: 25%;
        top: 25%;
        transform: translate(-50%, -50%);
        transform: scale(0.1);
        visibility: hidden;
        animation-name: personaje;
        animation-delay: 5s;
        animation-duration: 20s;
        animation-fill-mode: forwards;
        animation-direction: normal;
        animation-timing-function: linear;
        opacity: 0.1;
      }
      @keyframes personaje {
        0%{visibility: visible; transform: scale(0.2); opacity: 0.1;}
        25%{visibility: visible; transform: scale(0.25); opacity: 0.5;}
        50%{visibility: visible; transform: scale(0.5); opacity: 1; transform: translate(-30%,0);}
        75%{visibility: visible; transform: scale(1); opacity: 1; transform: translate(-75%,0);}
        100%{visibility: visible; transform: scale(0.1); opacity: 0.01; transform: translate(-75%,-50%);}
      }
      #texto2{
        position: absolute;
        width: 65%;
        height: 200%;
        left: 35%;
        z-index: 1;
        bottom: 0;
        overflow:hidden;
        animation-name: texto_up2;
        animation-duration: 60s;
        animation-delay: 10s;
        visibility: hidden;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
      }
      @keyframes texto_up2{
        0% {visibility: visible; top: 100vh;}
        /*50%{visibility: visible; top: 50vh;}*/
        100%{visibility: hidden; top: -400vh}
      }
      .vuelo{
        position:absolute;
        width: 100%;
        height: 100vh;
        right: 0px;
        top: 0px;
        background-image: url("../imagenes/23_vuelo.png");
        background-size: cover;
        background-position: center;
        transform: scale(0.1);
        overflow-x: hidden;
        visibility: hidden;
        opacity: 0.1;
        animation-name: vuelo;
        animation-duration: 15s;
        animation-fill-mode: forwards;
        animation-timing-function: linear;
        animation-delay: 20s;
        animation-direction: normal;
      }
      @keyframes vuelo {
        0%{visibility: visible; opacity: 0.25; right:0px; transform: scale(0.1);}
        50%{visibility: visible; opacity: 0.50; transform: scale(0.50);}
        100%{visibility: visible; opacity: 1; transform: scale(1);}
      }

      /* ========== ESTILO DE LA FLECHA DE CAMBIO DE PÁGINA ========== */
     
      /* Estilo para la flecha */
      .arrow {
        width: 50px;
        height: 50px;
        cursor: pointer;
        transition: stroke 0.3s ease, fill 0.3s ease;
      }

      /* Estilo para el path de la flecha */
      .arrow-path {
        stroke: #FFD700; /* Color amarillo-oro */
        stroke-width: 16;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      /* Cambiar el color de la flecha al pasar el ratón */
      .arrow:hover .arrow-path {
        stroke: red;
      }

      /* Cambiar el color de la flecha al hacer click */
      .arrow:active .arrow-path {
        stroke: green;
      }

      /* Contenedor de la flecha */
      .arrow-container {
        position: fixed;
        right: 20px;
        bottom: 20px;
        text-align: center;
      }

      /* Estilo de la etiqueta de la flecha */
      .arrow-label {
        display: block;
        font-family: 'Grape Nuts', cursive;
        color: #FFD700;
        margin-top: 5px;
      }