@media (min-width: 768px) {

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

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

  .portfolio {
    transform: translate(-50%) scale(1.5);
  }

  .nom {
    transform: translate(-50%) scale(1.25);
  }


  .fusee {
    transform: scale(0.75);
  }

  .planete__1 {
    transform: scale(0.7);
  }

  .planete__2 {
    transform: scale(1.25);
  }

  .etoile {
    transform: scaleY(0.9);
  }

  .nuage__espace {
    transform: scale(0.75) scaleX(1.35);
  }

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

  .ciel {
    position: relative;
    width: 100%;
    height: 150vh;
    z-index: 9998;
  }


  .nuage__ciel {
    transform: scale(0.75) scaleX(1.35);
  }


  .ciel__txt2 {
    transform: translate(-30%) scale(1.5);
  }

  .ciel__txt {
    transform: translate(25%) scale(1.5);
  }

  .buisson {
    transform: translateY(25%);
  }

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

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

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

  .blender {
    transform: translate(35%, 120%) scale(1.5);
  }

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

  .code {
    transform: translate(55%, 120%) scale(1.5);

  }

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



  .illustrator {
    transform: translate(60%, 75%) scale(1.5);

  }

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

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

  }

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

  }

  .wordpress {
    transform: translate(50%, 50%) scale(1.5);
  }

  .cliquez {
    transform: translate(-50%) scale(1.5);
  }

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

  .nuage__terre {
    transform: scaleY(0.8) scaleX(1.69);
    top: -7%;
  }

  .sec__haut {
    padding-top: 5%;
  }

  .sec__haut--droite {
    width: 45%;
  }

  .sec__haut--gauche {
    width: 45%;
  }

  .sec__mid--droite {
    width: 45%;
  }

  .sec__mid--gauche {
    width: 45%;
  }

  .sec__bas--droite {
    width: 45%;
  }

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

  .titre {
    transform: translate(-50%, 50%) scale(1.5);
  }

  .mail {
    transform: translate(25%) scale(1.5);
  }

  .num {
    transform: translate(25%) scale(1.5);
  }
}

@media (min-width: 1024px) {
  .portfolio {
    transform: translate(-50%) scale(1.75);
  }

  .nom {
    transform: translate(-50%, 60%) scale(1.75);
  }

  .soleil__img {
    transform: translate(-50%) scale(0.75);
  }

  .etoile {
    transform: scaleY(0.7);
    top: -20%;
  }

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

  .blender {
    transform: translate(72%, 30%) scale(1.75);
  }

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

  .code {
    transform: translate(93%, 0%) scale(1.75);

  }

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



  .illustrator {
    transform: translate(92%, -60%) scale(1.75);

  }

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

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

  }

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

  }

  .wordpress {
    transform: translate(84%, -40%) scale(1.75);
  }

  .buisson {
    transform: translateY(65%);
  }

  .nuage__terre {
    transform: scaleY(0.6) scaleX(1.69);
    top: -13%;
  }

}


@media (min-width: 1440px) {

    .planete__2 {
      transform: translateY(20%);
  }

  .etoile {
    transform: scaleY(0.6);
    top: -40%;
    max-height: 100%;
  }

  .nuage__espace {

  transform: scale(0.6) scaleX(2);
  top: calc(100% - 320px) ;
  }

  .nuage__ciel {
  transform: scale(0.6) scaleX(2);
  top: calc(100% - 320px) ;
  }

  .maison__1 {
    transform: scale(0.8) translateY(-10%);
  }

  .maison__2 {
    transform: scale(0.8) translateY(-10%);

  }

  .maison__3 {
    transform: scale(0.8) translateY(-10%);

  }

  .maison__4 {
    transform: scale(0.8) translateY(-30%);

  }

  .maison__5 {
    transform: scale(0.8) translateY(-10%);

  }

  .maison__6 {
    transform: scale(0.8) translateY(-20%);
  }

  .ping__1{
    transform: scale(0.8);

  }

  .ping__2{
    transform: scale(0.8);
    
  }

  .ping__3{
    transform: scale(0.8);
    
  }

  .ping__4{
    transform: scale(0.8);
    
  }

  .ping__5{
    transform: scale(0.8) translateY(-20%);
    display: none;
    
  }

  .ping__6{
    transform: scale(0.8) translateY(-50%);
    display: none;
    
  }

  .blender {
    transform: scale(2) translate(55%);
  }

  .code {
    transform: scale(2) translate(75%);
  }

  .illustrator {
    transform: scale(2) translate(75%);
  }

  .wordpress {
    transform: scale(2) translate(69%);
  }

  .titre {
    transform: scale(1.8) translate(-28%, 100%);
  }

  .nuage__terre {
  transform: scale(0.5) scaleX(2);
  bottom: calc(100% - 300px) ;
  }

  .sec {
    transform: translate(-50% ,10%);
  }

  .info{
    transform: translate(-50% ,60%);
  }

  .titre{
    transform: scale(1.8) translate(-28%, 160%);
  }
}

