.scene
  .light
    .shadow 
  .window
    .sky
      - for (var x=0; x<50; x++)
        .star
    .gray-clouds
      - for (var x=0; x<3; x++)
        .cloud
    .white-clouds
      - for (var x=0; x<8; x++)
        .cloud
    .helmet-wrapper
      .helmet
        .additions
    .glass

body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow: hidden;
  background: radial-gradient(circle, #2c1f5f 300px, #0e0b29); 
}

.scene {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  
  transition: transform 400ms;
  @media (max-width: 680px) {
    transform: scale(0.5);
  }
}

.window {
  position: absolute;
  width: 460px;
  height: 460px;
  border: 20px solid #2c1f5f;
  border-radius: 50%;
  background-color: #d7e8ff;
  overflow: hidden;
  .glass {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;

    &::after {
      content: "";
      position: absolute;
      border-top: 5px solid #2c1f5f;
      border-bottom: 5px solid #2c1f5f;
      width: 100%;
      height: 180px;
    }

    &::before {
      content: "";
      position: absolute;
      border-left: 5px solid #2c1f5f;
      border-right: 5px solid #2c1f5f;
      width: 180px;
      height: 100%;
    }
  }
}

.light {
  position: absolute;
  width: 580px;
  height: 600px;
  border-radius: 50%;
  background: linear-gradient(#2c1f5f 40%, #524eb0);
  overflow: hidden;
}

.shadow {
  &::after {
    content: "";
    position: absolute;
    bottom: -70px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg);
    border-top: 8px solid #342b76;
    border-right: 8px solid #342b76;
    width: 200px;
    height: 200px;
  }
  &::before {
    content: "";
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) rotate(-45deg) skew(15deg, 15deg);
    border-top: 8px solid #332772;
    border-right: 8px solid #332772;
    width: 300px;
    height: 300px;
  }
}

.sky {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #92ace4;
  background: radial-gradient(
    circle at center 120%,
    #94aee4 0%,
    #6e79d6 35%,
    #4042ad 60%,
    #221849 100%
  );
  &::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 110%;
    top: 50%;
    transform: translatey(-50%);
    border-radius: 50%;
    box-shadow: inset 15px 0px 24px 6px rgba(72, 148, 247, 0.8),
      inset -15px 0px 24px 6px rgba(72, 148, 247, 0.8);
  }
  &::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 150px;
    bottom: 0;
    background: linear-gradient(to top, #d7c9e9 50%, transparent 100%);
  }
}

