@charset "UTF-8";
/* Changer le mode de calcul des tailles de boîtes */

html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}

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

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

/* contrer les effets standards des navigateurs */

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* 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, html {
  overflow: hidden;
  background-color: #000000;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 3vmin;
  color: #fff;
  margin: 0;
  padding: 0;
}

/*
██████   █████  ██████   █████  ██      ██       █████  ██   ██
██   ██ ██   ██ ██   ██ ██   ██ ██      ██      ██   ██  ██ ██
██████  ███████ ██████  ███████ ██      ██      ███████   ███
██      ██   ██ ██   ██ ██   ██ ██      ██      ██   ██  ██ ██
██      ██   ██ ██   ██ ██   ██ ███████ ███████ ██   ██ ██   ██
*/

/*
███    ███ ██ ███████ ███████     ███████ ███    ██     ██████  ██       █████   ██████ ███████
████  ████ ██ ██      ██          ██      ████   ██     ██   ██ ██      ██   ██ ██      ██
██ ████ ██ ██ ███████ █████       █████   ██ ██  ██     ██████  ██      ███████ ██      █████
██  ██  ██ ██      ██ ██          ██      ██  ██ ██     ██      ██      ██   ██ ██      ██
██      ██ ██ ███████ ███████     ███████ ██   ████     ██      ███████ ██   ██  ██████ ███████
*/

.univers {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#scene {
  margin: -5%;
  padding: 0;
}

#scene1 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.layer {
  margin: 0;
}

.neb {
  padding: 17vmin 2% 2% 10vmax;
}

.neb-front {
  padding: 25vmin 2% 2% 25vmax;
}

.box {
  opacity: 0;
}

.box0 {
  width: 110vw;
  height: 110vh;
  opacity: 0;
}

.box1 {
  width: 30vw;
  height: 100%;
  opacity: 0;
}

.box2 {
  width: 10vw;
  height: 100%;
  opacity: 0;
}

.ttl h1 {
  margin-top: 10vh;
  animation: vortex 2s ease-in 0s 1;
}

.markup {
  list-style: none;
  text-decoration: none;
  font-family: 'Audiowide', cursive;
  font-size: 20vmin;
  color: #fff;
  opacity: 0.7;
  text-align: center;
  margin: -7vh 35vw;
  z-index: +2;
  pointer-events: auto;
}

.markdown {
  font-family: 'Audiowide', cursive;
  font-size: 6vmin;
  opacity: 0.5;
  text-align: center;
  margin: 50vh 5vw 0vh 85vw;
  pointer-events: none;
  animation: vortex 2s ease-in 0s 1;
}

.markdown>h1 {
  transform: rotate(90deg);
}

/*
███████ ███████ ██████   █████   ██████ ███████
██      ██      ██   ██ ██   ██ ██      ██
█████   ███████ ██████  ███████ ██      █████
██           ██ ██      ██   ██ ██      ██
███████ ███████ ██      ██   ██  ██████ ███████
*/

.cosmos {
  background: transparent url(../img/fond-cosmique.jpg) center;
  background-size: 100%;
  opacity: 0.3;
  filter: blur(0.2px);
  color: #000;
}

.shootingStar {
  background-color: #fff;
  width: 3vmax;
  height: 1px;
  filter: blur(2px);
  opacity: 1;
  position: relative;
  top: 10%;
  left: 10%;
  color: #000;
}

.galactic {
  background: transparent url(../img/fond-galactique.png) center no-repeat;
  background-size: cover;
  width: 105%;
  height: 105%;
  opacity: 0.3;
  filter: blur(0.3px);
  color: #000;
}

.stellar {
  background: transparent url(../img/fond-stellaire.png) center;
  background-size: 100%;
  width: 105%;
  height: 105%;
  opacity: 0.4;
  filter: blur(0.2px);
  color: #000;
}

