@charset "UTF-8";

/* Changer le mode de calcul des tailles de boîtes */
html {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*, *:after, *:before {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* border-box (boîte fixe) ≠ content-box (contenu fixe) */

/* contrer les effets standards des navigateurs */
body {
  margin: 0;
  padding: 0;
}

/* corriger le problème d'alignement sur le bas des images */
img {
  max-width: 100%;
  /* Adaptation taille img en responsive */
  vertical-align: bottom;
  /* baseline*/
}

/*=====================*/
/* Classes Utilitaires */
/*=====================*/

/* Système de colonnes avec les "faux tableaux" */
.ligne {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.col {
  vertical-align: top;
  display: table-cell;
}

/* Flottants gauche et droite pour de petits éléments du contenu */
.float-l {
  float: left;
  margin-right: 8px;
}

.float-r {
  float: right;
  margin-left: 8px;
}

/* LISTES : */

/* 1. li alignés / inline-block */
.aligne {
  list-style: none;
  padding: 0;
}

.aligne li {
  display: inline-block;
}

/* Pour l'impression */

.print-only {
  /* pour afficher des éléments uniquement lors de l'impression */
  display: none;
}

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

body {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 1);
  overflow: hidden;
}

h1 {
  text-align: center;
}

.lumos {
  color: rgba(210, 190, 0, 1);
  text-shadow: -2px -2px 1px rgba(255, 255, 255, 1),
    0.5px 0.5px 1px rgba(255, 255, 255, 1);
}

#fin {
  float: right;
  margin: -3vh 10vw 0 0;
  color: rgba(210, 190, 0, 1);
  font-size: 3vmax;
}

#page {
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;
}

/*		Ecriture     */

#table {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 2vh;
  background: linear-gradient(15deg,
      rgba(100, 60, 10, 0.5) 25%, rgba(0, 0, 0, 0.75)27.5%, rgba(100, 60, 10, 0.5) 30%,
      rgba(100, 60, 10, 0.5) 55%, rgba(0, 0, 0, 0.75)57.5%, rgba(100, 60, 10, 0.5) 60%,
      rgba(100, 60, 10, 0.5) 85%, rgba(0, 0, 0, 0.75)87.5%, rgba(100, 60, 10, 0.5) 90%);
  animation: interferences0 7s 10s forwards;
  /*    display: none;    */
}

#tableF {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding-top: 2vh;
  background: linear-gradient(15deg,
      rgba(100, 60, 10, 0.5) 25%, rgba(0, 0, 0, 0.75)27.5%, rgba(100, 60, 10, 0.5) 30%,
      rgba(100, 60, 10, 0.5) 55%, rgba(0, 0, 0, 0.75)57.5%, rgba(100, 60, 10, 0.5) 60%,
      rgba(100, 60, 10, 0.5) 85%, rgba(0, 0, 0, 0.75)87.5%, rgba(100, 60, 10, 0.5) 90%);
  /*    display: none;    */
}

#book {
  width: 75%;
  height: 80%;
  margin: 5% auto;
  background-color: rgba(255, 255, 255, 0);
  transform: skewX(-15deg);
  color: rgba(80, 50, 0, 1);
  font-size: 3vmin;
  background-color: rgba(190, 180, 160, 1);
  border-radius: 10vmin 0 10vmin 0;
  box-shadow: -2vmin -3vmin 5vmin 1vmin rgba(30, 20, 10, 1),
    inset 5vmin 1vmin 50vmin 1vmin rgba(30, 20, 0, 1),
    inset 0vmin 7vmin 15vmin 1vmin rgba(30, 20, 10, 0.5);
}

#masterNarr {
  width: 80%;
  height: 80%;
  margin: 0 auto 5vmax auto;
  padding: 5vmin;
  overflow-y: scroll;
  text-shadow: 1px 0.5px 1px rgba(60, 30, 0, 0.75), -1px -1px 3px rgba(255, 255, 255, 0.5);
}

.bas {
  position: absolute;
  top: 61vh;
  height: 20vh;
  width: 110%;
  margin: 0 0 0 -7.5vw;
  background: linear-gradient(90deg, rgb(190, 180, 160) 87%, rgba(190, 180, 160, 0.75) 100%);
  border-radius: 25vh;
  box-shadow: -2vmin -3vmin 5vmin 1vmin rgba(30, 20, 10, 0.75),
    inset 0 0 5vh rgba(30, 20, 10, 1),
    inset 0 0 10vh 5vh rgba(30, 20, 10, 0.5);
}

.parchemin div {
  width: 20vh;
  height: 20vh;
  border-radius: 25vh;
  float: right;
  background-color: rgba(50, 30, 0, 0.25);
  box-shadow: -10vh 0vh 25vh 1vh rgba(30, 20, 10, 0.99),
    inset 7vh -3vh 5vh -2vh rgba(30, 20, 10, 0.75);
  filter: blur(0.25vh);
}



