/* ==========================================================
   SPACE UI KIT
   BACKGROUND 01 — SPACE EXPLORATION
========================================================== */

.background {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: hidden;
  isolation: isolate;

  pointer-events: none;
}


/* ==========================================================
   SKY
========================================================== */

.background--1 .space__sky {
  position: absolute;
  inset: 0;

  z-index: var(--z-background);

  background:
    radial-gradient(
      ellipse at 72% 22%,
      rgba(84, 55, 190, 0.22),
      transparent 28%
    ),
    radial-gradient(
      ellipse at 25% 45%,
      rgba(23, 97, 190, 0.16),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #02030d 0%,
      #050719 44%,
      #080a25 72%,
      #03040e 100%
    );
}


/* ==========================================================
   NEBULA
========================================================== */

.background--1 .space__nebula {
  position: absolute;

  z-index: 1;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(35px);

  opacity: 0.55;
}

.background--1 .space__nebula--purple {
  width: 70%;
  height: 28%;

  top: 13%;
  left: -12%;

  transform: rotate(-18deg);

  background:
    radial-gradient(
      ellipse,
      rgba(132, 63, 255, 0.24),
      rgba(92, 36, 195, 0.08) 42%,
      transparent 72%
    );
}

.background--1 .space__nebula--blue {
  width: 65%;
  height: 30%;

  top: 35%;
  right: -15%;

  transform: rotate(18deg);

  background:
    radial-gradient(
      ellipse,
      rgba(24, 133, 255, 0.20),
      rgba(22, 87, 196, 0.07) 42%,
      transparent 72%
    );
}


/* ==========================================================
   STARS
========================================================== */

.background--1 .space__stars {
  position: absolute;
  inset: 0;

  z-index: 2;

  pointer-events: none;
}

.background--1 .space__stars i {
  position: absolute;

  display: block;

  border-radius: 50%;

  background: #dcebff;
}

.background--1 .space__stars--small i {
  width: 2px;
  height: 2px;

  opacity: 0.72;

  box-shadow:
    0 0 4px rgba(150, 205, 255, 0.45);
}


/* Small star positions */

.background--1 .space__stars--small i:nth-child(1)  { top: 7%;  left: 5%; }
.background--1 .space__stars--small i:nth-child(2)  { top: 13%; left: 15%; }
.background--1 .space__stars--small i:nth-child(3)  { top: 5%;  left: 29%; }
.background--1 .space__stars--small i:nth-child(4)  { top: 18%; left: 41%; }
.background--1 .space__stars--small i:nth-child(5)  { top: 8%;  left: 57%; }
.background--1 .space__stars--small i:nth-child(6)  { top: 16%; left: 73%; }
.background--1 .space__stars--small i:nth-child(7)  { top: 11%; left: 91%; }
.background--1 .space__stars--small i:nth-child(8)  { top: 28%; left: 8%; }
.background--1 .space__stars--small i:nth-child(9)  { top: 33%; left: 22%; }
.background--1 .space__stars--small i:nth-child(10) { top: 29%; left: 37%; }
.background--1 .space__stars--small i:nth-child(11) { top: 25%; left: 52%; }
.background--1 .space__stars--small i:nth-child(12) { top: 36%; left: 67%; }
.background--1 .space__stars--small i:nth-child(13) { top: 29%; left: 84%; }
.background--1 .space__stars--small i:nth-child(14) { top: 44%; left: 4%; }
.background--1 .space__stars--small i:nth-child(15) { top: 47%; left: 29%; }
.background--1 .space__stars--small i:nth-child(16) { top: 42%; left: 45%; }
.background--1 .space__stars--small i:nth-child(17) { top: 51%; left: 61%; }
.background--1 .space__stars--small i:nth-child(18) { top: 45%; left: 77%; }
.background--1 .space__stars--small i:nth-child(19) { top: 55%; left: 93%; }
.background--1 .space__stars--small i:nth-child(20) { top: 62%; left: 7%; }
.background--1 .space__stars--small i:nth-child(21) { top: 59%; left: 23%; }
.background--1 .space__stars--small i:nth-child(22) { top: 65%; left: 39%; }
.background--1 .space__stars--small i:nth-child(23) { top: 60%; left: 56%; }
.background--1 .space__stars--small i:nth-child(24) { top: 67%; left: 72%; }
.background--1 .space__stars--small i:nth-child(25) { top: 61%; left: 88%; }
.background--1 .space__stars--small i:nth-child(26) { top: 74%; left: 15%; }
.background--1 .space__stars--small i:nth-child(27) { top: 71%; left: 47%; }


/* Bright stars */

.background--1 .space__stars--bright i {
  width: 4px;
  height: 4px;

  background: #f2fbff;

  box-shadow:
    0 0 6px #b8e7ff,
    0 0 16px rgba(77, 184, 255, 0.72);
}

.background--1 .space__stars--bright i::before,
.background--1 .space__stars--bright i::after {
  content: "";

  position: absolute;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);

  background: #b8e7ff;
}

.background--1 .space__stars--bright i::before {
  width: 20px;
  height: 1px;
}

.background--1 .space__stars--bright i::after {
  width: 1px;
  height: 20px;
}

.background--1 .space__stars--bright i:nth-child(1) { top: 12%; left: 8%; }
.background--1 .space__stars--bright i:nth-child(2) { top: 21%; left: 49%; }
.background--1 .space__stars--bright i:nth-child(3) { top: 9%;  left: 81%; }
.background--1 .space__stars--bright i:nth-child(4) { top: 38%; left: 14%; }
.background--1 .space__stars--bright i:nth-child(5) { top: 42%; left: 71%; }
.background--1 .space__stars--bright i:nth-child(6) { top: 57%; left: 52%; }
.background--1 .space__stars--bright i:nth-child(7) { top: 69%; left: 9%; }
.background--1 .space__stars--bright i:nth-child(8) { top: 64%; left: 90%; }


/* ==========================================================
   PLANET
========================================================== */

.background--1 .space__planet {
  position: absolute;

  z-index: 4;

  width: 300px;
  height: 300px;

  top: -95px;
  left: -65px;

  overflow: hidden;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 32% 28%,
      #67d9ff 0%,
      #3278e8 23%,
      #35258e 52%,
      #120e42 78%,
      #05051c 100%
    );

  box-shadow:
    25px 18px 55px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(52, 125, 255, 0.18);
}

.background--1 .space__planet-surface {
  position: absolute;
  inset: 0;

  opacity: 0.72;

  background:
    radial-gradient(
      ellipse at 20% 30%,
      rgba(90, 232, 255, 0.45),
      transparent 20%
    ),
    radial-gradient(
      ellipse at 55% 22%,
      rgba(38, 105, 220, 0.55),
      transparent 25%
    ),
    radial-gradient(
      ellipse at 62% 55%,
      rgba(100, 47, 180, 0.45),
      transparent 28%
    );
}

.background--1 .space__planet-clouds {
  position: absolute;

  width: 130%;
  height: 38%;

  top: 34%;
  left: -15%;

  transform: rotate(-18deg);

  background:
    repeating-linear-gradient(
      165deg,
      transparent 0 18px,
      rgba(118, 214, 255, 0.18) 19px 25px,
      transparent 26px 46px
    );

  filter: blur(2px);
}

.background--1 .space__planet-light {
  position: absolute;
  inset: 0;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.22),
      transparent 32%
    );

  box-shadow:
    inset -35px -30px 55px rgba(0, 0, 0, 0.48);
}


/* ==========================================================
   PLANET RING
========================================================== */

.background--1 .space__planet-ring {
  position: absolute;

  z-index: 3;

  width: 390px;
  height: 90px;

  top: 38px;
  left: -110px;

  border: 7px solid rgba(102, 195, 255, 0.26);
  border-radius: 50%;

  transform: rotate(-17deg);
}


/* ==========================================================
   MOON
========================================================== */

.background--1 .space__moon {
  position: absolute;

  z-index: 6;

  width: 92px;
  height: 92px;

  top: 25%;
  right: 17%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 32% 28%,
      #f1f4f8 0%,
      #c1c8d2 42%,
      #7a8492 75%,
      #414a58 100%
    );

  box-shadow:
    0 0 25px rgba(170, 190, 215, 0.20),
    inset -14px -12px 22px rgba(0, 0, 0, 0.34);
}

.background--1 .space__moon-crater {
  position: absolute;

  display: block;

  border-radius: 50%;

  background: rgba(63, 72, 84, 0.28);

  box-shadow:
    inset 2px 2px 4px rgba(255, 255, 255, 0.12);
}

.background--1 .space__moon-crater--1 {
  width: 18px;
  height: 18px;

  top: 18px;
  left: 20px;
}

.background--1 .space__moon-crater--2 {
  width: 11px;
  height: 11px;

  top: 51px;
  left: 49px;
}

.background--1 .space__moon-crater--3 {
  width: 8px;
  height: 8px;

  top: 27px;
  right: 17px;
}

.background--1 .space__moon-crater--4 {
  width: 14px;
  height: 14px;

  bottom: 13px;
  left: 30px;
}


/* ==========================================================
   ASTEROIDS
========================================================== */

