@font-face {
  font-family: "titre";
  src: url(police/tt_rounds_neue/police\ titre.ttf);
}

html {
  overflow-x: hidden;
}

body {
  background-repeat: no-repeat;
  background-position: 50%, 0%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

.wrapper {
  overflow: hidden;
  position: relative;
}

.body__espace {
  width: 100%;
  height: 100vh;
  position: relative;
  background: radial-gradient(
    circle at 100% 100%,
    #191a44 20%,
    #160239 50%,
    #1d0e40 80%
  );
}

.espace {
  width: 100%;
  height: 100vh;
  position: relative;
}

.soleil__img {
  top: 3%;
  left: 50%;
  width: 36%;
  transform: translate(-50%);
  position: fixed;
  z-index: 1;
}

.portfolio {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  left: 50%;
  top: 20%;
  transform: translate(-50%);
  color: rgb(245, 121, 54);
  font-size: 175%;
  font-family: "titre";
  z-index: 9999;
}

.nom {
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  left: 50%;
  top: 24%;
  transform: translate(-50%);
  color: rgb(252, 197, 30);
  font-size: 150%;
  font-family: "titre";
  z-index: 9999;
}

.orb__bleue--1 {
  position: absolute;
  width: 6%;
  top: 1%;
  left: 16%;
}

.orb__bleue--2 {
  position: absolute;
  width: 6%;
  top: 60%;
  left: 10%;
}

.orb__violet--1 {
  position: absolute;
  width: 6%;
  top: 2.3%;
  left: 78%;
}

.orb__violet--2 {
  position: absolute;
  width: 6%;
  top: 19%;
  left: 31%;
}

.orb__violet--3 {
  position: absolute;
  width: 6%;
  top: 35%;
  left: 38%;
}

.orb__violet--4 {
  position: absolute;
  width: 6%;
  top: 76%;
  left: 89.5%;
}

.orb__blanc--1 {
  position: absolute;
  width: 6%;
  left: 58%;
  top: 0%;
}

.orb__blanc--2 {
  position: absolute;
  width: 6%;
  top: 46%;
  left: 62%;
}

.orb__jaune--1 {
  position: absolute;
  width: 3.5%;
  top: 18%;
  left: 91%;
}

.orb__jaune--2 {
  position: absolute;
  width: 3.5%;
  top: 66.5%;
  left: 92%;
}

.meteore__rouge--1 {
  position: absolute;
  width: 7.5%;
  top: 5%;
  left: 24%;
}

.meteore__rouge--2 {
  position: absolute;
  width: 10%;
  top: 65%;
  left: 73.5%;
}

.meteore__violet--1 {
  position: absolute;
  width: 10%;
  top: 3.5%;
  left: 84%;
}

.meteore__violet--2 {
  position: absolute;
  width: 10%;
  top: 25.5%;
  left: 15%;
}

.meteore__violet--3 {
  position: absolute;
  width: 10%;
  top: 72.5%;
  left: 27.5%;
}

.meteore__bleue--1 {
  position: absolute;
  width: 14%;
  top: 42%;
  left: 75%;
}

.meteore {
  position: absolute;
  width: 34%;
  top: 25%;
  left: 0%;
}

.fusee {
  position: absolute;
  width: 24%;
  left: 8%;
  top: 61%;
  z-index: 10;
}

.planete__1 {
  position: absolute;
  width: 42%;
  left: 66%;
  top: 28%;
}

.planete__2 {
  position: absolute;
  width: 11%;
  left: 78%;
  top: 54%;
}

.etoile {
  position: absolute;
  width: 100%;
  z-index: 0;
  top: 0px;
}

.nuage__espace {
  position: absolute;
  width: 100%;
  top: calc(100% - 140px);
  z-index: 9999;
}

.body__ciel {
  width: 100%;
  height: 100vh;
  background: radial-gradient(
    circle at 50% 100%,
    #00bcff 13%,
    #0098df 47%,
    #0083d2 67%,
    #8778bd 100%
  );
}

.ciel {
  position: relative;
  width: 100%;
  height: 100vh;

  z-index: 9998;
}

.nuage__1 {
  position: absolute;
  width: 71%;
  top: 51.5%;
  left: 100%;
  z-index: 9999;
}

.nuage__2 {
  position: absolute;
  width: 100%;
  top: 28%;
  left: -100%;
  z-index: 9999;
}

.ciel__txt2 {
  position: absolute;
  top: 56%;
  right: 0.4%;
  font-family: "titre";
  color: white;
}

.ciel__txt {
  position: absolute;
  top: 37.5%;
  left: 1%;
  font-family: "titre";
  color: white;
}

.nuage__ciel {
  position: absolute;
  width: 100%;
  top: calc(100% - 140px);
  left: 0%;
  z-index: 9999;
}

.ciel__maison {
  position: absolute;
  top: 75%;
  left: 5%;
  width: 17%;
}

.body__terre {
  width: 100%;
  height: 100vh;
  background: radial-gradient(
    circle at 50% 100%,
    #fbe5ab 27%,
    #ffd26b 68%,
    #e9a661 100%
  );
}

.terre {
  position: relative;
  width: 100%;
  height: 100vh;
}

.sol__1 {
  position: absolute;
  width: 100%;
  top: 91.25%;
  z-index: 9100;
}

.pierre {
  position: absolute;
  width: 12%;
  top: 91%;
  z-index: 9099;
  left: 26%;
}

.maison__2 {
  position: absolute;
  width: 12%;
  top: 85%;
  left: 7.5%;
  z-index: 9099;
}

.buisson {
  position: absolute;
  width: 21%;
  top: 91%;
  left: 3%;
  z-index: 9999;
}

.maison__6 {
  position: absolute;
  width: 17%;
  top: 87.5%;
  left: 40%;
  z-index: 9099;
}

.maison__4 {
  position: absolute;
  width: 17%;
  top: 87%;
  left: 64%;
  z-index: 9099;
}

.sol__2 {
  position: absolute;
  width: 100%;
  top: 88.2%;
  z-index: 7000;
}

.maison__5 {
  position: absolute;
  width: 14%;
  top: 82%;
  left: 28%;
  z-index: 6999;
}

.arbre__2--1 {
  position: absolute;
  width: 9%;
  top: 74.5%;
  left: 5%;
  z-index: 6999;
}

.arbre__2--2 {
  position: absolute;
  width: 6.5%;
  top: 77.5%;
  left: 18%;
  z-index: 6999;
}

.arbre__2--3 {
  position: absolute;
  width: 6%;
  top: 83%;
  left: 57%;
  z-index: 6999;
}

.arbre__1 {
  position: absolute;
  width: 9%;
  top: 82.5%;
  left: 89.5%;
  z-index: 6999;
}

.sol__3 {
  position: absolute;
  width: 100%;
  top: 83.5%;
  z-index: 6000;
  pointer-events: none;
}

.maison__3 {
  position: absolute;
  width: 10%;
  top: 80%;
  left: 48%;
  z-index: 5999;
}

.maison__1 {
  position: absolute;
  width: 13%;
  top: 82.5%;
  left: 76%;
  z-index: 5999;
}

.montagne {
  position: absolute;
  width: 100%;
  top: 71.6%;
  z-index: 2;
  pointer-events: none;
}

.ping__1 {
  position: absolute;
  width: 3%;
  top: 82%;
  left: 12%;
  z-index: 9999;
}

.blender {
  position: absolute;
  top: 78%;
  left: 6.5%;
  z-index: 9999;
  font-family: "titre";
  color: white;
  font-size: 14px;
}

.ping__2 {
  position: absolute;
  width: 3%;
  top: 79%;
  left: 33%;
  z-index: 9999;
}

.code {
  position: absolute;
  top: 75%;
  left: 29.5%;
  z-index: 9999;
  font-family: "titre";
  color: white;
  font-size: 14px;

}

.ping__3 {
  position: absolute;
  width: 3%;
  top: 76.5%;
  left: 51%;
  z-index: 9999;
}

.illustrator {
  position: absolute;
  top: 72.5%;
  left: 40.5%;
  z-index: 9999;
  font-family: "titre";
  color: white;
  font-size: 14px;

}

.ping__4 {
  position: absolute;
  width: 3%;
  top: 79%;
  left: 82%;
  z-index: 9999;
}

.wordpress {
  position: absolute;
  top: 75%;
  left: 72%;
  z-index: 9999;
  font-family: "titre";
  color: white;
  font-size: 14px;

}

.ping__5 {
  position: absolute;
  width: 3%;
  top: 84.5%;
  left: 48%;
  z-index: 9999;
    display: none;

}

.ping__6 {
  position: absolute;
  width: 3%;
  top: 83.5%;
  left: 70%;
  z-index: 9999;
    display: none;

}

.oiseau__1 {
  position: absolute;
  width: 7%;
  top: 42.5%;
  left: 33%;
}

.oiseau__2 {
  position: absolute;
  width: 8%;
  top: 59%;
  left: 9.5%;
}

.oiseau__3 {
  position: absolute;
  width: 9%;
  top: 52%;
  left: 76.5%;
}

.cliquez {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%);
  color: white;
  font-family: "titre";
  font-size: 25px;
  z-index: 9999;
}

