/*==============================================*/
/* CRÉATION DES STYLES POUR LA PAGE DE LANDING */
/*==============================================*/

body {
  background-color: #300a24;
  color: #FFF;
  font-family: "Courier New";
  margin-left: .25rem; /*= 4px (car 1rem fait 16px)*/
  margin-right: .25rem;
}

.page-wrap {
  position: absolute;
  top: 2rem;
  bottom: 2rem;
}

.end-anim {
  height: 2rem;
  position: absolute;
  bottom: 0;
  left: 0;
}

#end-anim {
  position: absolute;
  bottom:0;
  left:0;
  border-width: 0;
  margin: 3px;
}

.terminal-green {
  color: #8AE234;
  font-weight: bold;
}

.terminal-blue {
  color: #729FCF;
}

p {
  margin-bottom: .1875rem; /*= 3px (car 1rem fait 16px)*/
  overflow: hidden;
  /* border-right: solid 8px rgba(255,255,255,.75); */
}

.hidden {
  display: none;
}

.typed-cursor {
  display: inline-block;
}


/*=============================================================*/

/* Zone d'affichage du bouton selon les tailles d'écran : on le met en haut pour les smartphones */

.end-anim-mob {
  display: none;
}

    /* Extra small devices (portrait phones, less than 576px) */

    @media (max-width: 575.98px) {

      .end-anim {
        display: none;
      }

      .page-wrap {
        top: 3rem;
      }

      .end-anim-mob {
        display: block;
        margin-bottom: 3rem;
      }

      #end-anim-mob {
        position: absolute;
        top:0;
        left:0;
        border-width: 0;
        margin: 3px;
      }

    }


    /* Small devices (landscape phones, 576px and up) */

    @media (min-width: 576px) and (max-width: 767.98px) {

      .end-anim {
        display: none;
      }

      .page-wrap {
        top: 3rem;
      }

      .end-anim-mob {
        display: block;
        margin-bottom: 3rem;
      }

      #end-anim-mob {
        position: absolute;
        top:0;
        left:0;
        border-width: 0;
        margin: 2px;
      }

    }



    /* Small devices that become large on landscape (i.e iphone XPlus) */

    @media (min-width: 767px) and (max-width: 991.98px) and (orientation: landscape) {

      .end-anim {
        display: none;
      }

      .page-wrap {
        top: 3rem;
      }

      .end-anim-mob {
        display: block;
        margin-bottom: 3rem;
      }


      #end-anim-mob {
        position: absolute;
        top:0;
        left:0;
        border-width: 0;
        margin: 2px;
      }

    }


/*=============================================================*/



/*-----------------------*/
/* AJOUT DES ANIMATIONS */
/*-----------------------*/

/* Création des variables à animer */
  .typed-cusor {
    animation: curseur-a-animer 600ms linear infinite;
  }

  /* animation du curseur via la variable créée */
  @keyframes curseur-a-animer{
    50%{opacity: 0;}
  }

  @-webkit-keyframes curseur-a-animer{
    50%{opacity: 0;}
  }
  @-moz-keyframes curseur-a-animer{
    50%{opacity: 0;}
  }
  @-o-keyframes curseur-a-animer{
    50%{opacity: 0;}
  }



  #end-anim {
    animation: bouton-end-anim 400ms linear 3;
  }

    @keyframes bouton-end-anim{
      0%{background: red; opacity: .4}
      100%{opacity: 1;}
    }