.background--1 .space__asteroid {
  position: absolute;

  z-index: 7;

  background:
    linear-gradient(
      135deg,
      #7b8493 0%,
      #4a5362 48%,
      #252c38 100%
    );

  clip-path: polygon(
    18% 6%,
    73% 0,
    100% 34%,
    86% 79%,
    48% 100%,
    8% 78%,
    0 37%
  );

  box-shadow:
    inset -5px -5px 9px rgba(0, 0, 0, 0.35);
}

.background--1 .space__asteroid--1 {
  width: 42px;
  height: 32px;

  top: 38%;
  left: 9%;

  transform: rotate(23deg);
}

.background--1 .space__asteroid--2 {
  width: 23px;
  height: 19px;

  top: 47%;
  left: 33%;

  transform: rotate(-14deg);
}

.background--1 .space__asteroid--3 {
  width: 48px;
  height: 37px;

  top: 55%;
  right: 8%;

  transform: rotate(17deg);
}

.background--1 .space__asteroid--4 {
  width: 19px;
  height: 15px;

  top: 23%;
  right: 36%;

  transform: rotate(42deg);
}

.background--1 .space__asteroid--5 {
  width: 29px;
  height: 23px;

  top: 68%;
  left: 70%;

  transform: rotate(-26deg);
}


/* ==========================================================
   SATELLITE
========================================================== */

.background--1 .space__satellite {
  position: absolute;

  z-index: 8;

  width: 105px;
  height: 55px;

  top: 43%;
  right: 23%;

  transform: rotate(-12deg);
}

.background--1 .space__satellite-body {
  position: absolute;

  width: 31px;
  height: 25px;

  top: 15px;
  left: 37px;

  border-radius: 4px;

  background:
    linear-gradient(
      180deg,
      #c5d0dd,
      #596779
    );

  border: 1px solid #dce7f2;
}

.background--1 .space__satellite-core {
  position: absolute;

  width: 8px;
  height: 8px;

  top: 8px;
  left: 11px;

  border-radius: 50%;

  background: #54e6ff;

  box-shadow:
    0 0 8px #54e6ff;
}

.background--1 .space__satellite-panel {
  position: absolute;

  width: 33px;
  height: 19px;

  top: 18px;

  border: 1px solid #4e88b8;

  background:
    repeating-linear-gradient(
      90deg,
      #153a65 0 6px,
      #2c6294 6px 7px
    );
}

.background--1 .space__satellite-panel--left {
  left: 0;
}

.background--1 .space__satellite-panel--right {
  right: 0;
}

.background--1 .space__satellite-antenna {
  position: absolute;

  width: 3px;
  height: 16px;

  top: -12px;
  left: 14px;

  background: #a7b8ca;
}


/* ==========================================================
   METEORS
========================================================== */

.background--1 .space__meteor {
  position: absolute;

  z-index: 9;

  height: 4px;

  transform: rotate(-34deg);

  border-radius: 50%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(77, 181, 255, 0.18),
      rgba(255, 220, 156, 0.95)
    );
}

.background--1 .space__meteor span {
  position: absolute;

  width: 10px;
  height: 10px;

  right: -3px;
  top: -3px;

  border-radius: 50%;

  background: #fff2d6;

  box-shadow:
    0 0 8px #ffd47a,
    0 0 18px rgba(255, 138, 54, 0.65);
}

.background--1 .space__meteor--1 {
  width: 85px;

  top: 27%;
  left: 55%;
}

.background--1 .space__meteor--2 {
  width: 50px;

  top: 18%;
  right: 12%;

  transform: rotate(-48deg) scale(0.7);
}


/* ==========================================================
   PLANET SURFACE
========================================================== */

.background--1 .space__surface {
  position: absolute;

  z-index: 10;

  left: -12%;
  bottom: -47%;

  width: 124%;
  height: 72%;

  overflow: hidden;

  border-radius: 50% 50% 0 0;

  background:
    radial-gradient(
      ellipse at 50% 8%,
      #263957 0%,
      #16243a 32%,
      #0b1426 65%,
      #040813 100%
    );

  box-shadow:
    0 -18px 55px rgba(24, 126, 205, 0.12);
}

.background--1 .space__surface-glow {
  position: absolute;

  top: 0;
  left: 0;
  right: 0;

  height: 12px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #3ecfff 25%,
      #a0f0ff 50%,
      #3ecfff 75%,
      transparent
    );

  box-shadow:
    0 0 18px rgba(62, 207, 255, 0.65);
}


/* ==========================================================
   MOUNTAINS
========================================================== */

.background--1 .space__mountains {
  position: absolute;

  top: 7%;
  left: 0;
  right: 0;

  height: 35%;
}

.background--1 .space__mountains span {
  position: absolute;

  bottom: 0;

  display: block;

  width: 0;
  height: 0;

  border-left: 90px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 135px solid #101c31;
}

.background--1 .space__mountains span:nth-child(1) {
  left: -2%;

  transform: scale(1.2);
}

.background--1 .space__mountains span:nth-child(2) {
  left: 17%;

  border-left-width: 110px;
  border-right-width: 110px;
  border-bottom-width: 170px;
}

.background--1 .space__mountains span:nth-child(3) {
  left: 42%;

  border-left-width: 125px;
  border-right-width: 125px;
  border-bottom-width: 190px;
}

.background--1 .space__mountains span:nth-child(4) {
  right: 17%;

  border-left-width: 105px;
  border-right-width: 105px;
  border-bottom-width: 160px;
}

.background--1 .space__mountains span:nth-child(5) {
  right: -5%;

  border-left-width: 115px;
  border-right-width: 115px;
  border-bottom-width: 180px;
}


/* ==========================================================
   CRATERS
========================================================== */

.background--1 .space__craters {
  position: absolute;

  inset: 14% 0 0;
}

.background--1 .space__craters i {
  position: absolute;

  display: block;

  border-radius: 50%;

  border: 3px solid rgba(2, 7, 16, 0.38);

  background:
    radial-gradient(
      ellipse at center,
      rgba(4, 9, 18, 0.45),
      rgba(24, 38, 57, 0.10) 65%,
      transparent 70%
    );
}

.background--1 .space__craters i:nth-child(1) {
  width: 110px;
  height: 42px;

  top: 33%;
  left: 12%;
}

.background--1 .space__craters i:nth-child(2) {
  width: 170px;
  height: 62px;

  top: 18%;
  left: 43%;
}

.background--1 .space__craters i:nth-child(3) {
  width: 80px;
  height: 31px;

  top: 43%;
  right: 17%;
}

.background--1 .space__craters i:nth-child(4) {
  width: 52px;
  height: 21px;

  top: 57%;
  left: 34%;
}


/* ==========================================================
   ROCKS
========================================================== */

.background--1 .space__surface-rock {
  position: absolute;

  background:
    linear-gradient(
      145deg,
      #43556d,
      #1a273a 65%,
      #0c1422
    );

  clip-path: polygon(
    10% 90%,
    20% 30%,
    48% 0,
    75% 25%,
    100% 92%
  );
}

.background--1 .space__surface-rock--1 {
  width: 75px;
  height: 85px;

  left: 6%;
  top: 42%;
}

.background--1 .space__surface-rock--2 {
  width: 48px;
  height: 60px;

  left: 27%;
  top: 55%;
}

.background--1 .space__surface-rock--3 {
  width: 92px;
  height: 100px;

  right: 8%;
  top: 35%;
}

.background--1 .space__surface-rock--4 {
  width: 55px;
  height: 70px;

  right: 29%;
  top: 58%;
}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width: 768px) {

  .background--1 .space__planet {
    width: 230px;
    height: 230px;

    top: -70px;
    left: -55px;
  }

  .background--1 .space__planet-ring {
    width: 300px;
    height: 70px;

    top: 30px;
    left: -90px;
  }

  .background--1 .space__moon {
    width: 68px;
    height: 68px;

    right: 12%;
  }

  .background--1 .space__satellite {
    right: 16%;

    transform: scale(0.75) rotate(-12deg);
  }

}


@media (max-width: 480px) {

  .background--1 .space__planet {
    width: 180px;
    height: 180px;

    top: -50px;
    left: -45px;
  }

  .background--1 .space__planet-ring {
    width: 240px;
    height: 55px;

    top: 24px;
    left: -72px;

    border-width: 5px;
  }

  .background--1 .space__moon {
    width: 54px;
    height: 54px;

    top: 21%;
    right: 10%;
  }

  .background--1 .space__satellite {
    top: 39%;
    right: 5%;

    transform: scale(0.58) rotate(-12deg);
  }

  .background--1 .space__surface {
    left: -30%;
    width: 160%;

    bottom: -52%;
  }

}

/* ==========================================================
   SPACE UI KIT
   BACKGROUND 02 — ORBITAL
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.background--2 {
    --orbital-blue: #39d9ff;
    --orbital-blue-dark: #0d4f82;
    --orbital-violet: #7a63ff;
    --orbital-white: #dcecff;
    --orbital-dark: #050b19;

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    isolation: isolate;

    background:
        #020611;
}


/* ==========================================================
   SKY
========================================================== */

