@font-face {
  font-family: "LibreFranklin";
  src: url("librefranklin-regular-webfont.woff2") format("woff2"),
      url("librefranklin-regular-webfont.woff") format("woff");
}

@font-face {
  font-family: "Monoton";
  src: url("monoton-regular-webfont.woff2") format("woff2"),
      url('monoton-regular-webfont.woff') format("woff");
}

* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  background-color: #000;
  color: white;
  line-height: 1.5;
  margin: 0;
  width: 100vw;
  overflow-x: hidden;
}

main {
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

a {
  color: white;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}

p {
  margin-bottom: 1.5rem;
}

svg g {
  stroke: white;
  fill: white;
}

#conteneur {
  position: relative;
  overflow: hidden;
}

.wrap {
  font-family: LibreFranklin, sans-serif;
  font-size: 0.9rem;
  max-width: 644px;
  padding: 6em 3em;
  padding-right: 3.5rem;
  margin-left: auto;
  margin-right: auto;
}

.tx_titre {
  font-family: Monoton, sans-serif;
  font-size: 3rem;
  font-weight: 400;
  margin-bottom: 5rem;
}

.tx_scientifiction, .avantliens {
  font-size: 1rem;
}

.tx_scientifiction, .tx_intentions {
  text-align: justify;
  word-break: normal;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  word-break: break-word;
}

.avantliens {
  color: #333;
}

.liens {
  font-family: sans-serif;
}

/**********/
/* Comète */
/**********/
@-webkit-keyframes traverse {
  0% {
    -webkit-transform: translateX(0) scale(0.1);
    transform: translateX(0) scale(0.1);
  }

  59% {
    -webkit-transform: translateX(calc(100vw + 2300px)) scale(4);
    transform: translateX(calc(100vw + 2300px)) scale(4);
  }

  60% {
    -webkit-transform: translateX(calc(100vw + 300px)) scale(0.5) scaleX(-1);
    transform: translateX(calc(100vw + 300px)) scale(0.5) scaleX(-1);
  }

  100% {
    -webkit-transform: translateX(0) scale(0.1) scaleX(-1);
    transform: translateX(0) scale(0.1) scaleX(-1);
  }
}

@keyframes traverse {
  0% {
    -webkit-transform: translateX(0) scale(0.1);
    transform: translateX(0) scale(0.1);
  }

  59% {
    -webkit-transform: translateX(calc(100vw + 2300px)) scale(4);
    transform: translateX(calc(100vw + 2300px)) scale(4);
  }

  60% {
    -webkit-transform: translateX(calc(100vw + 300px)) scale(0.5) scaleX(-1);
    transform: translateX(calc(100vw + 300px)) scale(0.5) scaleX(-1);
  }

  100% {
    -webkit-transform: translateX(0) scale(0.1) scaleX(-1);
    transform: translateX(0) scale(0.1) scaleX(-1);
  }
}

@-webkit-keyframes comete {
  0% {
    -webkit-transform: translateY(0) rotate(-10deg);
    transform: translateY(0) rotate(-10deg);
  }

  10% {
    -webkit-transform: translateY(0) rotate(-10deg);
    transform: translateY(0) rotate(-10deg);
  }

  49% {
    -webkit-transform: translateY(700px) rotate(20deg);
    transform: translateY(700px) rotate(20deg);
  }

  50% {
    -webkit-transform: translateY(1200px) rotate(-20deg);
    transform: translateY(1200px) rotate(-20deg);
  }

  75% {
    -webkit-transform: translateY(1200px) rotate(-20deg);
    transform: translateY(1200px) rotate(-20deg);
  }

  100% {
    -webkit-transform: translateY(400px) rotate(-35deg);
    transform: translateY(400px) rotate(-35deg);
  }
}