@media (min-width: 2560px) {

.orb__bleue--1 {
  transform: scale(0.5);
}

.orb__bleue--2 {
  transform: scale(0.5);
}

.orb__violet--1 {
  transform: scale(0.5);
}

.orb__violet--2 {
  transform: scale(0.5);
}

.orb__violet--3 {
  transform: scale(0.5);
}

.orb__violet--4 {
  transform: scale(0.5);
}

.orb__blanc--1 {
  transform: scale(0.5);
}

.orb__blanc--2 {
  transform: scale(0.5);
}

.orb__jaune--1 {
  transform: scale(0.5);
}

.orb__jaune--2 {
  transform: scale(0.5);
}

.meteore__violet--2 {
  transform: scale(0.5);
}

.planete__1 {
  transform: scale(0.6) translateY(-70%);
}

.etoile {
  transform: scaleY(0.6);
  top: -80%;
}

.nuage__espace {
  transform: scale(0.6) scaleX(2);
  top: calc(100% - 550px);
}

.ciel__txt {
  transform: scale(2.5) translateX(40%);
}

.ciel__txt2 {
  transform: scale(2.5) translateX(-50%);
}

.nuage__ciel {
  transform: scale(0.6) scaleX(2);
  top: calc(100vh - 550px);
}

.ciel__maison {
  display: none;
}

.nuage__ciel {
  transform: scale(0.6) scaleX(2);
  top: 100vh;
}

  .maison__1 {
    transform: scale(0.7) translateY(-20%);
  }

  .maison__2 {
    transform: scale(0.7) translateY(-10%);

  }

  .maison__3 {
    transform: scale(0.7) translateY(-50%);

  }

  .maison__4 {
    transform: scale(0.7) translateY(-45%);

  }

  .maison__5 {
    transform: scale(0.7) translateY(-40%);

  }

  .maison__6 {
    transform: scale(0.7) translateY(-40%);
  }

  .ping__1{
    transform: scale(0.7) translateY(-20%);

  }

  .ping__2{
    transform: scale(0.7) translateY(-80%);

    
  }

  .ping__3{
    transform: scale(0.7) translateY(-85%);
    
  }

  .ping__4{
    transform: scale(0.7) translateY(-45%);
    
  }

  .ping__5{
    transform: scale(0.7) translateY(-75%);
    display: none;
  }

  .ping__6{
    transform: scale(0.7) translateY(-90%);
    display: none;
    
  }

  .blender {
    transform: scale(3) translate(80%);
  }

  .code {
    transform: scale(3) translate(105%, -135%);
  }

  .illustrator {
    transform: scale(3) translate(98%, -165%);
  }

  .wordpress {
    transform: scale(3) translate(95%, -80%);
  }

  .nuage__terre {
    transform: scaleY(0.45) scaleX(2);
    bottom: calc(100vh -450px);
  }

  .arbre__2--1 {
    transform: scale(0.7) translateY(-40%);
  }

  .arbre__2--2 {
    transform: scale(0.7) translateY(-40%);
  }

  .arbre__2--3 {
    transform: scale(0.7) translateY(-40%);
  }

  .sec {
    transform: translate(-50% ,10%);
  }

  .info{
    transform: translate(-50% ,60%);
  }

  .titre{
    transform: scale(2.3) translate(-25%, 230%);
  }
  }