.orbital__sky {

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        radial-gradient(
            ellipse at 72% 22%,
            rgba(66, 173, 255, .22),
            transparent 32%
        ),

        radial-gradient(
            ellipse at 24% 65%,
            rgba(105, 69, 255, .14),
            transparent 35%
        ),

        linear-gradient(
            180deg,
            #07152d 0%,
            #040b1c 48%,
            #01040d 100%
        );

}


/* ==========================================================
   NEBULA
========================================================== */

.orbital__nebula {

    position: absolute;

    z-index: 1;

    width: 80%;
    height: 45%;

    filter: blur(38px);

    opacity: .45;

    pointer-events: none;

}


.orbital__nebula--blue {

    top: -12%;
    left: -12%;

    transform: rotate(-18deg);

    background:
        radial-gradient(
            ellipse,
            rgba(35, 157, 255, .45),
            transparent 68%
        );

}


.orbital__nebula--violet {

    right: -15%;
    bottom: 8%;

    transform: rotate(24deg);

    background:
        radial-gradient(
            ellipse,
            rgba(117, 67, 255, .35),
            transparent 68%
        );

}


/* ==========================================================
   STARS
========================================================== */

.orbital__stars {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

}


.orbital__stars i {

    position: absolute;

    display: block;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background: #d7ecff;

    box-shadow:
        0 0 5px rgba(173, 225, 255, .65);

}


/* ==========================================================
   SMALL STARS
========================================================== */

.orbital__stars--small i:nth-child(1) {
    top: 8%;
    left: 8%;
}

.orbital__stars--small i:nth-child(2) {
    top: 15%;
    left: 27%;
}

.orbital__stars--small i:nth-child(3) {
    top: 11%;
    left: 62%;
}

.orbital__stars--small i:nth-child(4) {
    top: 20%;
    left: 89%;
}

.orbital__stars--small i:nth-child(5) {
    top: 29%;
    left: 14%;
}

.orbital__stars--small i:nth-child(6) {
    top: 32%;
    left: 42%;
}

.orbital__stars--small i:nth-child(7) {
    top: 27%;
    left: 76%;
}

.orbital__stars--small i:nth-child(8) {
    top: 38%;
    left: 94%;
}

.orbital__stars--small i:nth-child(9) {
    top: 46%;
    left: 7%;
}

.orbital__stars--small i:nth-child(10) {
    top: 49%;
    left: 32%;
}

.orbital__stars--small i:nth-child(11) {
    top: 44%;
    left: 68%;
}

.orbital__stars--small i:nth-child(12) {
    top: 52%;
    left: 85%;
}

.orbital__stars--small i:nth-child(13) {
    top: 61%;
    left: 16%;
}

.orbital__stars--small i:nth-child(14) {
    top: 66%;
    left: 40%;
}

.orbital__stars--small i:nth-child(15) {
    top: 63%;
    left: 72%;
}

.orbital__stars--small i:nth-child(16) {
    top: 72%;
    left: 91%;
}

.orbital__stars--small i:nth-child(17) {
    top: 78%;
    left: 9%;
}

.orbital__stars--small i:nth-child(18) {
    top: 82%;
    left: 28%;
}

.orbital__stars--small i:nth-child(19) {
    top: 75%;
    left: 57%;
}

.orbital__stars--small i:nth-child(20) {
    top: 88%;
    left: 79%;
}

.orbital__stars--small i:nth-child(21) {
    top: 92%;
    left: 18%;
}

.orbital__stars--small i:nth-child(22) {
    top: 94%;
    left: 48%;
}

.orbital__stars--small i:nth-child(23) {
    top: 84%;
    left: 68%;
}

.orbital__stars--small i:nth-child(24) {
    top: 7%;
    left: 45%;
}

.orbital__stars--small i:nth-child(25) {
    top: 56%;
    left: 54%;
}

.orbital__stars--small i:nth-child(26) {
    top: 25%;
    left: 55%;
}

.orbital__stars--small i:nth-child(27) {
    top: 69%;
    left: 84%;
}


/* ==========================================================
   BRIGHT STARS
========================================================== */

.orbital__stars--bright i {

    width: 4px;
    height: 4px;

    background: #e9f8ff;

    box-shadow:
        0 0 6px #8edfff,
        0 0 14px rgba(57, 217, 255, .65);

}


.orbital__stars--bright i::before,
.orbital__stars--bright i::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    background:
        rgba(150, 228, 255, .7);

}


.orbital__stars--bright i::before {

    width: 18px;
    height: 1px;

}


.orbital__stars--bright i::after {

    width: 1px;
    height: 18px;

}


.orbital__stars--bright i:nth-child(1) {
    top: 18%;
    left: 17%;
}

.orbital__stars--bright i:nth-child(2) {
    top: 31%;
    left: 83%;
}

.orbital__stars--bright i:nth-child(3) {
    top: 49%;
    left: 11%;
}

.orbital__stars--bright i:nth-child(4) {
    top: 58%;
    left: 88%;
}

.orbital__stars--bright i:nth-child(5) {
    top: 72%;
    left: 25%;
}

.orbital__stars--bright i:nth-child(6) {
    top: 79%;
    left: 64%;
}

.orbital__stars--bright i:nth-child(7) {
    top: 91%;
    left: 43%;
}

.orbital__stars--bright i:nth-child(8) {
    top: 12%;
    left: 74%;
}


/* ==========================================================
   PLANET
========================================================== */

.orbital__planet {

    position: absolute;

    z-index: 2;

    width: 34%;
    aspect-ratio: 1;

    right: -8%;
    top: -7%;

    border-radius: 50%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 35% 32%,
            #6db8ee 0%,
            #315f9e 24%,
            #142d55 52%,
            #071225 76%,
            #020711 100%
        );

    box-shadow:
        inset -28px -22px 55px rgba(0, 0, 0, .8),
        0 0 45px rgba(46, 137, 255, .14);

}


/* ==========================================================
   PLANET SURFACE
========================================================== */

.orbital__planet-surface {

    position: absolute;

    inset: -5%;

    border-radius: 50%;

    opacity: .55;

    background:

        radial-gradient(
            ellipse at 25% 40%,
            rgba(160, 216, 255, .35),
            transparent 20%
        ),

        radial-gradient(
            ellipse at 65% 25%,
            rgba(70, 137, 206, .4),
            transparent 18%
        ),

        radial-gradient(
            ellipse at 45% 70%,
            rgba(8, 25, 55, .8),
            transparent 28%
        );

}


/* ==========================================================
   PLANET ATMOSPHERE
========================================================== */

.orbital__planet-atmosphere {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 28% 25%,
            rgba(177, 232, 255, .25),
            transparent 30%
        );

}


/* ==========================================================
   PLANET LIGHT
========================================================== */

.orbital__planet-light {

    position: absolute;

    top: 0;
    left: 4%;

    width: 70%;
    height: 35%;

    border-radius: 50%;

    transform:
        rotate(-20deg);

    background:
        radial-gradient(
            ellipse,
            rgba(139, 220, 255, .18),
            transparent 70%
        );

}


/* ==========================================================
   PLANET SHADOW
========================================================== */

.orbital__planet-shadow {

    position: absolute;

    right: -20%;
    bottom: -15%;

    width: 75%;
    height: 80%;

    border-radius: 50%;

    background:
        rgba(0, 4, 13, .58);

    filter:
        blur(12px);

}


/* ==========================================================
   PLANET RINGS
========================================================== */

.orbital__planet-ring {

    position: absolute;

    z-index: 3;

    width: 46%;
    height: 12%;

    right: -13%;
    top: 10%;

    border:
        2px solid rgba(128, 192, 255, .35);

    border-radius: 50%;

    transform:
        rotate(18deg);

    box-shadow:
        0 0 10px rgba(84, 172, 255, .12);

}


.orbital__planet-ring--2 {

    width: 54%;
    height: 16%;

    right: -17%;
    top: 8%;

    border-color:
        rgba(92, 151, 214, .16);

}


/* ==========================================================
   ORBIT PATHS
========================================================== */

.orbital__orbit {

    position: absolute;

    z-index: 5;

    left: 50%;
    top: 54%;

    width: 72%;
    height: 25%;

    border:
        1px solid rgba(94, 189, 255, .18);

    border-radius: 50%;

    transform:
        translate(-50%, -50%)
        rotate(-16deg);

}


.orbital__orbit--2 {

    width: 82%;
    height: 34%;

    border-color:
        rgba(130, 101, 255, .12);

    transform:
        translate(-50%, -50%)
        rotate(12deg);

}


.orbital__orbit--3 {

    width: 55%;
    height: 16%;

    border-color:
        rgba(117, 213, 255, .12);

    transform:
        translate(-50%, -50%)
        rotate(-30deg);

}


/* ==========================================================
   ORBITAL STATION
========================================================== */

.orbital__station {

    position: absolute;

    z-index: 15;

    left: 49%;
    top: 51%;

    width: 24%;
    aspect-ratio: 1;

    transform:
        translate(-50%, -50%)
        rotate(-8deg);

}


/* ==========================================================
   STATION RING
========================================================== */

