.skills-container {
  text-align: center;
  pointer-events: none;
  user-select: none;
}

.skills-container .clickable {
  pointer-events: all;
}

.solar-system {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.selected-solar-system {
  top: 0% !important;
}

.not-selected-solar-system {
  transform: scale(0.0001) rotateX(75deg) !important;
}

.reduced-solar-system-transform {
  transform: scale(0.5) rotateX(75deg) !important;
}

.reduced-solar-system {
  height: 50%;
}

.solar-system:nth-of-type(2) {
  top: 50%
}

.galaxy {
  float: left;
  width: 100%;
  height: 100%;
  position: absolute;
  cursor: pointer;
}

.reduced-galaxy {
  left: 25%;
}

.reduced-galaxy-transform {
  transform: scale(0.01);
}

.reduced-galaxy:nth-of-type(2) {
  left: 75%
}

.galaxy-background {
  position: absolute;
  height: 100%;
  width: 100%;
  left: -25%;
}

.galaxy-background:nth-of-type(2) {
  left: 25%;
}

.galaxy-title {
  color: white;
  width: 50%;
  top: 25%;
  position: absolute;
  left: 0%;
}

.galaxy-title:nth-of-type(2) {
  left: 50%;
}

.galaxy-clicker-container {
  position: absolute;
  height: 100%;
  width: 100%;
  pointer-events: all;
  cursor: pointer;
}

.galaxy-clicker {
  position: relative;
  height: 100%;
  width: 50%;
  float: left;
}

.orbit {
  position: absolute;
  top: 50%;
  left: 50%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  transform-style: preserve-3d;
  animation-name: orbit;
  pointer-events: none;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

.moon-orbit {
  animation-name: suborbit; }

.pos {
  position: absolute;
  pointer-events: none;
  top: 50%;
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  transform-style: preserve-3d;
  animation-name: invert;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
}

.sun, .planet, .moon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1em;
  height: 1em;
  margin-top: -0.5em;
  margin-left: -0.5em;
  border-radius: 50%;
  transform-style: preserve-3d; 
}

.sun {
  background-color: #FB7209;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: all;
  box-shadow: 0 0 60px rgba(255, 160, 60, 0.4); 
}

.planet {
  pointer-events: all;
  background-color: #202020;
  background-repeat: no-repeat;
  background-size: cover;
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.ring {
  position: absolute;
  top: 25%;
  left: 25%;
  pointer-events: none;
  border-radius: 50%; 
}

.ring {
  width: 2em;
  height: 2em;
  margin-top: -1em;
  margin-left: -1em;
  border: 0.3em solid var(--ring-color);
  animation-iteration-count: infinite;
  animation-timing-function: linear; }

.ring:after {
  border-radius: 50%;
  position: absolute;
  content: '';
  top: 50%;
  left: 50%;
  width: 2.2em;
  height: 2.2em;
  margin-top: -1.1em;
  margin-left: -1.1em;
  border: 0.07em solid var(--inner-ring-color);
  box-sizing: border-box;
  box-sizing: border-box; }

#skill-navigation-title {
  top: 90%;
  position: absolute;
  display: flex;
  justify-content: center;
  width: 100%;
  color: white;
}

#skill-navigation-back {
  pointer-events: all;
  position: absolute;
  top: 20%;
  display: flex;
  z-index: 100;
  margin-left: 80px;
  color: white;
  cursor: pointer;
}

#skill-navigation-back .arrow {
  transform: rotate(90deg);
}

#skill-navigation-back .arrow span {
  display: block;
  width: 1.5vw;
  height: 1.5vw;
  border-bottom: 5px solid white;
  border-right: 5px solid white;
  transform: rotate(45deg);
  margin: -10px;
  animation: arrow-animation 2s infinite;
}

#skill-navigation-back .arrow span:nth-child(2) {
  animation-delay: -0.2s;
}

#skill-navigation-back .arrow span:nth-child(3) {
  animation-delay: -0.4s;
}

@keyframes arrow-animation {
  0% {
      opacity: 0;
      transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
      opacity: 1;
  }
  100% {
      opacity: 0;
      transform: rotate(45deg) translate(20px, 20px);
  }
}

/* --------------------------------------------------------------------------- animations */
@keyframes orbit {
  0% {
    transform: rotateZ(0deg); }

  100% {
    transform: rotateZ(-360deg); } }

@keyframes suborbit {
  0% {
    transform: rotateX(90deg) rotateZ(0deg); }

  100% {
    transform: rotateX(90deg) rotateZ(-360deg); } }