/*
███    ██ ███████ ██████  ██    ██ ██      ███████ ██    ██ ███████ ███████
████   ██ ██      ██   ██ ██    ██ ██      ██      ██    ██ ██      ██
██ ██  ██ █████   ██████  ██    ██ ██      █████   ██    ██ ███████ █████
██  ██ ██ ██      ██   ██ ██    ██ ██      ██      ██    ██      ██ ██
██   ████ ███████ ██████   ██████  ███████ ███████  ██████  ███████ ███████
*/

.neb {
  padding: 17vmin 2% 2% 10vmax;
}

.neb-front {
  padding: 25vmin 2% 2% 25vmax;
}

.nebula {
  width: 20vmax;
  height: 20vmax;
  max-width: 100vmin;
  max-height: 100vmin;
  margin: 0%;
  z-index: -1;
}

#nebula-front {
  width: 60vmax;
  height: 60vmax;
  max-width: 100vmin;
  max-height: 100vmin;
  margin: 0%;
  z-index: -1;
}

/*
███    ██ ███████ ██████       ██
████   ██ ██      ██   ██     ███
██ ██  ██ █████   ██████       ██
██  ██ ██ ██      ██   ██      ██
██   ████ ███████ ██████       ██
*/

.nebula-1 {
  width: 50%;
  height: 50%;
  background-color: transparent;
  background-image: url(../img/constel-2.png), url(../img/nebula-1.png);
  background-size: 0%, contain;
  background-position: 50% -50%, center;
  background-repeat: no-repeat;
  margin: 0% 0 0 25%;
  opacity: 0.4;
  color: #000;
  pointer-events: auto;
  transition: all 1000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.nebula-1:hover {
  background-size: 80%, contain;
}

.nebula-1 .legend-book {
  display: none;
  width: 50%;
  height: 30%;
  border: 1px solid;
  border-color: transparent transparent #fff transparent;
  transform: translate(160%, -300%) rotateZ(-30deg);
}

.legend-book p {
  font-family: "ubuntu", sans-serif;
  font-size: 0.5em;
  font-weight: lighter;
  color: #fff;
  text-align: center;
  transform: translate(105%, 10%) rotateZ(30deg);
}

.legend-book>.front {
  transform: translate(90%, 800%) rotate(30deg)
}

.nebula-1:hover .legend-book {
  display: block;
}

/*
███    ██ ███████ ██████      ██████
████   ██ ██      ██   ██          ██
██ ██  ██ █████   ██████       █████
██  ██ ██ ██      ██   ██     ██
██   ████ ███████ ██████      ███████
*/

.nebula-2 {
  width: 50%;
  height: 50%;
  background-color: transparent;
  background-image: url(../img/constel-1.png), url(../img/nebula-2.png);
  background-size: 0%, contain;
  background-position: 0 50%, center;
  background-repeat: no-repeat;
  margin: 30% 0 0 3%;
  z-index: -1;
  opacity: 0.3;
  color: #000;
  pointer-events: auto;
  transition: all 1000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.nebula-2:hover {
  background-size: 80%, contain;
}

.nebula-2 .legend-pres {
  display: none;
  width: 40%;
  height: 30%;
  border: 1px solid;
  border-color: transparent transparent #fff transparent;
  transform: translate(-100%, -180%) rotateZ(-30deg);
}

.legend-pres p {
  font-family: "ubuntu", sans-serif;
  font-size: 0.5em;
  font-weight: lighter;
  color: #fff;
  text-align: center;
  transform: translate(-70%, 105%) rotateZ(30deg);
}

.legend-pres>.front {
  transform: translate(-60%, 600%) rotate(30deg)
}

.nebula-2:hover .legend-pres {
  display: block;
}

/*
███    ██ ███████ ██████      ██████
████   ██ ██      ██   ██          ██
██ ██  ██ █████   ██████       █████
██  ██ ██ ██      ██   ██          ██
██   ████ ███████ ██████      ██████
*/

.nebula-3 {
  width: 50%;
  height: 50%;
  background-color: transparent;
  background-image: url(../img/constel-3.png), url(../img/nebula-3.png);
  background-size: 0%, contain;
  background-position: 0 50%, center;
  background-repeat: no-repeat;
  margin: 30% 0 0 40%;
  opacity: 0.5;
  color: #000;
  pointer-events: auto;
  transition: all 1000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.nebula-3:hover {
  background-size: 80%, contain;
}

.nebula-3 .legend-ct {
  display: none;
  width: 30%;
  height: 10%;
  border: 1px solid;
  border-color: transparent transparent #fff transparent;
  transform: translate(200%, -250%) rotateZ(30deg);
}

.legend-ct p {
  font-family: "ubuntu", sans-serif;
  font-size: 0.5em;
  font-weight: lighter;
  color: #fff;
  text-align: center;
  transform: translate(100%, -100%) rotateZ(-30deg);
}

.nebula-3:hover .legend-ct {
  display: block;
}

/*
 █████   ██████  ██████ ██    ██  ██████  ███████ ██ ██
██   ██ ██      ██      ██    ██ ██    ██ ██      ██ ██
███████ ██      ██      ██    ██ ██    ██ █████   ██ ██
██   ██ ██      ██      ██    ██ ██    ██ ██      ██ ██
██   ██  ██████  ██████  ██████   ██████  ███████ ██ ███████
*/

.oeil {
  width: 25%;
  height: 15%;
  background-color: transparent;
  background-image: url(../img/earth-home.png), url(../img/nebula-oeil.png);
  background-size: 0%, contain;
  background-position: 50% 50%, center;
  background-repeat: no-repeat;
  z-index: +1;
  margin: 49% 0 0 25%;
  opacity: 0.6;
  color: #000;
  pointer-events: auto;
  transition: all 1000ms cubic-bezier(0.390, 0.575, 0.565, 1.000);
}

.oeil:hover {
  background-size: 60%, contain;
}

.oeil .legend-home {
  display: none;
  width: 55%;
  height: 100%;
  border: 1px solid;
  border-color: transparent transparent #fff transparent;
  transform: translate(100%, 0%) rotateZ(90deg);
}

.legend-home p {
  font-family: "ubuntu", sans-serif;
  font-size: 0.5em;
  font-weight: lighter;
  color: #fff;
  text-align: center;
  transform: translate(105%, 15%) rotateZ(-90deg);
}

.legend-home>.front {
  transform: translate(60%, 600%) rotate(-90deg)
}

.oeil:hover .legend-home {
  display: block;
}

/*
 ██████  ██████  ███    ██ ████████ ███████ ███    ██ ██    ██
██      ██    ██ ████   ██    ██    ██      ████   ██ ██    ██
██      ██    ██ ██ ██  ██    ██    █████   ██ ██  ██ ██    ██
██      ██    ██ ██  ██ ██    ██    ██      ██  ██ ██ ██    ██
 ██████  ██████  ██   ████    ██    ███████ ██   ████  ██████
*/

#frontstartext {
  position: absolute;
  width: 100vw;
  height: 25em;
  bottom: 0;
  left: 25%;
  margin-left: -1.5em;
  font-family: 'Audiowide', sans-serif;
  font-size: 1000%;
  text-align: center;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(25deg);
  pointer-events: none;
}

#frontstartext::after {
  position: absolute;
  content: ' ';
  left: 0;
  right: 0;
  top: 0;
  bottom: 75%;
  pointer-events: none;
}

.frontstarcontent {
  position: absolute;
  top: 100%;
  width: 100%;
  color: rgb(255, 215, 0);
  animation: scroll 60s linear 1s 1;
}

#startext {
  position: absolute;
  width: 100vw;
  height: 25em;
  bottom: 0;
  left: 25%;
  margin-left: -3.5em;
  font-size: 4em;
  text-align: justify;
  overflow: hidden;
  transform-origin: 50% 100%;
  transform: perspective(300px) rotateX(25deg);
  pointer-events: none;
}