@keyframes comete {
  0% {
    -webkit-transform: translateY(0) rotate(-10deg);
    transform: translateY(0) rotate(-10deg);
  }

  10% {
    -webkit-transform: translateY(0) rotate(-10deg);
    transform: translateY(0) rotate(-10deg);
  }

  49% {
    -webkit-transform: translateY(700px) rotate(20deg);
    transform: translateY(700px) rotate(20deg);
  }

  50% {
    -webkit-transform: translateY(1200px) rotate(-20deg);
    transform: translateY(1200px) rotate(-20deg);
  }

  75% {
    -webkit-transform: translateY(1200px) rotate(-20deg);
    transform: translateY(1200px) rotate(-20deg);
  }

  100% {
    -webkit-transform: translateY(400px) rotate(-35deg);
    transform: translateY(400px) rotate(-35deg);
  }
}

#containcomete {
  position: absolute;
  top: 100px;
  left: -450px;
  -webkit-animation: traverse 50s ease-in-out infinite;
  animation: traverse 50s ease-in-out infinite;
}

#comete {
  width: 700px;
  height: 390px;
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
  -webkit-animation: comete 50s ease-in-out infinite;
  animation: comete 50s ease-in-out infinite;
}

#filaments, #filaments svg, #noyau, #queue {
  position: absolute;
}

/* Corps de la comète : noyau + queue */
#corps {
  position: absolute;
  left: 21.43%;
  /*150px*/
  bottom: 2.56%;
  /*10px*/
  width: 77.86%;
  /*545px*/
  height: 49.49%;
  /*193px*/
}

#noyau {
  bottom: 0;
  right: 0;
  -webkit-animation: noyau 0.06s 334 linear alternate;
  animation: noyau 0.06s 334 linear alternate;
}

#queue {
  top: 0;
  left: 0;
  -webkit-animation: queue 0.08s 250 linear alternate;
  animation: queue 0.08s 250 linear alternate;
}

/* Filaments */
#filaments {
  width: 88.57%;
  /*620px*/
  height: 100%;
  /*390px*/
  -webkit-animation: filaments 1s 20 ease-in-out alternate;
  animation: filaments 1s 20 ease-in-out alternate;
}

#filaments svg:nth-child(1) {
  top: 7.69%;
  right: 0;
  -webkit-animation: filaments 0.3s infinite ease-in-out alternate;
  animation: filaments 0.3s infinite ease-in-out alternate;
}

#filaments svg:nth-child(2) {
  top: 2.56%;
  left: 31.45%;
  -webkit-animation: filaments 0.4s infinite ease-in-out alternate;
  animation: filaments 0.4s infinite ease-in-out alternate;
}

#filaments svg:nth-child(3) {
  top: 2.56%;
  left: 27.42%;
  -webkit-animation: filaments 0.3s 0.1s infinite ease-in-out alternate;
  animation: filaments 0.3s 0.1s infinite ease-in-out alternate;
}

#filaments svg:nth-child(4) {
  top: 2.56%;
  left: 20.97%;
  -webkit-animation: filaments 0.4s 0.2s infinite ease-in-out alternate;
  animation: filaments 0.4s 0.2s infinite ease-in-out alternate;
}

#filaments svg:nth-child(5) {
  top: 3.85%;
  left: 15.32%;
  -webkit-animation: filaments 0.3s 0.2s infinite ease-in-out alternate;
  animation: filaments 0.3s 0.2s infinite ease-in-out alternate;
}

#filaments svg:nth-child(6) {
  top: 12.82%;
  left: 16.13%;
  -webkit-animation: filaments 0.4s 0.1s infinite ease-in-out alternate;
  animation: filaments 0.4s 0.1s infinite ease-in-out alternate;
}

#filaments svg:nth-child(7) {
  top: 17.95%;
  left: 4.84%;
  -webkit-animation: filaments 0.3s infinite ease-in-out alternate;
  animation: filaments 0.3s infinite ease-in-out alternate;
}

#filaments svg:nth-child(8) {
  bottom: 34.62%;
  left: 0;
  -webkit-animation: filamentsbas 0.4s 0.2s infinite ease-in-out alternate;
  animation: filamentsbas 0.4s 0.2s infinite ease-in-out alternate;
}