.orbital__station-ring {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 80%;
    height: 80%;

    transform:
        translate(-50%, -50%);

    border:
        2px solid rgba(115, 202, 255, .58);

    border-radius: 50%;

    box-shadow:
        0 0 12px rgba(44, 184, 255, .15);

}


.orbital__station-ring span {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 8%;
    height: 8%;

    border:
        1px solid #72d8ff;

    border-radius: 50%;

    background:
        #0b3152;

    transform-origin:
        0 0;

}


.orbital__station-ring span:nth-child(1) {
    transform:
        translate(-50%, -50%)
        rotate(0deg)
        translateX(40px);
}

.orbital__station-ring span:nth-child(2) {
    transform:
        translate(-50%, -50%)
        rotate(90deg)
        translateX(40px);
}

.orbital__station-ring span:nth-child(3) {
    transform:
        translate(-50%, -50%)
        rotate(180deg)
        translateX(40px);
}

.orbital__station-ring span:nth-child(4) {
    transform:
        translate(-50%, -50%)
        rotate(270deg)
        translateX(40px);
}


/* ==========================================================
   STATION CORE
========================================================== */

.orbital__station-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 26%;
    height: 32%;

    transform:
        translate(-50%, -50%);

    border:
        1px solid #a9dcff;

    border-radius:
        5px;

    background:
        linear-gradient(
            135deg,
            #d8efff,
            #537ea5 55%,
            #18334e
        );

    box-shadow:
        0 0 14px rgba(60, 201, 255, .22);

}


/* ==========================================================
   STATION WINDOW
========================================================== */

.orbital__station-window {

    position: absolute;

    left: 50%;
    top: 22%;

    width: 34%;
    height: 22%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #48dfff;

    box-shadow:
        0 0 8px #48dfff;

}


/* ==========================================================
   STATION LIGHT
========================================================== */

.orbital__station-light {

    position: absolute;

    left: 50%;
    bottom: 15%;

    width: 18%;
    height: 18%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #ffcf65;

    box-shadow:
        0 0 8px #ffbd42;

}


/* ==========================================================
   STATION MODULES
========================================================== */

.orbital__station-module {

    position: absolute;

    top: 50%;

    width: 26%;
    height: 35%;

    transform:
        translateY(-50%);

    border:
        1px solid #4c91c3;

    background:
        repeating-linear-gradient(
            90deg,
            #092c4a 0 8%,
            #18567f 9% 16%
        );

}


.orbital__station-module--left {

    right: 76%;

    transform:
        translateY(-50%)
        rotate(4deg);

}


.orbital__station-module--right {

    left: 76%;

    transform:
        translateY(-50%)
        rotate(-4deg);

}


.orbital__station-module span {

    position: absolute;

    top: 15%;

    width: 1px;
    height: 70%;

    background:
        rgba(117, 212, 255, .5);

}


.orbital__station-module span:nth-child(1) {
    left: 25%;
}

.orbital__station-module span:nth-child(2) {
    left: 50%;
}

.orbital__station-module span:nth-child(3) {
    left: 75%;
}


/* ==========================================================
   STATION ARMS
========================================================== */

.orbital__station-arm {

    position: absolute;

    top: 50%;

    width: 22%;
    height: 2px;

    background:
        #8acff2;

}


.orbital__station-arm--left {

    right: 96%;

}


.orbital__station-arm--right {

    left: 96%;

}


/* ==========================================================
   SPACECRAFT
========================================================== */

.orbital__ship {

    position: absolute;

    z-index: 18;

    left: 20%;
    top: 27%;

    width: 15%;
    aspect-ratio: 1.8;

    transform:
        rotate(-18deg);

}


/* ==========================================================
   SHIP BODY
========================================================== */

.orbital__ship-body {

    position: absolute;

    left: 25%;
    top: 25%;

    width: 50%;
    height: 50%;

    border:
        1px solid #b8e7ff;

    border-radius:
        50% 50% 42% 42%;

    background:
        linear-gradient(
            135deg,
            #e9f8ff,
            #638ba7 55%,
            #173247
        );

    box-shadow:
        0 0 12px rgba(67, 202, 255, .2);

}


/* ==========================================================
   SHIP WINDOW
========================================================== */

.orbital__ship-window {

    position: absolute;

    left: 50%;
    top: 20%;

    width: 30%;
    height: 24%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #46dcff;

    box-shadow:
        0 0 8px #46dcff;

}


/* ==========================================================
   SHIP LIGHT
========================================================== */

.orbital__ship-light {

    position: absolute;

    left: 50%;
    bottom: 12%;

    width: 16%;
    height: 16%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #ffcb5d;

    box-shadow:
        0 0 7px #ffcb5d;

}


/* ==========================================================
   SHIP WINGS
========================================================== */

.orbital__ship-wing {

    position: absolute;

    top: 34%;

    width: 36%;
    height: 32%;

    border:
        1px solid #3f8bbd;

    background:
        repeating-linear-gradient(
            90deg,
            #082d4c 0 12%,
            #16547a 13% 24%
        );

}


.orbital__ship-wing--left {

    right: 66%;

    transform:
        skewY(12deg);

}


.orbital__ship-wing--right {

    left: 66%;

    transform:
        skewY(-12deg);

}


/* ==========================================================
   SHIP ENGINES
========================================================== */

.orbital__ship-engine {

    position: absolute;

    bottom: 17%;

    width: 10%;
    height: 14%;

    border-radius: 50%;

    background:
        #62e7ff;

    box-shadow:
        0 0 8px rgba(75, 222, 255, .9);

}


.orbital__ship-engine--left {
    left: 34%;
}


.orbital__ship-engine--right {
    right: 34%;
}


/* ==========================================================
   SATELLITE
========================================================== */

.orbital__satellite {

    position: absolute;

    z-index: 12;

    right: 18%;
    bottom: 24%;

    width: 12%;
    aspect-ratio: 1.7;

    transform:
        rotate(18deg);

}


/* ==========================================================
   SATELLITE BODY
========================================================== */

.orbital__satellite-body {

    position: absolute;

    left: 35%;
    top: 25%;

    width: 30%;
    height: 50%;

    border:
        1px solid #b5d8ed;

    border-radius:
        3px;

    background:
        linear-gradient(
            135deg,
            #e4f2fa,
            #597c91
        );

}


.orbital__satellite-core {

    position: absolute;

    left: 50%;
    top: 50%;

    width: 30%;
    height: 30%;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        #47dfff;

    box-shadow:
        0 0 8px #47dfff;

}


/* ==========================================================
   SATELLITE PANELS
========================================================== */

.orbital__satellite-panel {

    position: absolute;

    top: 30%;

    width: 34%;
    height: 40%;

    border:
        1px solid #337eaf;

    background:
        repeating-linear-gradient(
            90deg,
            #082b48 0 10%,
            #145a83 11% 20%
        );

}


.orbital__satellite-panel--left {
    right: 66%;
}


.orbital__satellite-panel--right {
    left: 66%;
}


/* ==========================================================
   ASTEROIDS
========================================================== */

.orbital__asteroid {

    position: absolute;

    z-index: 8;

    width: 4%;
    aspect-ratio: 1;

    background:
        linear-gradient(
            135deg,
            #7c899b,
            #303b4b
        );

    clip-path:
        polygon(
            18% 10%,
            72% 3%,
            96% 38%,
            78% 83%,
            42% 96%,
            8% 67%,
            3% 30%
        );

    filter:
        drop-shadow(
            0 4px 5px rgba(0, 0, 0, .35)
        );

}


.orbital__asteroid--1 {
    left: 10%;
    top: 42%;
    width: 5%;
}


.orbital__asteroid--2 {
    right: 8%;
    top: 48%;
    width: 3%;
}


.orbital__asteroid--3 {
    left: 33%;
    bottom: 13%;
    width: 3%;
}


.orbital__asteroid--4 {
    right: 28%;
    bottom: 10%;
    width: 5%;
}


/* ==========================================================
   PARTICLES
========================================================== */

.orbital__particle {

    position: absolute;

    z-index: 10;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #8ce8ff;

    box-shadow:
        0 0 8px rgba(87, 216, 255, .7);

}


.orbital__particle--1 {
    left: 35%;
    top: 38%;
}


.orbital__particle--2 {
    left: 76%;
    top: 35%;
}


.orbital__particle--3 {
    left: 58%;
    bottom: 28%;
}


.orbital__particle--4 {
    left: 15%;
    bottom: 20%;
}


/* ==========================================================
   HAZE
========================================================== */

.orbital__haze {

    position: absolute;

    z-index: 25;

    left: -10%;
    right: -10%;
    bottom: -18%;

    height: 42%;

    background:
        radial-gradient(
            ellipse at center bottom,
            rgba(24, 62, 108, .42),
            transparent 68%
        );

    pointer-events: none;

}


/* ==========================================================
   MOBILE ADAPTATION
========================================================== */