$count: 50;
.star {
  position: absolute;
  background-color: #e0b3ff;
  border-radius: 50%;

  @for $i from 1 to $count {
    &:nth-child(#{$i}) {
      $size: random(2 - 1) + 1 + px;
      $glow: random(15 - 2) + 2;

      top: floor(abs(random() - random()) * (1 + 70 - 1) + 1) + 1%;
      left: random(100) + 1%;
      opacity: random((0.9 - 0.2) * 10) / 10 + 0.2;
      height: $size;
      width: $size;
      box-shadow: 0 0 ($glow + px) #4f4aaa, 0 0 ($glow + px) #fff;

      @if $i == $count / 2 {
        opacity: 1;
        width: 4px;
        height: 4px;
        background: #fff;
        box-shadow: 0 0 10px #4f4aaa, 0 0 10px rgba(#fff, 1);

        &::before,
        &::after {
          content: "";
          position: absolute;
          top: 50%;
          left: 50%;
          background: radial-gradient(#fff 50%, transparent);
          border-radius: 50%;
          opacity: 0.2;
          transform: translateX(-50%) translateY(-50%);
        }

        &::before {
          width: 2px;
          height: 40px;
        }
        &::after {
          height: 2px;
          width: 20px;
        }
      }
    }
  }
}

.white-clouds, .gray-clouds {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 140px;
  .cloud {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    &::before,
    &::after {
      content: "";
      position: absolute;
      border-radius: 50%;
    }
  }
}

.white-clouds {
  .cloud {
    background: #f1edf9;
    &::before,
    &::after {
      background: #f1edf9;
    }

    &:nth-child(1) {
      left: 25%;
      bottom: -5%;
      width: 70px;
      height: 70px;
      &::before {
        bottom: 50%;
        right: 120%;
        width: 60px;
        height: 60px;
      }
      &::after {
        top: 10%;
        right: 50%;
        width: 90px;
        height: 90px;
      }
    }

    &:nth-child(2) {
      left: 45%;
      bottom: 40%;
      width: 30px;
      height: 30px;
      &::before {
        top: 40%;
        left: 60%;
        width: 20px;
        height: 20px;
      }
      &::after {
        top: 50%;
        right: 60%;
        width: 20px;
        height: 20px;
      }
    }

    &:nth-child(3) {
      left: 43%;
      bottom: 5%;
      width: 50px;
      height: 50px;
      &::before {
        top: -10%;
        left: 65%;
        width: 30px;
        height: 30px;
      }
      &::after {
        top: 0%;
        right: 65%;
        width: 30px;
        height: 30px;
      }
    }

    &:nth-child(4) {
      left: 54%;
      bottom: 10%;
      width: 30px;
      height: 30px;
      &::before {
        left: 54%;
        bottom: -60%;
        width: 50px;
        height: 50px;
      }
      &::after {
        left: 150%;
        bottom: -50%;
        width: 40px;
        height: 40px;
      }
    }

    &:nth-child(5) {
      left: 70%;
      bottom: 10%;
      width: 30px;
      height: 30px;
      &::after {
        bottom: 90%;
        right: 10%;
        width: 15px;
        height: 15px;
      }
      &::before {
        bottom: 110%;
        right: -20%;
        width: 20px;
        height: 20px;
      }
    }

    &:nth-child(6) {
      left: 75%;
      bottom: 15%;
      width: 30px;
      height: 30px;
      &::before {
        left: 20%;
        bottom: 45%;
        width: 50px;
        height: 50px;
      }
      &::after {
        left: 140%;
        bottom: 130%;
        width: 30px;
        height: 30px;
      }
    }

    &:nth-child(7) {
      left: 35%;
      bottom: -5%;
      width: 50px;
      height: 50px;
      &::before {
        left: 130%;
        bottom: 0%;
        width: 50px;
        height: 50px;
      }
      &::after {
        left: 80%;
        bottom: 0%;
        width: 40px;
        height: 40px;
      }
    }

    &:nth-child(8) {
      left: 20%;
      bottom: 30%;
      width: 30px;
      height: 30px;
    }
  }
}

.gray-clouds {
  .cloud {
    background: #e3d3ee;
    &::before,
    &::after {
      background: #e3d3ee;
    }

    &:nth-child(1) {
      bottom: 30%; left: 25%;
      height: 50px; width: 50px;
      &::after {
        top: 10%; right: 60%;
        height: 50px; width: 50px;
      }
      &::before {
        top: 40%; left: 50%;
        height: 50px; width: 50px;
      }
    }
    
    &:nth-child(2) {
      bottom: 30%; left: 60%;
      height: 40px; width: 40px;
      &::after {
        top: 40%; right: 70%;
        height: 20px; width: 20px;
      }
      &::before {
        top: 40%; left: 60%;
        height: 30px; width: 30px;
      }
    }
    
    &:nth-child(3) {
      bottom: 30%; left: 60%;
      height: 40px; width: 40px;
      &::after {
        top: 70%; right: 85%;
        height: 30px; width: 30px;
      }
      &::before {
        top: 50%; left: 85%;
        height: 30px; width: 30px;
      }
    }
  }
}

// Used for animation
.helmet-wrapper {
  position: absolute;
  top: calc(50% - 100px); left: calc(50% - 150px);
  width: 300px; height: 500px;
  animation: rotate 40s linear infinite;
}

.helmet {
  position: absolute;
  top: 0;
  width: 100px; height: 100px;
  animation: rotate 20s linear reverse infinite;
  transform-origin: top;
  &::before {
    // Part 4
    content: "";
    position: absolute;
    top: 5px; right: 50px;
    width: 90px; height: 90px;
    border-radius: 50%;
    box-shadow: inset 2px 0px 5px 1px #daedff;
    background: linear-gradient(-5deg, #fff, #fff 20%, rgba(72, 148, 247, 0.8) 40%);
    opacity: 0.6;
  }
  &::after {
    // Part 2
    content: "";
    position: absolute;
    width: 70px; height: 85px;
    background: #271a51;
    border-top-right-radius: 80%;
    border-bottom-right-radius: 2%;
  }
  
  .additions {
    // Part 1
    position: absolute;
    bottom: 0; left: -20px;
    width: 80px; height: 20px;
    background: #271a51;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
    &::before {
      // Part 3
      content: "";
      position: absolute;
      bottom: 80px; left: 0px;
      width: 80px; height: 20px;
      background: linear-gradient(to right, #271a51 0px, #271a51 25px, transparent 25px);
      border-top-left-radius: 50%;
      border-bottom-left-radius: 20px;
    }
    &::after {
      // Part 5
      content: "";
      position: absolute;
      bottom: 0px; right: 52px;
      width: 40px; height: 80px;
      border: 10px solid transparent;
      border-right: 10px solid #271a51;
      border-radius: 50%;
    }
  }
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}