#filaments svg:nth-child(9) {
  bottom: 26.92%;
  left: 0;
  -webkit-animation: filamentsbas 0.3s infinite ease-in-out alternate;
  animation: filamentsbas 0.3s infinite ease-in-out alternate;
}

#filaments svg:nth-child(10) {
  bottom: 20.51%;
  left: 3.23%;
  -webkit-animation: filamentsbas 0.4s infinite ease-in-out alternate;
  animation: filamentsbas 0.4s infinite ease-in-out alternate;
}

#filaments svg:nth-child(11) {
  bottom: 15.38%;
  left: 3.23%;
  -webkit-animation: filamentsbas 0.3s 0.1s infinite ease-in-out alternate;
  animation: filamentsbas 0.3s 0.1s infinite ease-in-out alternate;
}

#filaments svg:nth-child(12) {
  bottom: 11.54%;
  left: 9.68%;
  -webkit-animation: filamentsbas 0.4s 0.1s infinite ease-in-out alternate;
  animation: filamentsbas 0.4s 0.1s infinite ease-in-out alternate;
}

#filaments svg:nth-child(13) {
  bottom: 7.69%;
  left: 7.26%;
  -webkit-animation: filamentsbas 0.3s 0.2s infinite ease-in-out alternate;
  animation: filamentsbas 0.3s 0.2s infinite ease-in-out alternate;
}

#filaments svg:nth-child(14) {
  bottom: 5.13%;
  left: 9.68%;
  -webkit-animation: filamentsbas 0.4s infinite ease-in-out alternate;
  animation: filamentsbas 0.4s infinite ease-in-out alternate;
}

#filaments svg:nth-child(15) {
  bottom: 2.56%;
  left: 9.68%;
  -webkit-animation: filamentsbas 0.3s infinite ease-in-out alternate;
  animation: filamentsbas 0.3s infinite ease-in-out alternate;
}

#filaments svg:nth-child(16) {
  bottom: 1.28%;
  right: 9.68%;
  -webkit-animation: filamentsbas 0.4s 0.2s infinite ease-in-out alternate;
  animation: filamentsbas 0.4s 0.2s infinite ease-in-out alternate;
}

/*********/
/* Atlas */
/*********/
#atlas {
  text-align: center;
  min-height: 300px;
}

#monde {
  opacity: 0;
  -webkit-transition: opacity 6s;
  transition: opacity 6s;
}

/* Animations */
@-webkit-keyframes fils {
  to {
    fill-opacity: 0;
    stroke-dashoffset: 0;
  }
}

@keyframes fils {
  to {
    fill-opacity: 0;
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes queue {
  to {
    left: -5px;
  }
}

@keyframes queue {
  to {
    left: -5px;
  }
}

@-webkit-keyframes noyau {
  to {
    right: -6px;
  }
}

@keyframes noyau {
  to {
    right: -6px;
  }
}

@-webkit-keyframes filaments {
  to {
    -webkit-transform: translate(-2%, -1%);
    transform: translate(-2%, -1%);
  }
}

@keyframes filaments {
  to {
    -webkit-transform: translate(-2%, -1%);
    transform: translate(-2%, -1%);
  }
}

@-webkit-keyframes filamentsbas {
  to {
    -webkit-transform: translateX(-2%);
    transform: translateX(-2%);
  }
}

@keyframes filamentsbas {
  to {
    -webkit-transform: translateX(-2%);
    transform: translateX(-2%);
  }
}

/**********/
/* Sirius */
/**********/
@-webkit-keyframes rotation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

@keyframes rotation {
  to {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

#sirius {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 25vw;
  min-width: 150px;
  max-width: 575px;
}

svg#lettres g {
  fill: none;
}

#lettres, #constellation {
  position: absolute;
  -webkit-animation: rotation 300s infinite linear;
  animation: rotation 300s infinite linear;
}

/*****************/
/* Media Queries */
/*****************/
@media screen and (max-width: 500px) {
  .tx_titre {
    font-size: 2rem;
  }

  .tx_scientifiction, .tx_intentions {
    text-align: left;
    -webkit-hyphens: none;
    -ms-hyphens: none;
    hyphens: none;
  }
}