/* ======= HOJA DE ESTILO DE 07tierra ======= */
*{
  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: 300%;
        left: 50%;
        z-index: -100;
        transform: translate(-50%, 0);
        bottom: 0;
        overflow:hidden;
        animation-name: texto_up1;
        animation-duration: 60s;
        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: -500vh}
      }
      .tierra{
        background-image: url("../imagenes/tierra.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: tierra;
        animation-delay: 10s;
        animation-duration: 20s;
        animation-fill-mode: forwards;
        animation-direction: normal;
        animation-timing-function: linear;
        opacity: 0.1;
      }
     @keyframes tierra {
        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(-40%,0);}
        75%{visibility: visible; transform: scale(1); opacity: 1; transform: translate(-40%,0);}
        100%{visibility: visible; transform: scale(0.1); opacity: 0.0; transform: translate(-75%,-50%);}
      }

      #texto2{
        position: absolute;
        width: 50%;
        height: 200%;
        left: 50%;
        z-index: 1;
        bottom: 0;
        overflow:hidden;
        animation-name: texto_up2;
        animation-duration: 35s;
        animation-delay: 15s;
        visibility: hidden;
        animation-fill-mode: forwards;
        animation-timing-function: ease-out;
      }
      @keyframes texto_up2{
        0% {visibility: visible; top: 100vh;}

        100%{visibility: hidden; top: -175vh}
      }
      .vuelo{
        position:absolute;
        width: 100%;
        height: 100vh;
        right: 0px;
        top: 0px;
        background-image: url("../imagenes/flor.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: 40s;
        animation-direction: normal;
      }
      @keyframes vuelo {
        0%{visibility: visible; opacity: 0.25; right:0px; transform: scale(0.1); transform: translate(-75%,25%);}
        25%{visibility: visible; opacity: 0.5; transform: scale(0.25);transform: translate(-50%,50%);}
        50%{visibility: visible; opacity: 0.50; transform: scale(0.50);}
        75%{visibility: visible; opacity: 1; transform: scale(0.75);}
        100%{visibility: visible; opacity: 1; transform: scale(1);}
      }