.planet {
  width: 260px;
  height: 260px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.planet > div {
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.planet.blue:after {
  background-color: #7470DE;
}
.planet.blue1:after {
  background-color: #CDC9F5;
}
.planet.red:after {
  background-color: #EA3F75;
}
.planet.red1:after {
  background-color: #FDC1D4;
}
.planet.green:after {
  background-color: #1BBF6D;
}
.planet.green1:after {
  background-color: #92EBBF;
}
.planet.yellow:after {
  background-color: #F4C037;
}
.planet.yellow1:after {
  background-color: #F8D67C;
}
.planet:after {
  content: "";
  width: 64%;
  height: 64%;
  border-radius: 50%;
}
.planet .shader {
  z-index: 1;
  background-image: url('../assets/planet-shading2.svg');
}
.planet .shader.two {
  background-image: url('../assets/planet-shading1.svg');
}
.planet .pattern {
  mask: url('../assets/planet-pattern1.svg');
  -webkit-mask: url('../assets/planet-pattern1.svg');
  mask-size: contain;
  -webkit-mask-size: contain;
}
.planet .pattern.two {
  mask-image: url('../assets/planet-pattern2.svg');
  -webkit-mask: url('../assets/planet-pattern2.svg');
  mask-size: contain;
  -webkit-mask-size: contain;
}
.planet .pattern.blue {
  background-color: #7470DE;
}
.planet .pattern.blue1 {
  background-color: #CDC9F5;
}
.planet .pattern.red {
  background-color: #EA3F75;
}
.planet .pattern.red1 {
  background-color: #FDC1D4;
}
.planet .pattern.green {
  background-color: #1BBF6D;
}
.planet .pattern.green1 {
  background-color: #92EBBF;
}
.planet .pattern.yellow {
  background-color: #F4C037;
}
.planet .pattern.yellow1 {
  background-color: #F8D67C;
}
.planet .arch {
  z-index: 3;
  mask: url('../assets/planet-arch-mask.svg');
  -webkit-mask: url('../assets/planet-arch-mask.svg') no-repeat;
  mask-size: contain;
  -webkit-mask-size: contain;
}
.planet .arch.blue {
  background-color: #7470DE;
}
.planet .arch.blue1 {
  background-color: #CDC9F5;
}
.planet .arch.red {
  background-color: #EA3F75;
}
.planet .arch.red1 {
  background-color: #FDC1D4;
}
.planet .arch.green {
  background-color: #1BBF6D;
}
.planet .arch.green1 {
  background-color: #92EBBF;
}
.planet .arch.yellow {
  background-color: #F4C037;
}
.planet .arch.yellow1 {
  background-color: #F8D67C;
}
.planet .arch-shadows {
  z-index: 2;
  background: url('../assets/planet-arch.svg') no-repeat;
  background-size: contain;
}