/*		Neysh'Val Thar Quan'Thy     */

#cosmos {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0;
  background: transparent url(../img/Space9.jpg) center no-repeat;
  background-attachment: fixed;
  animation: interferences1 7s 10s forwards;
  /*        */
}

#balise {
  width: 80%;
  height: 80%;
  margin: 5% auto;
  background: transparent;
  transform: skewX(-15deg);
}

#secNarr {
  font-family: Audiowide;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 5vh 5vw;
  overflow-y: scroll;
  font-size: 3vmin;
  color: rgba(200, 250, 250, 1);
  background-color: rgba(20, 100, 150, 0.75);
}

.learn textarea {
  font-size: 2vmin;
  height: auto;
  width: 100%;
}

.learn label:first-child {
  margin-left: 10vw;
}

#poeme {
  text-align: center;
  padding: 5vmin;
}

.choix {
  display: flex;
  justify-content: space-around;
  height: 10vh;
  width: 100%;
}

.choix a {
  height: 50px;
  width: 150px;
  text-decoration: none;
  background-color: rgba(200, 200, 200, 1);
  box-shadow: inset 0 0 10% 1vmin rgba(0, 0, 0, 1), -5px -3px 1vmin 1vmin rgba(0, 0, 0, 1), 3px 3px 1vmin 1vmin rgba(255, 255, 255, 1);
}

/*ANIMATIONS*/
@keyframes interferences0 {
  0% {
    opacity: 1;
    z-index: 1;
  }

  1% {
    transform: translateX(-1%);
  }

  1.5% {
    transform: translateX(1%);
  }

  2% {
    transform: translateX(-1%);
  }

  2.5% {
    transform: translateX(1%);
  }

  3.5% {
    transform: translateX(-1%);
  }

  3.5% {
    transform: translateX(1%);
  }

  4% {
    transform: translateX(-1%);
  }

  4.5% {
    transform: translateX(1%);
  }

  5% {
    transform: translateX(-1%);
  }

  5.5% {
    transform: translateX(1%);
  }

  10% {
    opacity: 0.5;
    transform: translateX(-1%);
  }

  10.5% {
    transform: translateX(1%);
  }

  11% {
    transform: translateX(-1%);
  }

  11.5% {
    transform: translateX(1%);
  }

  12.5% {
    opacity: 0.7;
    transform: translateX(-1%);
  }

  13.5% {
    transform: translateX(1%);
  }

  14% {
    transform: translateX(-1%);
  }

  14.5% {
    transform: translateX(1%);
  }

  15% {
    transform: translateX(-1%);
  }

  15.5% {
    transform: translateX(1%);
  }

  25% {
    opacity: 0.7;
    transform: translateX(-1%);
  }

  25.5% {
    transform: translateX(1%);
  }

  27% {
    transform: translateX(-1%);
  }

  27.5% {
    transform: translateX(1%);
  }

  30% {
    opacity: 0.5;
    transform: translateX(-1%);
  }

  30.5% {
    transform: translateX(1%);
  }

  31% {
    transform: translateX(-1%);
  }

  31.5% {
    transform: translateX(1%);
  }

  32% {
    transform: translateX(-1%);
  }

  32.5% {
    transform: translateX(1%);
  }

  35% {
    transform: translateX(-1%);
  }

  35.5% {
    transform: translateX(1%);
  }

  36% {
    transform: translateX(-1%);
  }

  36.5% {
    transform: translateX(1%);
  }

  37% {
    opacity: 0.8;
    transform: translateX(-1%);
  }

  37.5% {
    transform: translateX(1%);
  }

  40% {
    transform: translateX(-1%);
  }

  40.5% {
    transform: translateX(1%);
  }

  41% {
    transform: translateX(-1%);
  }

  41.5% {
    opacity: 0.5;
    transform: translateX(1%);
  }

  42% {
    transform: translateX(-1%);
  }

  42.5% {
    transform: translateX(1%);
  }

  43% {
    transform: translateX(-1%);
  }

  43.5% {
    transform: translateX(1%);
  }

  45% {
    transform: translateX(-1%);
  }

  45.5% {
    transform: translateX(1%);
  }

  47% {
    transform: translateX(-1%);
  }

  47.5% {
    transform: translateX(1%);
  }

  49% {
    transform: translateX(-1%);
  }

  49.5% {
    opacity: 0.5;
    transform: translateX(1%);
  }

  50% {
    opacity: 0.3;
    transform: translateX(-1%);
  }

  50.5% {
    transform: translateX(1%);
  }

  51% {
    transform: translateX(-1%);
  }

  51.5% {
    transform: translateX(1%);
  }

  52% {
    transform: translateX(-1%);
  }

  52.5% {
    transform: translateX(1%);
  }

  53% {
    transform: translateX(-1%);
  }

  53.5% {
    opacity: 0.9;
    transform: translateX(1%);
  }

  54% {
    transform: translateX(-1%);
  }

  54.5% {
    transform: translateX(1%);
  }

  55% {
    opacity: 0.7;
    transform: translateX(-1%);
  }

  55.5% {
    transform: translateX(1%);
  }

  56% {
    transform: translateX(-1%);
  }

  56.5% {
    transform: translateX(1%);
  }

  57% {
    transform: translateX(-1%);
  }

  57.5% {
    transform: translateX(1%);
  }

  58% {
    opacity: 0.2;
    transform: translateX(-1%);
  }

  58.5% {
    opacity: 0.5;
    transform: translateX(1%);
  }

  100% {
    opacity: 0;
    z-index: 0;
    display: none;
  }
}