@media (max-aspect-ratio: 3 / 4) {

    .orbital__planet {

        width: 58%;

        right: -18%;
        top: -4%;

    }


    .orbital__station {

        width: 31%;

        left: 50%;
        top: 49%;

    }


    .orbital__ship {

        width: 23%;

        left: 12%;
        top: 30%;

    }


    .orbital__satellite {

        width: 20%;

        right: 10%;
        bottom: 30%;

    }


    .orbital__asteroid--1 {
        width: 8%;

        left: 5%;
        top: 43%;
    }


    .orbital__asteroid--2 {
        width: 6%;

        right: 5%;
        top: 53%;
    }


    .orbital__asteroid--3 {
        width: 7%;

        left: 15%;
        bottom: 18%;
    }


    .orbital__asteroid--4 {
        width: 9%;

        right: 8%;
        bottom: 12%;
    }


    .orbital__orbit {

        width: 125%;
        height: 28%;

    }


    .orbital__orbit--2 {

        width: 140%;
        height: 40%;

    }


    .orbital__orbit--3 {

        width: 105%;
        height: 20%;

    }

}

/* ==========================================================
   SPACE UI KIT
   BACKGROUND 03 — ALIEN WORLD
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.background--3 {

    --alien-deep: #050713;
    --alien-night: #0a1022;

    --alien-violet: #8d68ff;
    --alien-purple: #6546c8;

    --alien-cyan: #45e5dc;
    --alien-blue: #45a9ff;

    --alien-ground: #172238;
    --alien-ground-dark: #090e1c;

    --alien-rock: #596174;
    --alien-rock-dark: #252c3d;

    --alien-glow: #5ce8d4;

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    isolation: isolate;

    background:
        var(--alien-deep);

}


/* ==========================================================
   SKY
========================================================== */

.alien__sky {

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        radial-gradient(
            ellipse at 22% 26%,
            rgba(105, 72, 255, .28),
            transparent 31%
        ),

        radial-gradient(
            ellipse at 82% 34%,
            rgba(55, 211, 230, .17),
            transparent 30%
        ),

        linear-gradient(
            180deg,
            #0d1230 0%,
            #0a1024 44%,
            #080d1b 70%,
            #03050d 100%
        );

}


/* ==========================================================
   NEBULA
========================================================== */

.alien__nebula {

    position: absolute;

    z-index: 1;

    width: 80%;
    height: 48%;

    filter:
        blur(45px);

    opacity: .55;

    pointer-events: none;

}


.alien__nebula--violet {

    left: -22%;
    top: -14%;

    transform:
        rotate(-18deg);

    background:
        radial-gradient(
            ellipse,
            rgba(119, 77, 255, .52),
            transparent 68%
        );

}


.alien__nebula--cyan {

    right: -25%;
    top: 8%;

    transform:
        rotate(22deg);

    background:
        radial-gradient(
            ellipse,
            rgba(38, 224, 222, .27),
            transparent 68%
        );

}


/* ==========================================================
   STARS
========================================================== */

.alien__stars {

    position: absolute;

    inset: 0;

    z-index: 4;

    pointer-events: none;

}


.alien__stars i {

    position: absolute;

    display: block;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background:
        #d9f7ff;

    box-shadow:
        0 0 5px rgba(108, 226, 255, .7);

}


/* ==========================================================
   SMALL STARS
========================================================== */

.alien__stars--small i:nth-child(1) {
    top: 7%;
    left: 8%;
}

.alien__stars--small i:nth-child(2) {
    top: 12%;
    left: 24%;
}

.alien__stars--small i:nth-child(3) {
    top: 8%;
    left: 58%;
}

.alien__stars--small i:nth-child(4) {
    top: 17%;
    left: 86%;
}

.alien__stars--small i:nth-child(5) {
    top: 23%;
    left: 12%;
}

.alien__stars--small i:nth-child(6) {
    top: 26%;
    left: 37%;
}

.alien__stars--small i:nth-child(7) {
    top: 30%;
    left: 68%;
}

.alien__stars--small i:nth-child(8) {
    top: 34%;
    left: 93%;
}

.alien__stars--small i:nth-child(9) {
    top: 41%;
    left: 5%;
}

.alien__stars--small i:nth-child(10) {
    top: 45%;
    left: 27%;
}

.alien__stars--small i:nth-child(11) {
    top: 42%;
    left: 57%;
}

.alien__stars--small i:nth-child(12) {
    top: 48%;
    left: 81%;
}

.alien__stars--small i:nth-child(13) {
    top: 55%;
    left: 14%;
}

.alien__stars--small i:nth-child(14) {
    top: 59%;
    left: 38%;
}

.alien__stars--small i:nth-child(15) {
    top: 57%;
    left: 72%;
}

.alien__stars--small i:nth-child(16) {
    top: 66%;
    left: 91%;
}

.alien__stars--small i:nth-child(17) {
    top: 72%;
    left: 7%;
}

.alien__stars--small i:nth-child(18) {
    top: 76%;
    left: 26%;
}

.alien__stars--small i:nth-child(19) {
    top: 79%;
    left: 52%;
}

.alien__stars--small i:nth-child(20) {
    top: 84%;
    left: 75%;
}

.alien__stars--small i:nth-child(21) {
    top: 89%;
    left: 94%;
}

.alien__stars--small i:nth-child(22) {
    top: 92%;
    left: 17%;
}

.alien__stars--small i:nth-child(23) {
    top: 95%;
    left: 45%;
}

.alien__stars--small i:nth-child(24) {
    top: 14%;
    left: 45%;
}

.alien__stars--small i:nth-child(25) {
    top: 51%;
    left: 47%;
}

.alien__stars--small i:nth-child(26) {
    top: 64%;
    left: 62%;
}


/* ==========================================================
   BRIGHT STARS
========================================================== */

.alien__stars--bright i {

    width: 4px;
    height: 4px;

    background:
        #efffff;

    box-shadow:
        0 0 7px #5ce8ff,
        0 0 15px rgba(74, 220, 255, .55);

}


.alien__stars--bright i::before,
.alien__stars--bright i::after {

    content: "";

    position: absolute;

    left: 50%;
    top: 50%;

    transform:
        translate(-50%, -50%);

    background:
        rgba(122, 232, 255, .65);

}


.alien__stars--bright i::before {

    width: 18px;
    height: 1px;

}


.alien__stars--bright i::after {

    width: 1px;
    height: 18px;

}


.alien__stars--bright i:nth-child(1) {
    top: 19%;
    left: 17%;
}

.alien__stars--bright i:nth-child(2) {
    top: 28%;
    left: 79%;
}

.alien__stars--bright i:nth-child(3) {
    top: 44%;
    left: 8%;
}

.alien__stars--bright i:nth-child(4) {
    top: 52%;
    left: 91%;
}

.alien__stars--bright i:nth-child(5) {
    top: 68%;
    left: 31%;
}

.alien__stars--bright i:nth-child(6) {
    top: 73%;
    left: 70%;
}


/* ==========================================================
   FAR MOON
========================================================== */

.alien__moon {

    position: absolute;

    border-radius: 50%;

    overflow: hidden;

}


/* ==========================================================
   FAR MOON
========================================================== */

.alien__moon--far {

    z-index: 2;

    width: 11%;

    aspect-ratio: 1;

    right: 13%;
    top: 15%;

    background:

        radial-gradient(
            circle at 34% 30%,
            #d4d8ef,
            #777d9c 52%,
            #272d45 100%
        );

    box-shadow:
        0 0 20px rgba(152, 142, 255, .15);

}


.alien__moon--far .alien__moon-surface {

    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            circle at 70% 65%,
            rgba(30, 34, 56, .55),
            transparent 25%
        );

}


/* ==========================================================
   MAIN MOON
========================================================== */

.alien__moon--main {

    z-index: 3;

    width: 19%;

    aspect-ratio: 1;

    right: 25%;
    top: 10%;

    background:

        radial-gradient(
            circle at 32% 28%,
            #edf0ff 0%,
            #b6b9d4 36%,
            #777c9c 68%,
            #363b59 100%
        );

    box-shadow:
        0 0 32px rgba(144, 133, 255, .12);

}


/* ==========================================================
   MAIN MOON SURFACE
========================================================== */

.alien__moon--main .alien__moon-surface {

    position: absolute;

    inset: 0;

    background:

        radial-gradient(
            circle at 68% 72%,
            rgba(48, 51, 76, .55),
            transparent 26%
        ),

        radial-gradient(
            circle at 30% 58%,
            rgba(74, 77, 103, .42),
            transparent 20%
        );

}


/* ==========================================================
   MOON CRATERS
========================================================== */

.alien__moon-crater {

    position: absolute;

    border-radius: 50%;

    background:
        rgba(67, 71, 97, .38);

    box-shadow:
        inset 3px 3px 5px rgba(20, 23, 39, .25);

}


.alien__moon-crater--1 {

    width: 15%;
    height: 15%;

    left: 23%;
    top: 27%;

}


.alien__moon-crater--2 {

    width: 11%;
    height: 11%;

    left: 57%;
    top: 34%;

}


.alien__moon-crater--3 {

    width: 18%;
    height: 18%;

    left: 46%;
    top: 58%;

}


.alien__moon-crater--4 {

    width: 10%;
    height: 10%;

    left: 24%;
    top: 68%;

}