.sousterre {
  position: relative;
  width: 100%;
  height: 100vh;
  background: radial-gradient(
    circle at 50% 100%,
    #292623 13%,
    #262623 57%,
    #5f493e 87%
  );
  z-index: 9999;
}

.nuage__terre {
  position: absolute;
  width: 100%;
  top: calc(6% - 110px);
  left: 0%;
  z-index: 9999;
}

.sec {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 85%;
  height: 56%;
  top: 32%;
  left: 50%;
  transform: translate(-50%);
  background-color: #51514f;
}

.sec__haut {
  width: 100%;
  height: calc(100% / 3);
  display: flex;
  justify-content: space-around;
  padding-top: 11%;
}

.sec__haut--droite {
  width: 40%;
  height: 69%;
  object-fit: contain;
}

.sec__haut--gauche {
  width: 40%;
  height: 69%;
  object-fit: contain;
}

.sec__mid {
  width: 100%;
  height: calc(100% / 3);
  display: flex;
  justify-content: space-around;
}

.sec__mid--droite {
  width: 40%;
  height: 69%;
  object-fit: contain;
}

.sec__mid--gauche {
  width: 40%;
  height: 69%;
  object-fit: contain;
}

.sec__bas {
  width: 100%;
  height: calc(100% / 3);
  display: flex;
  justify-content: space-around;
}