@keyframes interferences1 {
  0% {
    opacity: 0;
    z-index: 0;
    display: none;
  }

  1% {
    transform: translateX(-1%);
  }

  1.5% {
    transform: translateX(1%);
  }

  2% {
    transform: translateX(-1%);
  }

  2.5% {
    transform: translateX(1%);
  }

  3.5% {
    transform: translateX(-1%);
  }

  3.5% {
    transform: translateX(1%);
  }

  4% {
    transform: translateX(-1%);
  }

  4.5% {
    transform: translateX(1%);
  }

  5% {
    transform: translateX(-1%);
  }

  5.5% {
    transform: translateX(1%);
  }

  10% {
    opacity: 0.5;
    transform: translateX(-1%);
  }

  10.5% {
    transform: translateX(1%);
  }

  11% {
    opacity: 0.05;
    transform: translateX(-1%);
  }

  11.5% {
    transform: translateX(1%);
  }

  12.5% {
    opacity: 0.7;
    transform: translateX(-1%);
  }

  13.5% {
    transform: translateX(1%);
  }

  14% {
    transform: translateX(-1%);
  }

  14.5% {
    transform: translateX(1%);
  }

  15% {
    opacity: 0.15;
    transform: translateX(-1%);
  }

  15.5% {
    transform: translateX(1%);
  }

  25% {
    transform: translateX(-1%);
  }

  25.5% {
    transform: translateX(1%);
  }

  27% {
    transform: translateX(-1%);
  }

  27.5% {
    transform: translateX(1%);
  }

  30% {
    opacity: 0.5;
    transform: translateX(-1%);
  }

  30.5% {
    transform: translateX(1%);
  }

  31% {
    transform: translateX(-1%);
  }

  31.5% {
    transform: translateX(1%);
  }

  32% {
    transform: translateX(-1%);
  }

  32.5% {
    transform: translateX(1%);
  }

  35% {
    opacity: 0.35;
    transform: translateX(-1%);
  }

  35.5% {
    transform: translateX(1%);
  }

  36% {
    transform: translateX(-1%);
  }

  36.5% {
    transform: translateX(1%);
  }

  37% {
    opacity: 0.8;
    transform: translateX(-1%);
  }

  37.5% {
    transform: translateX(1%);
  }

  40% {
    opacity: 0.4;
    transform: translateX(-1%);
  }

  40.5% {
    transform: translateX(1%);
  }

  41% {
    transform: translateX(-1%);
  }

  41.5% {
    opacity: 0.5;
    transform: translateX(1%);
  }

  42% {
    transform: translateX(-1%);
  }

  42.5% {
    transform: translateX(1%);
  }

  43% {
    transform: translateX(-1%);
  }

  43.5% {
    transform: translateX(1%);
  }

  45% {
    transform: translateX(-1%);
  }

  45.5% {
    transform: translateX(1%);
  }

  47% {
    transform: translateX(-1%);
  }

  47.5% {
    transform: translateX(1%);
  }

  49% {
    transform: translateX(-1%);
  }

  49.5% {
    opacity: 0.65;
    transform: translateX(1%);
  }

  50% {
    opacity: 0.3;
    transform: translateX(-1%);
  }

  50.5% {
    transform: translateX(1%);
  }

  51% {
    transform: translateX(-1%);
  }

  51.5% {
    transform: translateX(1%);
  }

  52% {
    transform: translateX(-1%);
  }

  52.5% {
    transform: translateX(1%);
  }

  53% {
    transform: translateX(-1%);
  }

  53.5% {
    opacity: 0.9;
    transform: translateX(1%);
  }

  54% {
    transform: translateX(-1%);
  }

  54.5% {
    transform: translateX(1%);
  }

  55% {
    opacity: 0.7;
    transform: translateX(-1%);
  }

  55.5% {
    transform: translateX(1%);
  }

  56% {
    transform: translateX(-1%);
  }

  56.5% {
    transform: translateX(1%);
  }

  57% {
    transform: translateX(-1%);
  }

  57.5% {
    transform: translateX(1%);
  }

  58% {
    opacity: 0.2;
    transform: translateX(-1%);
  }

  58.5% {
    opacity: 0.6;
    transform: translateX(1%);
  }

  100% {
    opacity: 0.5;
    z-index: 1;
    display: block;
  }
}