/* ==========================================================
   FLOATING ROCKS
========================================================== */

.alien__floating-rock {

    position: absolute;

    z-index: 7;

    background:

        linear-gradient(
            135deg,
            #7a8398,
            #30374b
        );

    clip-path:
        polygon(
            16% 10%,
            67% 2%,
            94% 31%,
            83% 75%,
            48% 97%,
            13% 78%,
            4% 39%
        );

    filter:
        drop-shadow(
            0 5px 8px rgba(0, 0, 0, .35)
        );

}


.alien__floating-rock--1 {

    width: 7%;

    left: 10%;
    top: 36%;

    transform:
        rotate(12deg);

}


.alien__floating-rock--2 {

    width: 5%;

    right: 12%;
    top: 42%;

    transform:
        rotate(-18deg);

}


.alien__floating-rock--3 {

    width: 4%;

    left: 63%;
    top: 27%;

    transform:
        rotate(25deg);

}


/* ==========================================================
   DISTANT MOUNTAINS
========================================================== */

.alien__mountains {

    position: absolute;

    left: -5%;
    right: -5%;

    display: flex;

    align-items: flex-end;

    pointer-events: none;

}


.alien__mountains span {

    display: block;

    flex: 1;

    clip-path:
        polygon(
            0 100%,
            12% 62%,
            28% 75%,
            42% 38%,
            55% 68%,
            70% 28%,
            84% 64%,
            100% 46%,
            100% 100%
        );

}


/* ==========================================================
   FAR MOUNTAINS
========================================================== */

.alien__mountains--far {

    z-index: 8;

    bottom: 28%;

    height: 30%;

    opacity: .7;

}


.alien__mountains--far span {

    background:
        linear-gradient(
            180deg,
            #222c48,
            #10182b
        );

}


/* ==========================================================
   HORIZON
========================================================== */

.alien__horizon {

    position: absolute;

    z-index: 9;

    left: -10%;
    right: -10%;

    bottom: 25%;

    height: 18%;

    border-radius:
        50% 50% 0 0;

    background:
        linear-gradient(
            180deg,
            rgba(47, 71, 91, .25),
            rgba(10, 17, 30, .75)
        );

}


.alien__horizon-glow {

    position: absolute;

    left: 10%;
    right: 10%;

    top: 0;

    height: 5%;

    border-radius: 50%;

    background:
        var(--alien-cyan);

    box-shadow:
        0 0 18px rgba(69, 229, 220, .65),
        0 0 45px rgba(69, 229, 220, .35);

    opacity: .55;

}


/* ==========================================================
   MAIN MOUNTAINS
========================================================== */

.alien__mountains--main {

    z-index: 13;

    bottom: 19%;

    height: 29%;

}


.alien__mountains--main span {

    background:

        linear-gradient(
            180deg,
            #303b50,
            #141d2e
        );

}


/* ==========================================================
   CRYSTALS
========================================================== */

.alien__crystal {

    position: absolute;

    z-index: 20;

    width: 3%;

    height: 13%;

    transform:
        skewX(-10deg);

}


.alien__crystal::before {

    content: "";

    position: absolute;

    inset: 0;

    clip-path:
        polygon(
            50% 0,
            100% 24%,
            76% 100%,
            26% 100%,
            0 24%
        );

    background:
        linear-gradient(
            135deg,
            #a2fff5,
            #35cfc8 45%,
            #155d6c
        );

    box-shadow:
        0 0 14px rgba(68, 237, 224, .65);

}


.alien__crystal span {

    position: absolute;

    left: 46%;
    top: 5%;

    width: 8%;
    height: 80%;

    background:
        rgba(228, 255, 252, .75);

    filter:
        blur(1px);

}


/* ==========================================================
   CRYSTAL POSITIONS
========================================================== */

.alien__crystal--1 {

    left: 17%;
    bottom: 17%;

    width: 4%;
    height: 16%;

}


.alien__crystal--2 {

    left: 31%;
    bottom: 21%;

    width: 2.5%;
    height: 10%;

}


.alien__crystal--3 {

    right: 27%;
    bottom: 18%;

    width: 4%;
    height: 15%;

}


.alien__crystal--4 {

    right: 15%;
    bottom: 23%;

    width: 2.5%;
    height: 10%;

}


.alien__crystal--5 {

    left: 57%;
    bottom: 15%;

    width: 2%;
    height: 8%;

}


/* ==========================================================
   ALIEN PLANTS
========================================================== */

.alien__plant {

    position: absolute;

    z-index: 22;

    width: 7%;

    height: 16%;

}


.alien__plant::before {

    content: "";

    position: absolute;

    left: 48%;
    bottom: 0;

    width: 5%;
    height: 65%;

    border-radius:
        50%;

    background:
        linear-gradient(
            180deg,
            #4ae7cb,
            #123e47
        );

    transform:
        rotate(-4deg);

}


.alien__plant span {

    position: absolute;

    bottom: 35%;

    width: 40%;
    height: 30%;

    border-radius:
        100% 0 100% 0;

    background:
        linear-gradient(
            135deg,
            #55f1d7,
            #1d6e72
        );

    box-shadow:
        0 0 10px rgba(67, 229, 203, .25);

}


.alien__plant span:nth-child(1) {

    left: 4%;

    transform:
        rotate(-28deg);

}


.alien__plant span:nth-child(2) {

    right: 4%;

    transform:
        rotate(28deg)
        scaleX(-1);

}


.alien__plant span:nth-child(3) {

    left: 31%;
    bottom: 54%;

    transform:
        rotate(-4deg);

}


/* ==========================================================
   PLANT POSITIONS
========================================================== */

.alien__plant--1 {

    left: 7%;
    bottom: 10%;

}


.alien__plant--2 {

    right: 8%;
    bottom: 12%;

    transform:
        scale(.8);

}


.alien__plant--3 {

    left: 45%;
    bottom: 9%;

    transform:
        scale(.65);

}


/* ==========================================================
   FOREGROUND ROCKS
========================================================== */

.alien__rock {

    position: absolute;

    z-index: 24;

    background:

        linear-gradient(
            145deg,
            #687388,
            #252d40
        );

    clip-path:
        polygon(
            14% 17%,
            52% 2%,
            91% 20%,
            100% 61%,
            72% 91%,
            34% 100%,
            5% 69%
        );

    filter:
        drop-shadow(
            0 7px 9px rgba(0, 0, 0, .5)
        );

}


.alien__rock--1 {

    left: 3%;
    bottom: 3%;

    width: 13%;
    height: 15%;

}


.alien__rock--2 {

    right: 4%;
    bottom: 2%;

    width: 15%;
    height: 18%;

}


.alien__rock--3 {

    left: 35%;
    bottom: 1%;

    width: 8%;
    height: 10%;

}


/* ==========================================================
   GROUND
========================================================== */

.alien__ground {

    position: absolute;

    z-index: 23;

    left: -8%;
    right: -8%;

    bottom: -15%;

    height: 40%;

    border-radius:
        50% 50% 0 0;

    background:

        linear-gradient(
            180deg,
            #1a273c 0%,
            #111a2c 40%,
            #070b15 100%
        );

    box-shadow:
        inset 0 12px 30px rgba(0, 0, 0, .22);

}


/* ==========================================================
   GROUND GLOW
========================================================== */

.alien__ground-glow {

    position: absolute;

    left: 15%;
    right: 15%;

    top: 3%;

    height: 4%;

    border-radius: 50%;

    background:
        rgba(68, 226, 213, .45);

    box-shadow:
        0 0 20px rgba(61, 225, 213, .25);

}


/* ==========================================================
   GROUND RIDGE
========================================================== */

.alien__ground-ridge {

    position: absolute;

    left: 10%;
    right: 10%;

    top: 17%;

    height: 1px;

    background:
        rgba(74, 100, 126, .35);

    box-shadow:
        0 0 10px rgba(67, 213, 209, .08);

}


/* ==========================================================
   GROUND SHADOW
========================================================== */

.alien__ground-shadow {

    position: absolute;

    left: 25%;
    top: 35%;

    width: 50%;
    height: 25%;

    border-radius: 50%;

    background:
        rgba(0, 0, 0, .22);

    filter:
        blur(20px);

}


/* ==========================================================
   PARTICLES
========================================================== */

.alien__particle {

    position: absolute;

    z-index: 21;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        var(--alien-cyan);

    box-shadow:
        0 0 9px rgba(75, 235, 220, .75);

}


.alien__particle--1 {

    left: 23%;
    bottom: 32%;

}


.alien__particle--2 {

    left: 52%;
    bottom: 38%;

}


.alien__particle--3 {

    right: 24%;
    bottom: 34%;

}


.alien__particle--4 {

    left: 40%;
    bottom: 27%;

}


.alien__particle--5 {

    right: 8%;
    bottom: 41%;

}


/* ==========================================================
   ATMOSPHERE
========================================================== */