.sec__bas--droite {
  width: 40%;
  height: 69%;
  object-fit: contain;
}

.sec__bas--gauche {
  width: 40%;
  height: 69%;
  object-fit: contain;
}

.titre {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%);
  color: white;
  font-family: "titre";
}

.info {
  position: absolute;
  bottom: 2%;
  left: 50%;
  transform: translate(-50%);
  width: 85%;
}

.mail {
  font-family: "titre";
  color: rgb(184, 184, 184);
  font-size: 207x;
  position: absolute;
  top: 5%;
}

.num {
  font-family: "titre";
  color: rgb(184, 184, 184);
  font-size: 16px;
  position: absolute;
  top: 30%;
}

.gris {
  background-color: #51514f;
}

#sec__haut--gauche {
  transition: 0.4s;
  cursor: pointer;
}

#sec__haut--gauche.fullscreen {
  width: 115%;
  position: absolute;
}

#sec__haut--droite {
  transition: 0.4s;
  cursor: pointer;
}

#sec__haut--droite.fullscreen {
  width: 115%;
  position: absolute;
}

#sec__haut--droite {
  transition: 0.4s;
  cursor: pointer;
}

#sec__haut--droite.fullscreen {
  width: 115%;
  position: absolute;
}

#sec__mid--gauche {
  transition: 0.4s;
  cursor: pointer;
}

#sec__mid--gauche.fullscreen {
  width: 115%;
  position: absolute;
  top: 7%;
}

#sec__mid--droite {
  transition: 0.4s;
  cursor: pointer;
}

#sec__mid--droite.fullscreen {
  width: 115%;
  position: absolute;
  top: 7%;
}

#sec__bas--gauche {
  transition: 0.4s;
  cursor: pointer;
}

#sec__bas--gauche.fullscreen {
  width: 115%;
  position: absolute;
  top: 7%;
}

#sec__bas--droite {
  transition: 0.4s;
  cursor: pointer;
}

#sec__bas--droite.fullscreen {
  width: 115%;
  position: absolute;
  top: 7%;
}