@keyframes invert {
  0% {
    transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg); }

  100% {
    transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg); } }

/* --------------------------------------------------------------------------- 3D view */
.view-3D.zoom-large .sun {
  transform-style: preserve-3d; }

.view-3D.zoom-large .orbit {
  transform-style: preserve-3d; }

.view-3D .solar-system {
  transform: rotateX(75deg); }

.view-3D .sun {
  transform: rotateX(-90deg); }

.view-3D .ring {
  transform: rotateX(90deg); }

.view-3D .planet,
.view-3D .moon {
  transform: rotateX(0deg); }

/* Ring */

.earth-skin {
    --ring-color: rgba(2, 60, 167, 0.7);
    --inner-ring-color: rgba(2, 60, 167, 0.5);
}

.planet1-skin {
  --ring-color: rgba(83, 90, 104, 0.7);
  --inner-ring-color: rgba(2, 60, 167, 0.5);
}

.planet2-skin {
  --ring-color: rgba(0, 90, 63, 0.7);
  --inner-ring-color: rgb(99, 122, 95, 0.5);
}

.planet3-skin {
  --ring-color: #ff730087;
  --inner-ring-color: rgb(108 117 134 / 50%);
}

.planet4-skin {
  --ring-color: #ff0000a6;
  --inner-ring-color: #fffb008a;
}

.mercury-skin {
    --ring-color: rgba(231,232,236, 0.7);
    --inner-ring-color: rgba(231,232,236, 0.5);
}

.venus-skin {
    --ring-color: rgba(248,226,176, 0.7);
    --inner-ring-color: rgba(248,226,176, 0.5);
}

.mars-skin {
    --ring-color: rgba(193,68,14, 0.7);
    --inner-ring-color: rgba(193,68,14, 0.5);
}

.jupiter-skin {
    --ring-color: rgba(227,220,203, 0.7);
    --inner-ring-color: rgba(227,220,203, 0.5);
}

.saturn-skin {
    --ring-color: rgba(160, 147, 130, 0.7);
    --inner-ring-color: rgba(160, 147, 130, 0.5);
}

.uranus-skin {
    --ring-color: rgba(198,211,227, 0.7);
    --inner-ring-color: rgba(198,211,227, 0.5);
}

.neptune-skin {
    --ring-color: rgba(133,173,219, 0.7);
    --inner-ring-color: rgba(133,173,219, 0.5);
}

.moon {font-size: var(--planet-size);}

.pos, .planet, .orbit {
    animation-duration: var(--animation-duration)
}

/* --------------------------------------------------------------------------- planets sizes */
/* --------------------------------------------------------------------------- stretched sizes */
.sun {
    --planet-size: 24px;
    font-size: var(--planet-size);
}

.planet {
  --nb-projects: '0';
  font-size: var(--planet-size)
}

dl.infos dd span:after {
  content: 'Used in ' var(--nb-projects) ' projects';
}

dl.infos dd:after {
  content: ""; 
  background-size: contain;
  background-repeat: no-repeat;
  height: 50px;
}

.stars-5-image:after {
  background-image: url('../images/skills/5stars.png');
}

.stars-4-image:after {
  background-image: url('../images/skills/4stars.png');
}

.stars-3-image:after {
  background-image: url('../images/skills/3stars.png');
}

.stars-2-image:after {
  background-image: url('../images/skills/2stars.png');
}

/* --------------------------------------------------------------------------- stretched orbits */

.orbit {
    width: var(--orbit-size);
    height: var(--orbit-size);
    margin-top: var(--orbit-margin);
    margin-left: var(--orbit-margin); 
}

/* --------------------------------------------------------------------------- planets starting position and lighting effect */
/* --------------------------------------------------------------------------- mercury ; pos: Top */
.mercury .pos {
  left: 50%;
  top: -1%; }

.mercury .planet {
  animation-name: shadow-mercury; }