#startext::after {
  position: absolute;
  content: ' ';
  left: 0;
  right: 0;
  top: 0;
  bottom: 75%;
  pointer-events: none;
}

.starcontent {
  position: absolute;
  top: 100%;
  width: 100%;
  color: rgb(255, 215, 0);
  animation: scroll 10s linear 0.5s 1;
}

.startitle {
  font-family: 'Audiowide', cursive;
  text-align: center;
  font-size: 1.5em;
}

.page-content {
  background-color: rgba(0, 0, 0, 0.4);
  width: 50vw;
  margin-left: 40vw;
  padding: 0.9em;
  font-size: 0.75em;
  color: rgb(255, 215, 0);
  animation: screen 9.5s ease-in-out 1;
}

.page-content h2 {
  position: absolute;
  top: 40vh;
  left: 5vw;
  font-family: 'Audiowide', cursive;
  text-align: center;
  font-size: 2em;
}
.clickin {
  pointer-events: auto;
}
.starlink {
  text-decoration: none;
  text-align: center;
  font-family: 'Audiowide', cursive;
  color: rgb(255, 215, 0);
  text-shadow: 0 0 30px rgba(255, 185, 0, 1), 0 0 10px rgba(225, 100, 0, 1);
}

.form-content {
  background-color: rgba(0, 0, 0, 0.4);
  width: 50vw;
  margin: 30vh 0 0 40vw;
  padding: 0.9em;
  font-size: 0.75em;
  color: rgb(255, 215, 0);
}