@media (min-width: 768px) {
  .portfolio {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    left: 50%;
    top: 20%;
    transform: translate(-50%) scale(1.25);
    color: rgb(245, 121, 54);
    font-size: 175%;
    font-family: "titre";
    z-index: 9999;
  }

  .nom {
    position: absolute;
    display: flex;
    justify-content: center;
    width: 100%;
    left: 50%;
    top: 24%;
    transform: translate(-50%) scale(1.25);
    color: rgb(252, 197, 30);
    font-size: 150%;
    font-family: "titre";
    z-index: 9999;
  }


  .fusee {
    position: absolute;
    width: 24%;
    left: 8%;
    top: 61%;
    z-index: 10;
  }

  .planete__1 {
    position: absolute;
    width: 42%;
    left: 66%;
    top: 28%;
  }

  .planete__2 {
    position: absolute;
    width: 11%;
    left: 78%;
    top: 54%;
  }

  .etoile {
    position: absolute;
    width: 100%;
    z-index: 0;
  }

  .nuage__espace {
    position: absolute;
    width: 100%;
    top: calc(100% - 180px);
    z-index: 9999;
  }

  .body__ciel {
    width: 100%;
    height: 100vh;
    background: radial-gradient(
      circle at 50% 100%,
      #00bcff 13%,
      #0098df 47%,
      #0083d2 67%,
      #8778bd 100%
    );
  }

  .ciel {
    position: relative;
    width: 100%;
    height: 100vh;

    z-index: 9998;
  }

  .nuage__1 {
    position: absolute;
    width: 71%;
    top: 51.7%;
    left: 147%;
    z-index: 9999;
  }

  .nuage__2 {
    position: absolute;
    width: 90%;
    top: 32%;
    left: -90%;
    z-index: 9999;
  }

  .ciel__txt2 {
    position: absolute;
    top: 56%;
    right: 0.4%;
    font-family: "titre";
    color: white;
  }

  .ciel__txt {
    position: absolute;
    top: 37.5%;
    left: 1%;
    font-family: "titre";
    color: white;
  }

  .nuage__ciel {
    position: absolute;
    width: 100%;
    top: 89%;
    left: 0%;
    z-index: 9999;
  }

  .ciel__maison {
    position: absolute;
    top: 95%;
    left: 5%;
    width: 17%;
  }

  .body__terre {
    width: 100%;
    height: 100vh;
    background: radial-gradient(
      circle at 50% 100%,
      #fbe5ab 27%,
      #ffd26b 68%,
      #e9a661 100%
    );
  }

  .terre {
    position: relative;
    width: 100%;
    height: 100vh;
  }

  .sol__1 {
    position: absolute;
    width: 100%;
    top: 91.5%;
    z-index: 9100;
  }

  .pierre {
    position: absolute;
    width: 12%;
    top: 91%;
    z-index: 9099;
    left: 26%;
  }

  .maison__2 {
    position: absolute;
    width: 12%;
    top: 85%;
    left: 7.5%;
    z-index: 9099;
  }

  .buisson {
    position: absolute;
    width: 21%;
    top: 91%;
    left: 3%;
    z-index: 9999;
  }

  .maison__6 {
    position: absolute;
    width: 17%;
    top: 87.5%;
    left: 40%;
    z-index: 9099;
  }

  .maison__4 {
    position: absolute;
    width: 17%;
    top: 87%;
    left: 64%;
    z-index: 9099;
  }

  .sol__2 {
    position: absolute;
    width: 100%;
    top: 87.5%;
    z-index: 7000;
  }

  .maison__5 {
    position: absolute;
    width: 14%;
    top: 82%;
    left: 28%;
    z-index: 6999;
  }

  .arbre__2--1 {
    position: absolute;
    width: 9%;
    top: 74.5%;
    left: 5%;
    z-index: 6999;
  }

  .arbre__2--2 {
    position: absolute;
    width: 6.5%;
    top: 77.5%;
    left: 18%;
    z-index: 6999;
  }

  .arbre__2--3 {
    position: absolute;
    width: 6%;
    top: 83%;
    left: 57%;
    z-index: 6999;
  }

  .arbre__1 {
    position: absolute;
    width: 9%;
    top: 82.5%;
    left: 89.5%;
    z-index: 6999;
  }

  .sol__3 {
    position: absolute;
    width: 100%;
    top: 83%;
    z-index: 6000;
    pointer-events: none;
  }

  .maison__3 {
    position: absolute;
    width: 10%;
    top: 78.5%;
    left: 48%;
    z-index: 5999;
  }

  .maison__1 {
    position: absolute;
    width: 13%;
    top: 81.5%;
    left: 76%;
    z-index: 5999;
  }

  .montagne {
    position: absolute;
    width: 100%;
    top: 70%;
    z-index: 2;
    pointer-events: none;
  }

  .ping__1 {
    position: absolute;
    width: 3%;
    top: 81.5%;
    left: 12.5%;
    z-index: 9999;
  }

  .blender {
    position: absolute;
    top: 76.5%;
    left: 6%;
    z-index: 9999;
    font-family: "titre";
    color: white;
  }

  .ping__2 {
    position: absolute;
    width: 3%;
    top: 79%;
    left: 33%;
    z-index: 9999;
  }

  .code {
    position: absolute;
    top: 74%;
    left: 29%;
    z-index: 9999;
    font-family: "titre";
    color: white;
  }

  .ping__3 {
    position: absolute;
    width: 3%;
    top: 75%;
    left: 51%;
    z-index: 9999;
  }

  .illustrator {
    position: absolute;
    top: 70%;
    left: 40%;
    z-index: 9999;
    font-family: "titre";
    color: white;
  }

  .ping__4 {
    position: absolute;
    width: 3%;
    top: 78%;
    left: 82%;
    z-index: 9999;
  }

  .wordpress {
    position: absolute;
    top: 73%;
    left: 72%;
    z-index: 9999;
    font-family: "titre";
    color: white;
  }

  .ping__5 {
    position: absolute;
    width: 3%;
    top: 84.5%;
    left: 48%;
    z-index: 9999;
  }

  .ping__6 {
    position: absolute;
    width: 3%;
    top: 83.5%;
    left: 70%;
    z-index: 9999;
  }

  .oiseau__1 {
    position: absolute;
    width: 7%;
    top: 42.5%;
    left: 33%;
  }

  .oiseau__2 {
    position: absolute;
    width: 8%;
    top: 59%;
    left: 9.5%;
  }

  .oiseau__3 {
    position: absolute;
    width: 9%;
    top: 52%;
    left: 76.5%;
  }

  .cliquez {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%);
    color: white;
    font-family: "titre";
    font-size: 25px;
    z-index: 9999;
  }

  .sousterre {
    position: relative;
    width: 100%;
    height: 100vh;
    background: radial-gradient(
      circle at 50% 100%,
      #292623 13%,
      #262623 57%,
      #5f493e 87%
    );
    z-index: 9999;
  }

  .nuage__terre {
    position: absolute;
    width: 100%;
    top: -6%;
    left: 0%;
    z-index: 9999;
  }

  .sec {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 85%;
    height: 56%;
    top: 32%;
    left: 50%;
    transform: translate(-50%);
    background-color: #51514f;
  }

  .sec__haut {
    width: 100%;
    height: calc(100% / 3);
    display: flex;
    justify-content: space-around;
    padding-top: 11%;
  }

  .sec__haut--droite {
    width: 40%;
    height: 69%;
    object-fit: contain;
  }

  .sec__haut--gauche {
    width: 40%;
    height: 69%;
    object-fit: contain;
  }

  .sec__mid {
    width: 100%;
    height: calc(100% / 3);
    display: flex;
    justify-content: space-around;
  }

  .sec__mid--droite {
    width: 40%;
    height: 69%;
    object-fit: contain;
  }

  .sec__mid--gauche {
    width: 40%;
    height: 69%;
    object-fit: contain;
  }

  .sec__bas {
    width: 100%;
    height: calc(100% / 3);
    display: flex;
    justify-content: space-around;
  }

  .sec__bas--droite {
    width: 40%;
    height: 69%;
    object-fit: contain;
  }

  .sec__bas--gauche {
    width: 40%;
    height: 69%;
    object-fit: contain;
  }

  .titre {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    color: white;
    font-family: "titre";
  }

  .info {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translate(-50%);
    width: 85%;
    height: 10%;
  }

  .mail {
    font-family: "titre";
    color: rgb(184, 184, 184);
    font-size: 207x;
    position: absolute;
    top: 5%;
  }

  .num {
    font-family: "titre";
    color: rgb(184, 184, 184);
    font-size: 16px;
    position: absolute;
    top: 30%;
  }
}


@media (min-width: 1024px) {

}