@keyframes shadow-mercury {
  0% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  25% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  50% {
    box-shadow: inset 13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50.01% {
    box-shadow: inset -13px -5px 4px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  100% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ } }

.scaled.view-3D .mercury .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- venus ; pos: Left */
.venus .pos {
  left: 0;
  top: 50%; }

.venus .planet {
  animation-name: shadow-venus; }

@keyframes shadow-venus {
  0% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.5% {
    box-shadow: inset -22px -20px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  75% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  100% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }

.scaled.view-3D .venus .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- earth ; pos: Right */
.earth .pos {
  left: 100%;
  top: 50%; }

.earth .planet {
  animation-name: shadow-earth; }

@keyframes shadow-earth {
  0% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  25% {
    box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  50% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  75% {
    box-shadow: inset 24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75.01% {
    box-shadow: inset -24px -20px 15px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }

.scaled.view-3D .earth .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- moon */
.moon-orbit .pos {
  left: 100%;
  top: 50%; }

/* --------------------------------------------------------------------------- mars ; pos: Bottom */
.mars .pos {
  left: 50%;
  top: 100%; }

.mars .planet {
  animation-name: shadow-mars; }

@keyframes shadow-mars {
  0% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25% {
    box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  50% {
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  75% {
    box-shadow: inset 4px 0 2px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  99.99% {
    box-shadow: inset 18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -18px -10px 10px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ } }

.scaled.view-3D .mars .planet {
  box-shadow: inset -4px 0 2px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- jupiter ; pos: Right */
.jupiter .pos {
  left: 100%;
  top: 50%; }

.jupiter .planet {
  animation-name: shadow-jupiter; }

@keyframes shadow-jupiter {
  0% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  25% {
    box-shadow: inset 0 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  50% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  75% {
    box-shadow: inset 94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  100% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ } }

.scaled.view-3D .jupiter .planet {
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- saturn ; pos: Left */
.saturn .pos {
  left: 0%;
  top: 50%; }

.saturn .planet {
  animation-name: shadow-saturn; }

@keyframes shadow-saturn {
  0% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 80px -30px 50px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.01% {
    box-shadow: inset -94px -30px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  75% {
    box-shadow: inset -2px 3px 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  100% {
    box-shadow: inset 16px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }

.scaled.view-3D .saturn .planet {
  box-shadow: inset -16px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- saturn ring */
/*

.saturn .ring           { animation-name:     shadow-saturn-ring; }

@keyframes 
shadow-saturn-ring{ 0%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45); opacity: .4; }
                  25%    { box-shadow: inset -5px   -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  25.01% { box-shadow: inset 5px    -30px   12px  rgba(20, 40, 50, 0.3);  opacity: 1; }
                  50%    { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                  75%    { box-shadow: inset 0      30px  50px  rgba(20, 40, 50, 0);  opacity: .3; }
                  100%   { box-shadow: inset -16px  0      4px   rgba(20, 40, 50, 0.45);  opacity: .4; }
                }

.scaled.view-2D .saturn .ring,
.scaled.view-3D .saturn .ring { box-shadow: inset 16px   0      4px   rgba(20, 40, 50, 0.6); }

*/
/* --------------------------------------------------------------------------- uranus ; pos: Left */
.uranus .pos {
  left: 0;
  top: 50%; }

.uranus .planet {
  animation-name: shadow-uranus; }

@keyframes shadow-uranus {
  0% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  25% {
    box-shadow: inset 40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  25.01% {
    box-shadow: inset -40px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50% {
    box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  75% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  100% {
    box-shadow: inset 8px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ } }

.scaled.view-3D .uranus .planet {
  box-shadow: inset -8px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- neptune ; pos: Top */
.neptune .pos {
  left: 50%;
  top: 0; }

.neptune .planet {
  animation-name: shadow-neptune; }

@keyframes shadow-neptune {
  0% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ }

  25% {
    box-shadow: inset 12px 0 5px rgba(0, 0, 0, 0.5);
    /* LEFT */ }

  50% {
    box-shadow: inset 50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  50.01% {
    box-shadow: inset -50px -15px 40px rgba(0, 0, 0, 0.5);
    /* BOTTOM */ }

  75% {
    box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
    /* RIGHT */ }

  100% {
    box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.5);
    /* TOP */ } }

.scaled.view-3D .neptune .planet {
  box-shadow: inset -12px 0 5px rgba(0, 0, 0, 0.5);
  /* RIGHT */ }

/* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { animation-duration: 20s!important; }

/* */
/* --------------------------------------------------------------------------- navigation styles */
dl.infos {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: 0;
  width: 100%;
  height: 100%;
  margin-top: -90%;
  margin-left: 90%;
  padding-left: 100%;
  transform-origin: 100% 100%;
  transform-style: preserve-3d;
  transform: rotateX(90deg); }

dl.infos:before {
  position: absolute;
  content: '';
  width: 15px;
  height: 30px;
  left: 15px;
  bottom: 0;
  border-top: 1px solid white;
  border-left: 1px solid white;
  transform-style: preserve-3d;
  transform: skew(-45deg, 0deg);
  box-shadow: inset 1px 1px black; }

.sun dl.infos dt {
  margin-bottom: 0px;
  bottom: 15px;
}

dl.infos dt {
  text-align: left;
  position: absolute;
  pointer-events: none;
  left: 50px;
  margin-bottom: 26px;
  width: 1000px;
  bottom: 30px;
  color: #FFF;
  font-size: 30px;
  text-shadow: 1px 1px 2px black; }

dl.infos dd:after {
  position: absolute;
  left: 40px;
  bottom: 15px;
  width: 300px;
  color: #FFF;
  font-size: 22px;
  text-shadow: 1px 1px 2px black; }

dl.infos dd span:after {
  position: absolute;
  left: 50px;
  bottom: 4px;
  width: 300px;
  color: #FFF;
  font-size: 17px;
  text-align: left;
  text-shadow: 1px 1px 2px black; }

.informations-on-planet:hover .infos {
  display: block;
  text-align: left;
  opacity: 1;
  transform: rotateX(0deg); 
}

.sun.informations-on-planet .infos {
  display: block;
  text-align: left;
  opacity: 1;
  transform: rotateX(0deg); 
}

.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit,
.planet-container .planet-container.orbit {
  border: 1px solid rgba(255, 255, 255, 0.8); }


/* --------------------------------------------------------------------------- transitions */
.pos {
  transition-property: top, left; }

.solar-system, .orbit,
.planet,
.satelite,
.ring {
  transition-property: width, height, top, left, margin-left, margin-top, webkit-transform; }

.sun, .icon {
  transition-property: width, height, webkit-transform; }

.solar-system,
.sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
  transition-duration: .8s;
  transition-timing-function: ease-in-out; }

.solar-system,
.sun,
.planet,
.satelite,
.ring {
  transition-delay: 0s; }

.pos {
  transition-delay: 1s; } 

/* --------------------------------------------------------------------------- images */
.skills-container {background: url("../images/skills/universe.png");}
.sun {background-image: url("../images/skills/sun.png");}
.mercury-skin .planet {background-image: url("../images/skills/mercury.png");}
.venus-skin .planet {background-image: url("../images/skills/venus.png");}
.earth-skin .planet {background-image: url("../images/skills/earth.png");}
.mars-skin .planet {background-image: url("../images/skills/mars.png");}
.jupiter-skin .planet {background-image: url("../images/skills/jupiter.png");}
.saturn-skin .planet {background-image: url("../images/skills/saturn.png");}
.uranus-skin .planet {background-image: url("../images/skills/uranus.png");}
.neptune-skin .planet {background-image: url("../images/skills/neptune.png");}
.planet1-skin .planet {background-image: url("../images/skills/planet1.png");}
.planet2-skin .planet {background-image: url("../images/skills/planet2.png");}
.planet3-skin .planet {background-image: url("../images/skills/planet3.png");}
.planet4-skin .planet {background-image: url("../images/skills/planet4.png");}

.moon {
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
}

.moon-type-1 {
  background-image: url("../images/skills/moon1.png");
}

.moon-type-2 {
  background-image: url("../images/skills/moon2.png");
}

.moon-type-3 {
  background-image: url("../images/skills/moon3.png");
}

/* Planet cards */

.planet-cards {
  position: absolute;
  width: 100%;
  top: 15%;
  min-height: 50%;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  user-select: all;
  z-index: 15;
  transform: translate3d(0px, 0px, 10000px);
}

.planet-card {
  background: rgba(1,1,1,0.8);
  width: fit-content;
  padding: 15px;
  margin: 30px;
  color:white;
}

.planet-card h1 {
  font-weight: bold;
  font-size: min(2.5vw, 3vh);
  text-align: center;
  margin-bottom: 0px;
}

.planet-card h2 {
  margin-top: 0px;
  text-align: right;
}

.planet-card p {
  font-size: max(min(15vw, 2vh), 14px);
  margin-bottom: 5px;
  text-align: left;
}

.planet-card p a {
  pointer-events: all;
}

.planet-card .other-skills {
  text-decoration: underline;
  margin-bottom: 0px;
}

/* Navigation Animations */
.zoomed-in-planet {
  transform: scale(10) translateY(1em) !important;
}

.lifted-solar-system {
  transform: translateY(-15em) rotateX(75deg) !important;
}