.alien__atmosphere {

    position: absolute;

    z-index: 40;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(112, 87, 255, .08),
            transparent 28%,
            transparent 72%,
            rgba(38, 224, 207, .08)
        );

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-aspect-ratio: 3 / 4) {

    .alien__moon--main {

        width: 30%;

        right: 18%;
        top: 9%;

    }


    .alien__moon--far {

        width: 17%;

        right: 6%;
        top: 24%;

    }


    .alien__floating-rock--1 {

        width: 11%;

        left: 5%;
        top: 37%;

    }


    .alien__floating-rock--2 {

        width: 8%;

        right: 5%;
        top: 43%;

    }


    .alien__floating-rock--3 {

        width: 7%;

        left: 62%;
        top: 30%;

    }


    .alien__mountains--far {

        bottom: 29%;

        height: 27%;

    }


    .alien__mountains--main {

        bottom: 19%;

        height: 30%;

    }


    .alien__crystal--1 {

        left: 12%;

        width: 7%;
        height: 13%;

    }


    .alien__crystal--2 {

        left: 29%;

        width: 5%;
        height: 10%;

    }


    .alien__crystal--3 {

        right: 24%;

        width: 7%;
        height: 13%;

    }


    .alien__crystal--4 {

        right: 8%;

        width: 5%;
        height: 10%;

    }


    .alien__crystal--5 {

        left: 55%;

        width: 4%;
        height: 8%;

    }


    .alien__plant {

        width: 12%;

        height: 17%;

    }


    .alien__plant--1 {

        left: 5%;

    }


    .alien__plant--2 {

        right: 4%;

    }


    .alien__plant--3 {

        left: 42%;

    }


    .alien__rock--1 {

        width: 22%;
        height: 14%;

    }


    .alien__rock--2 {

        width: 23%;
        height: 16%;

    }


    .alien__rock--3 {

        width: 13%;
        height: 10%;

    }


    .alien__ground {

        bottom: -12%;

        height: 39%;

    }

}

/* ==========================================================
   SPACE UI KIT
   BACKGROUND 04 — SOLAR FRONTIER
========================================================== */


/* ==========================================================
   ROOT
========================================================== */

.background--4 {

    --solar-yellow: #fff4a3;
    --solar-gold: #ffd34f;
    --solar-orange: #ff9d27;
    --solar-red: #f04d24;

    --solar-space: #090b16;

    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    isolation: isolate;

    background:
        #100b09;

}


/* ==========================================================
   SKY
========================================================== */

.solar__sky {

    position: absolute;

    inset: 0;

    z-index: 0;

    background:

        radial-gradient(
            ellipse at 16% 46%,
            rgba(255, 208, 74, .34),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 48% 48%,
            rgba(255, 131, 38, .20),
            transparent 48%
        ),

        linear-gradient(
            135deg,
            #21110a 0%,
            #170d0a 30%,
            #0e0b12 68%,
            #05070e 100%
        );

}


/* ==========================================================
   GLOBAL LIGHT
========================================================== */

.solar__light {

    position: absolute;

    z-index: 1;

    left: -15%;
    top: -25%;

    width: 85%;
    height: 150%;

    background:

        radial-gradient(
            ellipse at center,
            rgba(255, 230, 128, .20),
            rgba(255, 157, 39, .09) 34%,
            transparent 70%
        );

    filter:
        blur(20px);

    transform:
        rotate(-8deg);

}


/* ==========================================================
   SUN RAYS
========================================================== */

.solar__rays {

    position: absolute;

    z-index: 2;

    left: -9%;
    top: 50%;

    width: 72%;
    height: 160%;

    transform:
        translateY(-50%)
        rotate(-8deg);

    opacity: .55;

    background:

        repeating-conic-gradient(
            from 250deg at 50% 50%,
            rgba(255, 239, 153, .18) 0deg,
            rgba(255, 239, 153, .18) 3deg,
            transparent 3deg,
            transparent 13deg
        );

    filter:
        blur(2px);

    pointer-events: none;

}


/* ==========================================================
   STARS
========================================================== */

.solar__stars {

    position: absolute;

    inset: 0;

    z-index: 4;

}


.solar__stars i {

    position: absolute;

    width: 2px;
    height: 2px;

    border-radius: 50%;

    background:
        rgba(255, 244, 194, .75);

    box-shadow:
        0 0 5px rgba(255, 223, 130, .45);

}


/* ==========================================================
   STAR POSITIONS
========================================================== */

.solar__stars i:nth-child(1) {
    top: 8%;
    left: 76%;
}

.solar__stars i:nth-child(2) {
    top: 12%;
    left: 91%;
}

.solar__stars i:nth-child(3) {
    top: 18%;
    left: 57%;
}

.solar__stars i:nth-child(4) {
    top: 23%;
    left: 84%;
}

.solar__stars i:nth-child(5) {
    top: 31%;
    left: 72%;
}

.solar__stars i:nth-child(6) {
    top: 36%;
    left: 94%;
}

.solar__stars i:nth-child(7) {
    top: 45%;
    left: 63%;
}

.solar__stars i:nth-child(8) {
    top: 49%;
    left: 88%;
}

.solar__stars i:nth-child(9) {
    top: 57%;
    left: 74%;
}

.solar__stars i:nth-child(10) {
    top: 62%;
    left: 95%;
}

.solar__stars i:nth-child(11) {
    top: 69%;
    left: 65%;
}

.solar__stars i:nth-child(12) {
    top: 77%;
    left: 86%;
}

.solar__stars i:nth-child(13) {
    top: 84%;
    left: 57%;
}

.solar__stars i:nth-child(14) {
    top: 90%;
    left: 78%;
}

.solar__stars i:nth-child(15) {
    top: 14%;
    left: 45%;
}

.solar__stars i:nth-child(16) {
    top: 28%;
    left: 51%;
}

.solar__stars i:nth-child(17) {
    top: 73%;
    left: 48%;
}

.solar__stars i:nth-child(18) {
    top: 93%;
    left: 43%;
}


/* ==========================================================
   CORONA
========================================================== */

.solar__corona {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;

}


/* ==========================================================
   OUTER CORONA
========================================================== */

.solar__corona--outer {

    z-index: 5;

    left: -22%;
    top: 50%;

    width: 63%;
    aspect-ratio: 1;

    transform:
        translateY(-50%);

    background:

        radial-gradient(
            circle,
            rgba(255, 226, 100, .32) 0%,
            rgba(255, 171, 47, .20) 36%,
            rgba(255, 109, 25, .09) 57%,
            transparent 72%
        );

    filter:
        blur(8px);

}


/* ==========================================================
   MIDDLE CORONA
========================================================== */

.solar__corona--middle {

    z-index: 6;

    left: -15%;
    top: 50%;

    width: 49%;
    aspect-ratio: 1;

    transform:
        translateY(-50%);

    background:

        radial-gradient(
            circle,
            rgba(255, 244, 165, .58),
            rgba(255, 193, 62, .28) 48%,
            transparent 72%
        );

    filter:
        blur(4px);

}


/* ==========================================================
   INNER CORONA
========================================================== */

.solar__corona--inner {

    z-index: 7;

    left: -10%;
    top: 50%;

    width: 40%;
    aspect-ratio: 1;

    transform:
        translateY(-50%);

    background:

        radial-gradient(
            circle,
            rgba(255, 255, 215, .85),
            rgba(255, 207, 69, .42) 56%,
            transparent 75%
        );

}


/* ==========================================================
   SUN
========================================================== */

.solar__sun {

    position: absolute;

    z-index: 10;

    left: -6%;
    top: 50%;

    width: 32%;
    aspect-ratio: 1;

    transform:
        translateY(-50%);

    overflow: hidden;

    border-radius: 50%;

    background:

        radial-gradient(
            circle at 45% 43%,
            #fffbd1 0%,
            #fff39a 18%,
            #ffd84d 44%,
            #ff9e21 72%,
            #f35b1c 100%
        );

    box-shadow:

        0 0 35px rgba(255, 235, 117, .9),
        0 0 80px rgba(255, 166, 45, .65),
        0 0 150px rgba(255, 116, 24, .35);

}


/* ==========================================================
   SUN SURFACE
========================================================== */

.solar__sun-surface {

    position: absolute;

    inset: 0;

    border-radius: 50%;

    opacity: .75;

    background:

        repeating-radial-gradient(
            circle at 40% 45%,
            transparent 0 7px,
            rgba(255, 151, 25, .16) 8px 10px
        );

}


/* ==========================================================
   SUN GRANULATION
========================================================== */

.solar__sun-granulation {

    position: absolute;

    inset: -20%;

    opacity: .55;

    background:

        radial-gradient(
            ellipse,
            rgba(255, 255, 188, .42) 0 2%,
            transparent 3%
        );

    background-size:
        19px 15px;

    filter:
        blur(1px);

}


/* ==========================================================
   SUN SPOTS
========================================================== */

.solar__sun-spot {

    position: absolute;

    border-radius: 50%;

    background:
        rgba(198, 69, 18, .45);

    box-shadow:
        inset 3px 3px 5px rgba(115, 40, 12, .25);

}


.solar__sun-spot--1 {

    width: 11%;
    height: 8%;

    left: 32%;
    top: 28%;

}


