<body>

<div class="flex-container">
<div class="main">
  <div class="outer_frame">
    <div class="wrapper_container">
      <div class="wrapper">
        <div class="space">
          <div class="jup">
            <div class="jup_highlight"></div>
            <div class="spot"></div>
          </div>
          <div class="moon"></div>
        </div>
        <div class="wormhole"></div>

        <div class="comet"><div class="trailer"></div></div>
        <div class="comet comet_short"><div class="trailer"></div></div>
        <div class="comet comet_med"><div class="trailer"></div></div>
      </div>  
    </div>
    </div>
  </div>
</div>
</body>
:root {
  --Black: #000;
  --White: #f0e4e4;
  --Yellow: #ffd700;
  --Red: #ff0000f2;
 --DarkRed: #a42624;
   --PurpleAccent: #9C27B0;
}

* {
    padding: 0;
    margin: 0;
}

.flex-container > div {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
  background: linear-gradient(to right, rgb(15 20 47 / 92%) 99%, rgb(117 51 233 / 79%));
  justify-content: center;
  align-items: center; 
  position: absolute;
  border: 0px darkblue solid;
  overflow: hidden;
}


.main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow: hidden;
}

.wrapper_container {
  width: 900px;
  height: 400px;
  display: flex;
  align-items: center; 
}

.wrapper{
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  overflow: hidden;
}

.space {
  width: 900px;
  height: 450px;
  display: flex;
  justify-content: center;
  border-radius: 50%;
}


.jup{
  width: 400px;
  height: 400px;
  transform: rotate(90deg);
  border-radius: 50%;
  margin-top: 48px;
  background: linear-gradient(to left,
   rgb(255 215 0 / 38%),
    #ffa5007d, rgb(255 0 0 / 26%),
    rgb(255 0 167 / 34%),
     #ffa5007d,
     rgb(255 215 0 / 38%));
  filter: drop-shadow(-2px 2px 8px #FF5722);
  position: absolute;
  z-index: 1;
}

.jup_highlight{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  transform: rotate(90deg);
    background: linear-gradient(to right,
    var(--White) 20%,
   #fff0);
    opacity: 0.7;
     position: absolute;
}

.spot {
  width: 80px;
  height: 100px;
  transform: rotate(3deg);
  border-radius: 50%;
  margin-top: 206px;
  margin-left: 218px;
  background: linear-gradient(to left,
   var(--DarkRed),
    #ffa5007d,
      rgb(255 0 167 / 34%));
  filter: drop-shadow(-2px 2px 13px var(--Red));
  filter: blur(9px);
  position: relative;
}

.moon {
  width: 160px;
  height: 160px;
  transform: rotate(90deg);
  border-radius: 50%;
  margin-left: 535px;
  background: linear-gradient( var(--White),  rgba(255, 215, 0, 0.38), #e9ff7c00);
 
  filter: drop-shadow(-2px 2px 8px #e9ff7c);
  position: relative;
  z-index: 4;
  
}

.wormhole {
  border-radius: 50%;
  position: absolute;  
  background:  linear-gradient( #00abfff2, rgba(62, 49, 208, 0.38), #2c5e93f2);
  width: 42px;
  height: 242px;
  border-radius: 50%;
  position: absolute;
  border: 4px solid #1d5e4e;
  transform: skew(4deg);
}

.comet{
  width: 150px;
  height: 10px;
  background: var(--White);
  margin-bottom: 20px;
  position: absolute;
  filter: blur(2px);
  border-bottom-style: solid;
  border-right:10px solid var(--PurpleAccent);
  border-bottom-right-radius: 20%;
  border-top-right-radius: 20%;
  border-bottom-color: var(--PurpleAccent);

  display: flex;
  justify-content: flex-end;
}
.comet_short{
  width: 100px;
  margin-bottom: -16px;
}

.comet_med{
  width: 120px;
  margin-bottom: -46px;
}

.trailer {
  width: 34px;
  height: 10px;
  background: purple;
  filter: blur(2px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.