* {
  color-scheme: dark;
}

body {
    width: fit-content;
}

.solSyst {
  position: absolute;
  height: fit-content;
  width: fit-content;
  background-image: radial-gradient(
    circle at 13%,
    rgba(0, 0, 0, 0)18%,
    #fff,
    rgba(0, 0, 0, 0)18.2%,
    rgba(0, 0, 0, 0)22%,
    #fff,
    rgba(0, 0, 0, 0)22.2%,
    rgba(0, 0, 0, 0)28.5%,
    #fff,
    rgba(0, 0, 0, 0) 28.7%,
    rgba(0, 0, 0, 0)35%,
    #fff,
    rgba(0, 0, 0, 0)35.2%,
    rgba(0, 0, 0, 0) 50%,
    #fff,
    rgba(0, 0, 0, 0) 50.2%,
    rgba(0, 0, 0, 0) 67.5%,
    #fff,
    rgba(0, 0, 0, 0) 67.7%,
    rgba(0, 0, 0, 0) 83%,
    #fff,
    rgba(0, 0, 0, 0) 83.2%,
    rgba(0, 0, 0, 0) 93%,
    #fff,
    rgba(0, 0, 0, 0) 93.2%
  );
}

.solSyst {
  display: flex;
  justify-content: center;
  align-items: center;
}

.sun {
  height: 400px;
  padding: 10px 20px;
  border-radius: 100%;
  transition: all ease-in-out 0.2s;
  filter: drop-shadow(0 0 10vw rgb(255, 166, 0))
}

.obj {
  scale: 100%;
  transition: all ease-in-out 0.2s;
}
.obj:hover {
  scale: 110%;
}
.sun:hover {
  scale: 102%;
}

.merc {
  height: 50px;
}
.merc:hover {
  scale: 200%;
}

.ven {
  height: 75px;
}

.ear {
  height: 100px;
}

.mar {
  height: 85px;
}

.jup {
  height: 200px;
  margin-left: 50px;
}

.sat {
  height: 300px;
}

.ura {
  height: 150px;
}

.nep {
  height: 150px;
}


/* Media Queries */

@media screen and (max-width: 900px) {
  .sun {
    height: 200px;
  }
  
  .merc {
    height: 25px;
  }
  
  .ven {
    height: 37.5px;
  }
  
  .ear {
    height: 50px;
  }
  
  .mar {
    height: 42.5px;
  }
  
  .jup {
    height: 100px;
    margin-left: 0px;
  }
  
  .sat {
    height: 150px;
  }
  
  .ura {
    height: 75px;
  }
  
  .nep {
    height: 75px;
  }
  
  .solSyst {
    background-image: radial-gradient(
      circle at 50% 13%,
      rgba(0, 0, 0, 0)19%,
      #fff,
      rgba(0, 0, 0, 0)19.2%,
      rgba(0, 0, 0, 0)23%,
      #fff,
      rgba(0, 0, 0, 0)23.2%,
      rgba(0, 0, 0, 0)28.5%,
      #fff,
      rgba(0, 0, 0, 0) 28.7%,
      rgba(0, 0, 0, 0)36%,
      #fff,
      rgba(0, 0, 0, 0)36.2%,
      rgba(0, 0, 0, 0) 47.5%,
      #fff,
      rgba(0, 0, 0, 0) 47.7%,
      rgba(0, 0, 0, 0) 65.5%,
      #fff,
      rgba(0, 0, 0, 0) 65.7%,
      rgba(0, 0, 0, 0) 83%,
      #fff,
      rgba(0, 0, 0, 0) 83.2%,
      rgba(0, 0, 0, 0) 93%,
      #fff,
      rgba(0, 0, 0, 0) 93.2%
    );
  }
    
  .solSyst {
    display: grid;
    justify-items: center;
    align-items: center;
  }

}