.solar__sun-spot--2 {

    width: 7%;
    height: 6%;

    left: 62%;
    top: 52%;

}


.solar__sun-spot--3 {

    width: 9%;
    height: 7%;

    left: 27%;
    top: 65%;

}


/* ==========================================================
   SOLAR FLARES
========================================================== */

.solar__flare {

    position: absolute;

    z-index: 11;

    left: 21%;

    width: 18%;

    border-radius:
        50%;

    background:
        linear-gradient(
            90deg,
            rgba(255, 217, 79, .92),
            rgba(255, 123, 25, .48),
            transparent
        );

    filter:
        blur(2px);

    transform-origin:
        left center;

}


/* ==========================================================
   FLARE 01
========================================================== */

.solar__flare--1 {

    top: 29%;

    height: 5%;

    transform:
        rotate(-25deg);

}


.solar__flare--1 span {

    position: absolute;

    right: 0;
    top: 50%;

    width: 24%;
    height: 180%;

    transform:
        translateY(-50%);

    border-radius:
        50%;

    background:
        #ffe777;

    box-shadow:
        0 0 12px #ffb62d;

}


/* ==========================================================
   FLARE 02
========================================================== */

.solar__flare--2 {

    top: 67%;

    height: 7%;

    transform:
        rotate(20deg);

}


/* ==========================================================
   FLARE 03
========================================================== */

.solar__flare--3 {

    top: 40%;

    height: 3%;

    width: 24%;

    transform:
        rotate(-7deg);

}


/* ==========================================================
   FLARE 04
========================================================== */

.solar__flare--4 {

    top: 80%;

    height: 4%;

    width: 14%;

    transform:
        rotate(28deg);

}


/* ==========================================================
   PLANET
========================================================== */

.solar__planet {

    position: absolute;

    z-index: 13;

    right: 9%;
    bottom: -17%;

    width: 42%;
    aspect-ratio: 1;

    border-radius: 50%;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 32% 28%,
            #7e91a8,
            #42536d 35%,
            #1d2a40 62%,
            #080d19 100%
        );

    box-shadow:

        inset 25px 18px 45px rgba(255, 203, 91, .14),
        inset -35px -30px 55px rgba(0, 0, 0, .7);

}


/* ==========================================================
   PLANET ATMOSPHERE
========================================================== */

.solar__planet-atmosphere {

    position: absolute;

    inset: -3%;

    border-radius: 50%;

    border:
        4px solid rgba(255, 183, 72, .28);

    box-shadow:
        0 0 22px rgba(255, 171, 51, .22);

}


/* ==========================================================
   PLANET SURFACE
========================================================== */

.solar__planet-surface {

    position: absolute;

    inset: 0;

    opacity: .45;

    background:

        radial-gradient(
            ellipse at 35% 40%,
            rgba(115, 136, 155, .55),
            transparent 16%
        ),

        radial-gradient(
            ellipse at 60% 60%,
            rgba(20, 31, 49, .65),
            transparent 25%
        ),

        radial-gradient(
            ellipse at 25% 75%,
            rgba(102, 124, 144, .32),
            transparent 18%
        );

}


/* ==========================================================
   PLANET SHADOW
========================================================== */

.solar__planet-shadow {

    position: absolute;

    right: -15%;
    bottom: -10%;

    width: 80%;
    height: 85%;

    border-radius: 50%;

    background:
        rgba(0, 2, 7, .62);

    filter:
        blur(8px);

}


/* ==========================================================
   PLANET RING
========================================================== */

.solar__planet-ring {

    position: absolute;

    z-index: 14;

    right: 0%;
    bottom: 4%;

    width: 58%;
    height: 14%;

    border:
        2px solid rgba(192, 173, 137, .25);

    border-radius: 50%;

    transform:
        rotate(-14deg);

}


/* ==========================================================
   SPACECRAFT
========================================================== */

.solar__ship {

    position: absolute;

    z-index: 18;

    right: 33%;
    top: 31%;

    width: 13%;

    aspect-ratio: 1.8;

    transform:
        rotate(-17deg);

}


/* ==========================================================
   SHIP BODY
========================================================== */

.solar__ship-body {

    position: absolute;

    left: 25%;
    top: 24%;

    width: 50%;
    height: 52%;

    border:
        1px solid #d9e9ee;

    border-radius:
        50% 50% 42% 42%;

    background:

        linear-gradient(
            135deg,
            #eef8f5,
            #778a92 55%,
            #27323b
        );

    box-shadow:
        0 0 14px rgba(255, 209, 98, .22);

}


/* ==========================================================
   SHIP WINDOW
========================================================== */

.solar__ship-window {

    position: absolute;

    left: 50%;
    top: 20%;

    width: 30%;
    height: 25%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #72dfff;

    box-shadow:
        0 0 8px #72dfff;

}


/* ==========================================================
   SHIP LIGHT
========================================================== */

.solar__ship-light {

    position: absolute;

    left: 50%;
    bottom: 12%;

    width: 18%;
    height: 18%;

    transform:
        translateX(-50%);

    border-radius: 50%;

    background:
        #ffe277;

    box-shadow:
        0 0 9px #ffc42f;

}


/* ==========================================================
   SHIP WINGS
========================================================== */

.solar__ship-wing {

    position: absolute;

    top: 34%;

    width: 38%;
    height: 32%;

    border:
        1px solid #6d8491;

    background:

        repeating-linear-gradient(
            90deg,
            #152c3b 0 12%,
            #31536a 13% 24%
        );

}


.solar__ship-wing--left {

    right: 66%;

    transform:
        skewY(10deg);

}


.solar__ship-wing--right {

    left: 66%;

    transform:
        skewY(-10deg);

}


/* ==========================================================
   SHIP ENGINES
========================================================== */

.solar__ship-engine {

    position: absolute;

    bottom: 15%;

    width: 10%;
    height: 15%;

    border-radius: 50%;

    background:
        #65eaff;

    box-shadow:
        0 0 10px #52dfff;

}


.solar__ship-engine--left {
    left: 34%;
}


.solar__ship-engine--right {
    right: 34%;
}


/* ==========================================================
   DEBRIS
========================================================== */

.solar__debris {

    position: absolute;

    z-index: 16;

    background:

        linear-gradient(
            135deg,
            #7b7166,
            #302b2b
        );

    clip-path:
        polygon(
            14% 12%,
            69% 3%,
            96% 35%,
            79% 83%,
            41% 98%,
            7% 67%
        );

}


.solar__debris--1 {

    width: 4%;

    right: 28%;
    top: 20%;

}


.solar__debris--2 {

    width: 3%;

    right: 15%;
    top: 34%;

}


.solar__debris--3 {

    width: 5%;

    right: 43%;
    bottom: 28%;

}


.solar__debris--4 {

    width: 2%;

    right: 8%;
    bottom: 39%;

}


/* ==========================================================
   ENERGY PARTICLES
========================================================== */

.solar__particle {

    position: absolute;

    z-index: 17;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background:
        #ffe88c;

    box-shadow:
        0 0 10px rgba(255, 205, 71, .85);

}


.solar__particle--1 {

    right: 41%;
    top: 23%;

}


.solar__particle--2 {

    right: 21%;
    top: 53%;

}


.solar__particle--3 {

    right: 52%;
    bottom: 21%;

}


.solar__particle--4 {

    right: 13%;
    bottom: 22%;

}


/* ==========================================================
   FOREGROUND LIGHT
========================================================== */

.solar__foreground {

    position: absolute;

    z-index: 30;

    inset: 0;

    pointer-events: none;

    background:

        linear-gradient(
            90deg,
            rgba(255, 211, 83, .08),
            transparent 38%,
            transparent 100%
        );

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-aspect-ratio: 3 / 4) {

    .solar__sun {

        left: -25%;
        top: 28%;

        width: 68%;

    }


    .solar__corona--outer {

        left: -42%;
        top: 28%;

        width: 115%;

    }


    .solar__corona--middle {

        left: -31%;
        top: 28%;

        width: 90%;

    }


    .solar__corona--inner {

        left: -23%;
        top: 28%;

        width: 73%;

    }


    .solar__rays {

        left: -50%;
        top: 25%;

        width: 130%;
        height: 90%;

    }


    .solar__flare {

        left: 25%;

    }


    .solar__flare--1 {
        top: 20%;
    }


    .solar__flare--2 {
        top: 34%;
    }


    .solar__flare--3 {
        top: 27%;
    }


    .solar__flare--4 {
        top: 42%;
    }


    .solar__planet {

        right: -24%;
        bottom: -9%;

        width: 65%;

    }


    .solar__planet-ring {

        right: -15%;
        bottom: 12%;

        width: 90%;

    }


    .solar__ship {

        right: 18%;
        top: 45%;

        width: 24%;

    }


    .solar__debris--1 {

        right: 34%;
        top: 40%;

        width: 6%;

    }


    .solar__debris--2 {

        right: 8%;
        top: 48%;

        width: 5%;

    }


    .solar__debris--3 {

        right: 50%;
        bottom: 31%;

        width: 8%;

    }


    .solar__debris--4 {

        right: 9%;
        bottom: 36%;

        width: 4%;

    }

}