.form-content label {
  display: block;
  margin: 0.5em 25%;
}

.form-content input, textarea {
  width: 25vw;
  margin: 0%;
}

.form-content .bouton {
  display: block;
  width: 5vw;
  margin: 0 0 0 45%;
}

.bouc-page {
  position: relative;
  top: -80vh;
  left: 35vw;
  width: 30%;
  padding: 2em;
  padding-left: 0;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 15%;
  color: rgb(255, 215, 0);
}

.bouc-page ul {
  list-style: none;
}

.bouc-page a {
  text-decoration: none;
}

.cosylink img {
  width: 8em;
  margin: 0.25em;
  padding: 0.1em;
  background-color: #fff;
}

.gwlink img {
  width: 8em;
  margin: 0.25em;
}

.sites {
  margin-top: 1em;
}

.sites li {
  margin-top: 1em;
}

.doclink {
  width: 8em;
  margin: 1em;
  padding: 0.65em 0.2em;
  background-color: #ffF9F0;
  border-radius: 50% 0 0 0;
  box-shadow: inset 3px -3px 5px 0px rgba(0, 0, 0, 0.25);
  font-family: 'Pinyon Script';
  color: rgb(0, 0, 150);
  text-shadow: 2px -2px 1px #fff, 0px 0px 1.5px #000;
}

.centilink img {
  width: 8em;
  margin: 0.2em;
  padding: 0.25em;
  background-color: #9E61A4;
}

/*
 █████  ███    ██ ██ ███    ███  █████  ████████ ██  ██████  ███    ██ ███████
██   ██ ████   ██ ██ ████  ████ ██   ██    ██    ██ ██    ██ ████   ██ ██
███████ ██ ██  ██ ██ ██ ████ ██ ███████    ██    ██ ██    ██ ██ ██  ██ ███████
██   ██ ██  ██ ██ ██ ██  ██  ██ ██   ██    ██    ██ ██    ██ ██  ██ ██      ██
██   ██ ██   ████ ██ ██      ██ ██   ██    ██    ██  ██████  ██   ████ ███████
*/

@keyframes scroll {
  0% {
    top: 100%;
  }

  100% {
    top: -400%;
  }
}

@keyframes scroll1 {
  0% {
    top: 100%;
  }

  100% {
    top: -400%;
  }
}

@keyframes screen {
  0% {
    opacity: 0.00
  }

  90% {
    opacity: 0.00
  }

  100% {
    opacity: 1.00
  }
}

@keyframes vortex {
  0% {
    transform: scale3d(0, 0, 0);
  }

  100% {
    transform: scale3d(1, 1, 1);
  }
}