Webleb - HTML UI Elements -

Abrir no Editor Publique Seu Código

Recomendado

28 March 2025

Um código por mcdonge13

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
  <link rel="stylesheet" href="style.css">
  <title>Andev Web</title>
</head>
<body>
  <h1 class='logo'>
    Solar explorer
    <span>in only CSS</span>
  </h1>
  <input class='planet9' id='pluto' type='radio' name='planet'>
  <label class='menu pluto' for='pluto'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Pluto
      </h2>
      <h3>39.5 AU</h3>
    </div>
  </label>
  <input class='planet8' id='neptune' type='radio' name='planet'>
  <label class='menu neptune' for='neptune'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Neptune
      </h2>
      <h3>30.06 AU</h3>
    </div>
  </label>
  <input class='planet7' id='uranus' type='radio' name='planet'>
  <label class='menu uranus' for='uranus'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Uranus
      </h2>
      <h3>19.18 AU</h3>
    </div>
  </label>
  <input class='planet6' id='saturn' type='radio' name='planet'>
  <label class='menu saturn' for='saturn'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Saturn
      </h2>
      <h3>9.539 AU</h3>
    </div>
  </label>
  <input class='planet5' id='jupiter' type='radio' name='planet'>
  <label class='jupiter menu' for='jupiter'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Jupiter
      </h2>
      <h3>5.203 AU</h3>
    </div>
  </label>
  <input class='planet4' id='mars' type='radio' name='planet' checked='checked'>
  <label class='mars menu' for='mars'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Mars
      </h2>
      <h3>1.524 AU</h3>
    </div>
  </label>
  <input class='planet3' id='earth' type='radio' name='planet' checked='checked'>
  <label class='earth menu' for='earth'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Earth
      </h2>
      <h3>1 AU</h3>
    </div>
  </label>
  <input class='planet2' id='venus' type='radio' name='planet' checked='checked'>
  <label class='menu venus' for='venus'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Venus
      </h2>
      <h3>0.723 AU</h3>
    </div>
  </label>
  <input class='planet1' id='mercury' type='radio' name='planet' checked='checked'>
  <label class='menu mercury' for='mercury'>
    <div class='preview'></div>
    <div class='info'>
      <h2>
        <div class='pip'></div>
        Mercury
      </h2>
      <h3>0.39 AU</h3>
    </div>
  </label>
  <div class='solar'>
    <div class='solar_systm'>
      <div class='mercury planet'>
        <div class='mercury planet_description'>
          <h2>Planet</h2>
          <h1>Mercury</h1>
          <p>The closest planet to the sun. It circles the sun faster than all the other planets, which is why Romans named it after their swift-footed messenger god.</p>
          <label for='readMercury'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='planet venus'>
        <div class='planet_description venus'>
          <h2>Planet</h2>
          <h1>Venus</h1>
          <p>Named for the Roman goddess of love and beauty. In ancient times, Venus was often thought to be two different stars, the evening star and the morning star.</p>
          <label for='readVenus'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='earth planet'>
        <div class='moon moon'>
          <h3>Moon</h3>
          <h2>Moon</h2>
        </div>
        <div class='m trajectory'></div>
        <div class='earth planet_description'>
          <h2>Planet</h2>
          <h1>Earth</h1>
          <p>Earth, our home. It is the only planet known to have an atmosphere containing free oxygen, oceans of liquid water on its surface, and, of course, life.</p>
          <label for='readEarth'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='mars planet'>
        <div class='deimos moon'>
          <h3>Moon</h3>
          <h2>Deimos</h2>
        </div>
        <div class='d trajectory'></div>
        <div class='moon phoebos'>
          <h3>Moon</h3>
          <h2>Phoebos</h2>
        </div>
        <div class='p trajectory'></div>
        <div class='mars planet_description'>
          <h2>Planet</h2>
          <h1>Mars</h1>
          <p>Fourth planet from the Sun and the second smallest planet in the solar systm. Named after the Roman god of war often described as the “Red Planet”.</p>
          <label for='readMars'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='jupiter planet'>
        <div class='lo moon'>
          <h3>Moon</h3>
          <h2>Io</h2>
        </div>
        <div class='europa moon'>
          <h3>Moon</h3>
          <h2>Europa</h2>
        </div>
        <div class='ganymede moon'>
          <h3>Moon</h3>
          <h2>Ganymede</h2>
        </div>
        <div class='lop trajectory'></div>
        <div class='eu trajectory'></div>
        <div class='ga trajectory'></div>
        <div class='jupiter planet_description'>
          <h2>Planet</h2>
          <h1>Jupiter</h1>
          <p>Jupiter is the largest planet in the solar systm. Fittingly, it was named after the king of the gods in Roman mythology. </p>
          <label for='readJupiter'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='planet saturn'>
        <div class='moon titan'>
          <h3>Moon</h3>
          <h2>Titan</h2>
        </div>
        <div class='dione moon'>
          <h3>Moon</h3>
          <h2>Dione</h2>
        </div>
        <div class='enceladus moon'>
          <h3>Moon</h3>
          <h2>Enceladus</h2>
        </div>
        <div class='ti trajectory'></div>
        <div class='di trajectory'></div>
        <div class='enc trajectory'></div>
        <div class='planet_description saturn'>
          <h2>Planet</h2>
          <h1>Saturn</h1>
          <p>Saturn is the sixth planet from the sun and the second largest planet in the solar systm. Saturn was the Roman name for Cronus, the lord of the Titans.</p>
          <label for='readSaturn'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='planet uranus'>
        <div class='miranda moon'>
          <h3>Moon</h3>
          <h2>Miranda</h2>
        </div>
        <div class='ariel moon'>
          <h3>Moon</h3>
          <h2>Ariel</h2>
        </div>
        <div class='moon umbriel'>
          <h3>Moon</h3>
          <h2>Umbriel</h2>
        </div>
        <div class='mir trajectory'></div>
        <div class='ari trajectory'></div>
        <div class='trajectory umb'></div>
        <div class='planet_description uranus'>
          <h2>Planet</h2>
          <h1>Uranus</h1>
          <p>The first planet to be discovered by scientists. The planet is notable for its dramatic tilt, which causes its axis to point nearly directly at the sun.</p>
          <label for='readUranus'>
            <a>
              Read Mor
              <span>e</span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='neptune planet'>
        <div class='moon triton'>
          <h3>Moon</h3>
          <h2>Triton</h2>
        </div>
        <div class='moon proteus'>
          <h3>Moon</h3>
          <h2>Proteus</h2>
        </div>
        <div class='moon nereid'>
          <h3>Moon</h3>
          <h2>Nereid</h2>
        </div>
        <div class='trajectory tri'></div>
        <div class='pro trajectory'></div>
        <div class='ner trajectory'></div>
        <div class='neptune planet_description'>
          <h2>Planet</h2>
          <h1>Neptune</h1>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
          <label for='readNeptune'>
            <a>
              Read Mor
              <span>e     </span>
            </a>
          </label>
        </div>
        <div class='overlay'></div>
      </div>
    </div>
    <div class='solar_systm'>
      <div class='planet pluto'>
        <div class='planet_description pluto'>
          <h2>Dwarf planet</h2>
          <h1>Pluto</h1>
          <p>Pluto, once considered the ninth and most distant planet from the sun, is now the largest known dwarf planet in the solar systm.</p>
          <label for='readPluto'>
            <a>
              Read Mor
              <span>e     </span>
            </a>
          </label>
        </div>
        <div class='overlay'>               </div>
      </div>
    </div>
  </div>
  <input class='read' id='readMercury' type='radio' name='mercuryRead'>
  <label class='closeBig' for='closeMercury'></label>
  <input class='read' id='closeMercury' type='radio' name='mercuryRead'>
  <div class='panel'>
    <h1>Mercury</h1>
    <p>Mercury is the closest planet to the sun. As such, it circles the sun faster than all the other planets, which is why Romans named it after their swift-footed messenger god.</p>
    <p>The Sumerians also knew of Mercury since at least 5,000 years ago. It was often associated with Nabu, the god of writing. Mercury was also given separate names for its appearance as both a morning star and as an evening star. Greek astronomers knew, however, that the two names referred to the same body, and Heraclitus, around 500 B.C., correctly thought that both Mercury and Venus orbited the sun, not Earth.</p>
    <img src='https://i2.wp.com/www.astronomytrek.com/wp-content/uploads/2012/11/mercury-1.jpg?fit=678%2C381&ssl=1'>
    <h2>A year on Mercury is just 88 days long.</h2>
    <p>One solar day (the time from noon to noon on the planet’s surface) on Mercury lasts the equivalent of 176 Earth days while the sidereal day (the time for 1 rotation in relation to a fixed point) lasts 59 Earth days. Mercury is nearly tidally locked to the Sun and over time this has slowed the rotation of the planet to almost match its orbit around the Sun. Mercury also has the highest orbital eccentricity of all the planets with its distance from the Sun ranging from 46 to 70 million km.</p>
    <h2>Mercury is the smallest planet in the Solar Systm.</h2>
    <p>One of five planets visible with the naked eye a, Mercury is just 4,879 Kilometres across its equator, compared with 12,742 Kilometres for the Earth.</p>
    <h2>Mercury is the second densest planet. </h2>
    <p>Even though the planet is small, Mercury is very dense. Each cubic centimetre has a density of 5.4 grams, with only the Earth having a higher density. This is largely due to Mercury being composed mainly of heavy metals and rock.</p>
    <h2>Mercury has wrinkles.</h2>
    <p>As the iron core of the planet cooled and contracted, the surface of the planet became wrinkled. Scientist have named these wrinkles, Lobate Scarps. These Scarps can be up to a mile high and hundreds of miles long.</p>
    <br>
  </div>
  <input class='read' id='readVenus' type='radio' name='venusRead'>
  <label class='closeBig' for='closeVenus'></label>
  <input class='read' id='closeVenus' type='radio' name='venusRead'>
  <div class='panel'>
    <h1>Venus</h1>
    <p>Venus, the second planet from the sun, is named for the Roman goddess of love and beauty. The planet — the only planet named after a female — may have been named for the most beautiful deity of her pantheon because it shone the brightest of the five planets known to ancient astronomers.</p>
    <p>In ancient times, Venus was often thought to be two different stars, the evening star and the morning star — that is, the ones that first appeared at sunset and sunrise. In Latin, they were respectively known as Vesper and Lucifer. In Christian times, Lucifer, or "light-bringer," became known as the name of Satan before his fall. However, further observations of Venus in the space age show a very hellish environment. This makes Venus a very difficult planet to observe from up close, because spacecraft do not survive long on its surface.</p>
    <img src='https://3c1703fe8d.site.internapcdn.net/newman/gfx/news/hires/2014/2-whatistheave.jpg'>
    <h2>A day on Venus lasts longer than a year. </h2>
    <p>It takes 243 Earth days to rotate once on its axis (sidereal day). The planet’s orbit around the Sun takes 225 Earth days, compared to the Earth’s 365. A day on the surface of Venus (solar day) takes 117 Earth days.</p>
    <h2>Venus rotates in the opposite direction to most other planets. </h2>
    <p>This means that Venus is rotating in the opposite direction to the Sun, this is also know as a retrograde rotation. A possible reason might be a collision in the past with an asteroid or other object that caused the planet to alter its rotational path. It also differs from most other planets in our solar systm by having no natural satellites.</p>
    <h2>Venus is the second brightest object in the night sky. </h2>
    <p>Only the Moon is brighter. With a magnitude of between -3.8 to -4.6 Venus is so bright it can be seen during daytime on a clear day.</p>
    <h2>Atmospheric pressure on Venus is 92 times greater than the Earth’s. </h2>
    <p>While its size and mass are similar to Earth, the small asteroids are crushed when entering its atmosphere, meaning no small craters lie on the surface of the planet. The pressure felt by a human on the surface would be equivalent to that experienced deep beneath the sea on Earth.</p>
    <br>
  </div>
  <input class='read' id='readEarth' type='radio' name='earthRead'>
  <label class='closeBig' for='closeEarth'></label>
  <input class='read' id='closeEarth' type='radio' name='earthRead'>
  <div class='panel'>
    <h1>Earth</h1>
    <p>Earth, our home, is the third planet from the sun. It is the only planet known to have an atmosphere containing free oxygen, oceans of liquid water on its surface, and, of course, life.</p>
    <p>Earth is the fifth largest of the planets in the solar systm — smaller than the four gas giants, Jupiter, Saturn, Uranusand Neptune, but larger than the three other rocky planets, </p>
    <img src='https://images.pexels.com/photos/414171/pexels-photo-414171.jpeg?auto=compress&cs=tinysrgb&h=350'>
    <h2>The Earth’s rotation is gradually slowing.</h2>
    <p>This deceleration is happening almost imperceptibly, at approximately 17 milliseconds per hundred years, although the rate at which it occurs is not perfectly uniform. This has the effect of lengthening our days, but it happens so slowly that it could be as much as 140 million years before the length of a day will have increased to 25 hours.</p>
    <h2>The Earth was once believed to be the centre of the universe.</h2>
    <p>Due to the apparent movements of the Sun and planets in relation to their viewpoint, ancient scientists insisted that the Earth remained static, whilst other celestial bodies travelled in circular orbits around it. Eventually, the view that the Sun was at the centre of the universe was postulated by Copernicus, though this is also not the case.</p>
    <h2>Earth has a powerful magnetic field.</h2>
    <p>This phenomenon is caused by the nickel-iron core of the planet, coupled with its rapid rotation. This field protects the Earth from the effects of solar wind.</p>
    <h2>There is only one natural satellite of the planet Earth.</h2>
    <p>As a percentage of the size of the body it orbits, the Moon is the largest satellite of any planet in our solar systm. In real terms, however, it is only the fifth largest natural satellite.</p>
    <br>
  </div>
  <input class='read' id='readMars' type='radio' name='marsRead'>
  <label class='closeBig' for='closeMars'></label>
  <input class='read' id='closeMars' type='radio' name='marsRead'>
  <div class='panel'>
    <h1>Mars</h1>
    <p>Mars is the fourth planet from the sun. Befitting the red planet's bloody color, the Romans named it after their god of war. The Romans copied the ancient Greeks, who also named the planet after their god of war, Ares. Other civilizations also typically gave the planet names based on its color — for example, the Egyptians named it "Her Desher," meaning "the red one," while ancient Chinese astronomers dubbed it "the fire star."</p>
    <img src='https://1.bp.blogspot.com/-ou7Je3OVg6U/WYtxDqjNp_I/AAAAAAAACSQ/fsopS5VtFg4bmlv8hQNfiRYfJqTygCotQCLcBGAs/s2048/Martian%2Blandscape%2Bby%2BAmante%2BLombardi.jpg'>
    <h2>Mars and Earth have approximately the same landmass.</h2>
    <p>Even though Mars has only 15% of the Earth’s volume and just over 10% of the Earth’s mass, around two thirds of the Earth’s surface is covered in water. Martian surface gravity is only 37% of the Earth’s (meaning you could leap nearly three times higher on Mars).</p>
    <h2>Mars is home to the tallest mountain in the solar systm.</h2>
    <p>Olympus Mons, a shield volcano, is 21km high and 600km in diameter. Despite having formed over billions of years, evidence from volcanic lava flows is so recent many scientists believe it could still be active.</p>
    <h2>Only 18 missions to Mars have been successful.</h2>
    <p>As of September 2014 there have been 40 missions to Mars, including orbiters, landers and rovers but not counting flybys. The most recent arrivals include the Mars Curiosity mission in 2012, the MAVEN mission, which arrived on September 22, 2014, followed by the Indian Space Research Organization’s MOM Mangalyaan orbiter, which arrived on September 24, 2014. The next missions to arrive will be the European Space Agency’s ExoMars mission, comprising an orbiter, lander, and a rover, followed by NASA’s InSight robotic lander mission, slated for launch in March 2016 and a planned arrival in September, 2016.</p>
    <h2>Mars has the largest dust storms in the solar systm.</h2>
    <p>They can last for months and cover the entire planet. The seasons are extreme because its elliptical (oval-shaped) orbital path around the Sun is more elongated than most other planets in the solar systm.</p>
    <br>
  </div>
  <input class='read' id='readJupiter' type='radio' name='jupiterRead'>
  <label class='closeBig' for='closeJupiter'></label>
  <input class='read' id='closeJupiter' type='radio' name='jupiterRead'>
  <div class='panel'>
    <h1>Jupiter</h1>
    <p>Jupiter is the largest planet in the solar systm. Fittingly, it was named after the king of the gods in Roman mythology. In a similar manner, the ancient Greeks named the planet after Zeus, the king of the Greek pantheon.</p>
    <p>Jupiter helped revolutionize the way we saw the universe and ourselves in 1610, when Galileo discovered Jupiter's four large moons — Io, Europa, Ganymede and Callisto, now known as the Galilean moons. This was the first time that celestial bodies were seen circling an object other than Earth, major support of the Copernican view that Earth was not the center of the universe.</p>
    <img src='http://hanaleikauaivacation.com/wp-content/uploads/parser/jupiter-landscape-1.jpg'>
    <h2>Jupiter is the fourth brightest object in the solar systm.</h2>
    <p>Only the Sun, Moon and Venus are brighter. It is one of five planets visible to the naked eye from Earth.</p>
    <h2>The ancient Babylonians were the first to record their sightings of Jupiter.</h2>
    <p>This was around the 7th or 8th century BC. Jupiter is named after the king of the Roman gods. To the Greeks, it represented Zeus, the god of thunder. The Mesopotamians saw Jupiter as the god Marduk and patron of the city of Babylon. Germanic tribes saw this planet as Donar, or Thor.</p>
    <h2>Jupiter has the shortest day of all the planets.</h2>
    <p>It turns on its axis once every 9 hours and 55 minutes. The rapid rotation flattens the planet slightly, giving it an oblate shape.</p>
    <h2>Jupiter orbits the Sun once every 11.8 Earth years.</h2>
    <p>From our point of view on Earth, it appears to move slowly in the sky, taking months to move from one constellation to another.</p>
    <br>
  </div>
  <input class='read' id='readSaturn' type='radio' name='saturnRead'>
  <label class='closeBig' for='closeSaturn'></label>
  <input class='read' id='closeSaturn' type='radio' name='saturnRead'>
  <div class='panel'>
    <h1>Saturn</h1>
    <p>Saturn is the sixth planet from the sun and the second largest planet in the solar systm. Saturn was the Roman name for Cronus, the lord of the Titans in Greek mythology. Saturn is the root of the English word "Saturday."</p>
    <p>Saturn is the farthest planet from Earth visible to the naked human eye, but it is through a telescope that the planet's most outstanding features can be seen: Saturn's rings. Although the other gas giants in the solar systm — Jupiter, Uranus and Neptune — also have rings, those of Saturn are without a doubt the most extraordinary.</p>
    <img src='http://ak0.picdn.net/shutterstock/videos/4049260/thumb/1.jpg'>
    <h2>Saturn can be seen with the naked eye.</h2>
    <p>It is the fifth brightest object in the solar systm and is also easily studied through binoculars or a small telescope.</p>
    <h2>Saturn was known to the ancients, including the Babylonians and Far Eastern observers.</h2>
    <p>It is named for the Roman god Saturnus, and was known to the Greeks as Cronus.</p>
    <h2>Saturn is the flattest planet.</h2>
    <p>Its polar diameter is 90% of its equatorial diameter, this is due to its low density and fast rotation. Saturn turns on its axis once every 10 hours and 34 minutes giving it the second-shortest day of any of the solar systm’s planets.</p>
    <h2>Saturn orbits the Sun once every 29.4 Earth years.</h2>
    <p>Its slow movement against the backdrop of stars earned it the nickname of “Lubadsagush” from the ancient Assyrians. The name means “oldest of the old”.</p>
    <br>
  </div>
  <input class='read' id='readUranus' type='radio' name='uranusRead'>
  <label class='closeBig' for='closeUranus'></label>
  <input class='read' id='closeUranus' type='radio' name='uranusRead'>
  <div class='panel'>
    <h1>Uranus</h1>
    <p>Uranus is the seventh planet from the sun and the first to be discovered by scientists. Although Uranus is visible to the naked eye, it was long mistaken as a star because of the planet's dimness and slow orbit. The planet is also notable for its dramatic tilt, which causes its axis to point nearly directly at the sun.</p>
    <p>British astronomer William Herschel discovered Uranus accidentally on March 13, 1781, with his telescope while surveying all stars down to those about 10 times dimmer than can be seen by the naked eye. One "star" seemed different, and within a year Uranus was shown to follow a planetary orbit.</p>
    <img src='http://www.cosmosup.com/wp-content/uploads/2016/02/Uranus-Facts-About-the-Planet-Uranus-700x325.jpg'>
    <h2>Uranus was officially discovered by Sir William Herschel in 1781.</h2>
    <p>It is too dim to have been seen by the ancients. At first Herschel thought it was a comet, but several years later it was confirmed as a planet. Herscal tried to have his discovery named “Georgian Sidus” after King George III. The name Uranus was suggested by astronomer Johann Bode. The name comes from the ancient Greek deity Ouranos.</p>
    <h2>Uranus turns on its axis once every 17 hours, 14 minutes.</h2>
    <p>The planet rotates in a retrograde direction, opposite to the way Earth and most other planets turn.</p>
    <h2>Uranus makes one trip around the Sun every 84 Earth years.</h2>
    <p>During some parts of its orbit one or the other of its poles point directly at the Sun and get about 42 years of direct sunlight. The rest of the time they are in darkness.</p>
    <h2>Uranus is often referred to as an “ice giant” planet.</h2>
    <p>Like the other gas giants, it has a hydrogen upper layer, which has helium mixed in. Below that is an icy “mantle, which surrounds a rock and ice core. The upper atmosphere is made of water, ammonia and the methane ice crystals that give the planet its pale blue colour.</p>
    <br>
  </div>
  <input class='read' id='readNeptune' type='radio' name='neptuneRead'>
  <label class='closeBig' for='closeNeptune'></label>
  <input class='read' id='closeNeptune' type='radio' name='neptuneRead'>
  <div class='panel'>
    <h1>Neptune</h1>
    <p>Neptune is the eighth planet from the sun. It was the first planet to get its existence predicted by mathematical calculations before it was actually seen through a telescope on Sept. 23, 1846. Irregularities in the orbit of Uranus led French astronomer Alexis Bouvard to suggest that the gravitational pull from another celestial body might be responsible. German astronomer Johann Galle then relied on subsequent calculations to help spot Neptune via telescope. Previously, astronomer Galileo Galilei sketched the planet, but he mistook it for a star due to its slow motion. In accordance with all the other planets seen in the sky, this new world was given a name from Greek and Roman mythology — Neptune, the Roman god of the sea.</p>
    <p>Only one mission has flown by Neptune – Voyager 2 in 1989 – meaning that astronomers have done most studies using ground-based telescopes. Today, there are still many mysteries about the cool, blue planet, such as why its winds are so speedy and why its magnetic field is offset.</p>
    <img src='https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQy8Dd14tbXAzh1iz-EJl9tulRwH7Bb-SxX6sXpKFDbqb-NKwpE'>
    <h2>Neptune was not known to the ancients.</h2>
    <p>It is not visible to the naked eye and was first observed in 1846. Its position was determined using mathematical predictions. It was named after the Roman god of the sea.</p>
    <h2>Neptune spins on its axis very rapidly.</h2>
    <p>Its equatorial clouds take 18 hours to make one rotation. This is because Neptune is not solid body.</p>
    <h2>Neptune is the smallest of the ice giants.</h2>
    <p>Despite being smaller than Uranus, Neptune has a greater mass. Below its heavy atmosphere, Uranus is made of layers of hydrogen, helium, and methane gases. They enclose a layer of water, ammonia and methane ice. The inner core of the planet is made of rock.</p>
    <h2>The atmosphere of Neptune is made of hydrogen and helium, with some methane.</h2>
    <p>The methane absorbs red light, which makes the planet appear a lovely blue. High, thin clouds drift in the upper atmosphere.</p>
  </div>
  <input class='read' id='readPluto' type='radio' name='plutoRead'>
  <label class='closeBig' for='closePluto'></label>
  <input class='read' id='closePluto' type='radio' name='plutoRead'>
  <div class='panel'>
    <h1>Pluto</h1>
    <p>Pluto, once considered the ninth and most distant planet from the sun, is now the largest known dwarf planet in the solar systm. It is also one of the largest known members of the Kuiper Belt, a shadowy zone beyond the orbit of Neptune thought to be populated by hundreds of thousands of rocky, icy bodies each larger than 62 miles (100 kilometers) across, along with 1 trillion or more comets. </p>
    <p>In 2006, Pluto was reclassified as a dwarf planet, a change widely thought of as a demotion. The question of Pluto's planet status has attracted controversy and stirred debate in the scientific community, and among the general public, since then. In 2017, a science group (including members of the New Horizon mission) proposed a new definition of planethood based on "round objects in space smaller than stars," which would make the number of planets in our solar systm expand from 8 to roughly 100.</p>
    <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/asd.jpeg'>
    <h2>Pluto is named after the Greek god of the underworld.</h2>
    <p>This is a later name for the more well known Hades and was proposed by Venetia Burney an eleven year old schoolgirl from Oxford, England.</p>
    <h2>Pluto was reclassified from a planet to a dwarf planet in 2006.</h2>
    <p>This is when the IAU formalised the definition of a planet as “A planet is a celestial body that (a) is in orbit around the Sun, (b) has sufficient mass for its self-gravity to overcome rigid body forces so that it assumes a hydrostatic equilibrium (nearly round) shape, and (c) has cleared the neighbourhood around its orbit.”</p>
    <h2>Pluto was discovered on February 18th, 1930 by the Lowell Observatory.</h2>
    <p>For the 76 years between Pluto being discovered and the time it was reclassified as a dwarf planet it completed under a third of its orbit around the Sun.</p>
    <h2>Pluto has five known moons.</h2>
    <p>The moons are Charon (discovered in 1978,), Hydra and Nix (both discovered in 2005), Kerberos originally P4 (discovered 2011) and Styx originally P5 (discovered 2012) official designations S/2011 (134340) 1 and  S/2012 (134340) 1.</p>
  </div>
</body>
</html>

CSS

@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,700");
.solar_systm {
  transform-style: preserve-3d;
  pointer-events: none;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
}

* {
  -webkit-user-select: none;
  /* Chrome all / Safari all */
  -moz-user-select: none;
  /* Firefox all */
  -ms-user-select: none;
  /* IE 10+ */
  user-select: none;
  /* Likely future */
}

body .solar_systm .planet, body input[type=radio][name=planet]::after, body .overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  margin: auto;
}

body .solar_systm .planet.neptune .trajectory.ner, body .solar_systm .planet.neptune .trajectory.pro, body .solar_systm .planet.neptune .trajectory.tri, body .solar_systm .planet.uranus .trajectory.umb, body .solar_systm .planet.uranus .trajectory.ari, body .solar_systm .planet.uranus .trajectory.mir, body .solar_systm .planet.saturn .trajectory.enc, body .solar_systm .planet.saturn .trajectory.di, body .solar_systm .planet.saturn .trajectory.ti, body .solar_systm .planet.jupiter .trajectory.ga, body .solar_systm .planet.jupiter .trajectory.eu, body .solar_systm .planet.jupiter .trajectory.lop, body .solar_systm .planet.mars .trajectory.p, body .solar_systm .planet.mars .trajectory.d, body .solar_systm .planet.earth .trajectory.m {
  border: 2px dashed white;
  position: absolute;
  border-radius: 3400px;
  background: none !important;
  z-index: -2;
}

body .solar_systm .planet {
  height: 1200px;
  width: 1200px;
  border-radius: 600px;
  background: red;
  transition: transform 2.8s 0.23s cubic-bezier(0.33, 0, 0, 1), opacity 2s 0.8s, box-shadow 0s 0s;
  background-size: 1140px 910px !important;
  top: auto;
  bottom: -920px;
}
body .solar_systm .planet .moon {
  height: 200px;
  width: 200px;
  border-radius: 600px;
  background: red;
  position: absolute;
  text-align: center;
  color: white;
  text-transform: uppercase;
  opacity: 0;
  transition: all 0.6s 0.2s;
}
body .solar_systm .planet .moon h2 {
  font-weight: 100;
  font-size: 40px;
  letter-spacing: 5px;
  margin: 0;
  position: relative;
  top: -120px;
}
body .solar_systm .planet .moon h3 {
  font-weight: 100;
  font-size: 20px;
  letter-spacing: 5px;
  color: #fea082;
  margin: 0;
  position: relative;
  top: -120px;
}
@keyframes planet {
  from {
    background-position-y: 0px;
  }
  to {
    background-position-y: -1000px;
  }
}

body .solar {
  position: absolute;
  transform: rotatex(-20deg);
  perspective: 800px;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

body input[type=radio][name=planet]::after {
  width: 220px;
  height: 220px;
  border-radius: 550px;
  appearance: none;
  outline: none;
  cursor: pointer;
  z-index: 12;
  left: 18px;
  bottom: 282px;
}

body {
  overflow: hidden;
  background: black;
  height: 100vh;
  font-family: "Montserrat", sans-serif;
}
body .logo {
  color: white;
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  font-size: 14px;
  text-transform: uppercase;
  font-weight: 100;
  letter-spacing: 4px;
}
body .logo span {
  font-size: 12px;
  color: #f39041;
  display: block;
}
body label {
  cursor: pointer;
}
body label.mercury > .preview {
  background: url("https://www.solarsystemscope.com/images/textures/full/2k_makemake_fictional.jpg") !important;
}
body label.venus > .preview {
  background: url("https://nasa3d.arc.nasa.gov/shared_assets/images/ven0aaa2/ven0aaa2-copy-428-321.jpg") !important;
}
body label.earth > .preview {
  background: url("https://img00.deviantart.net/04ef/i/2009/114/3/e/new_earth_texture_map_by_lightondesigns.jpg") !important;
}
body label.mars > .preview {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/217233/mars_texture.jpg") !important;
}
body label.jupiter > .preview {
  background: url("https://www.jpl.nasa.gov/spaceimages/images/largesize/PIA07782_hires.jpg") !important;
}
body label.saturn > .preview {
  background: url("https://www.solarsystemscope.com/images/textures/full/2k_saturn.jpg") !important;
}
body label.uranus > .preview {
  background: url("https://img00.deviantart.net/957c/i/2017/165/4/9/uranus_texture_map_by_jcpag2010-db7yjwb.png") !important;
}
body label.neptune > .preview {
  background: url("https://img00.deviantart.net/f068/i/2017/165/b/c/neptune_texture_map_by_jcpag2010-dbcjcv5.png") !important;
}
body label.pluto > .preview {
  background: url("https://pre00.deviantart.net/4677/th/pre/f/2015/314/4/e/pluto_map__2015_nov_10__by_snowfall_the_cat-d918tlb.png") !important;
}
body label.menu {
  color: white;
  display: block;
  position: absolute;
  cursor: pointer;
  left: 90px;
  z-index: 2;
}
body label.menu:after {
  display: block;
  width: 12px;
  height: 12px;
  border: 2px solid white;
  border-radius: 60px;
  content: "";
  z-index: 2;
  position: absolute;
  top: -4px;
  left: -4px;
}
body label.menu:hover h2, body label.menu:hover h3 {
  opacity: 1;
}
body label.menu.mercury h2 .pip {
  background: #E8927C;
}
body label.menu.venus h2 .pip {
  background: #b45d15;
}
body label.menu.earth h2 .pip {
  background: #26daaa;
}
body label.menu.mars h2 .pip {
  background: #e55f45;
}
body label.menu.jupiter h2 .pip {
  background: orange;
}
body label.menu.saturn h2 .pip {
  background: #b29d81;
}
body label.menu.uranus h2 .pip {
  background: #8dcdd8;
}
body label.menu.neptune h2 .pip {
  background: #4f83e2;
}
body label.menu.pluto h2 .pip {
  background: #FF8732;
}
body label.menu .preview {
  width: 30px;
  height: 30px;
  background: yellow;
  float: left;
  background-size: auto 100% !important;
  position: absolute;
  border-radius: 100px;
  box-shadow: 0 -13px 10px 2px black inset;
}
body label.menu .info {
  position: relative;
  left: 50px;
  top: 1px;
}
body label.menu h2,
body label.menu h3 {
  text-transform: uppercase;
  margin: 0;
  font-weight: 100;
  letter-spacing: 2px;
}
body label.menu h2 {
  font-size: 11px;
  opacity: 0.4;
  margin-bottom: 4px;
}
body label.menu h2 .pip {
  width: 0;
  height: 9px;
  background: #fea082;
  float: left;
  position: relative;
  top: 3px;
  transition: all 0.3s;
  margin-right: 0px;
}
body label.menu h3 {
  font-size: 8px;
  letter-spacing: 1px;
  transition: all 0.3s;
  opacity: 0.3;
}
body label.menu:nth-of-type(1) {
  top: calc(50vh + 100px + ((14px + 34px) * 1) + 0px - 369px);
}
body label.menu:nth-of-type(2) {
  top: calc(50vh + 100px + ((14px + 34px) * 2) + 0px - 369px);
}
body label.menu:nth-of-type(3) {
  top: calc(50vh + 100px + ((14px + 34px) * 3) + 0px - 369px);
}
body label.menu:nth-of-type(4) {
  top: calc(50vh + 100px + ((14px + 34px) * 4) + 0px - 369px);
}
body label.menu:nth-of-type(5) {
  top: calc(50vh + 100px + ((14px + 34px) * 5) + 0px - 369px);
}
body label.menu:nth-of-type(6) {
  top: calc(50vh + 100px + ((14px + 34px) * 6) + 0px - 369px);
}
body label.menu:nth-of-type(7) {
  top: calc(50vh + 100px + ((14px + 34px) * 7) + 0px - 369px);
}
body label.menu:nth-of-type(8) {
  top: calc(50vh + 100px + ((14px + 34px) * 8) + 0px - 369px);
}
body label.menu:nth-of-type(9) {
  top: calc(50vh + 100px + ((14px + 34px) * 9) + 0px - 369px);
}
body input.read {
  display: none;
}
body .read:checked + label + input + .panel {
  right: 0;
}
body .read:checked + label {
  width: calc(100% - 420px);
}
body .read:checked + label::after {
  opacity: 1;
  left: 0;
}
body .read:checked + label + label {
  transition: all 0.3s 0.6s;
  opacity: 1;
}
body .read:not(:checked) + label + label {
  transition: all 0.3s 0s;
  opacity: 0;
}
body label.close {
  position: absolute;
  right: 60px;
  opacity: 0;
  transition: all 0.3s 0.4s;
  z-index: 3;
  top: 65px;
}
body label.closeBig {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  height: 100vh;
  transition: all 0.2s;
  z-index: 10;
  width: 0;
  background: rgba(56, 37, 99, 0.38);
}
body label.closeBig::after {
  content: "Back";
  text-align: center;
  font-size: 30px;
  color: white;
  position: absolute;
  left: -140px;
  opacity: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
body .overlay {
  border-bottom: 1020px solid black;
  width: 1800px;
  height: 620px;
  top: auto;
  -webkit-transform: none;
  transform: none;
  top: -240px;
  left: -303px;
  opacity: 1;
  border-radius: 100%;
  z-index: 0;
  box-shadow: 0px -190px 215px 110px black inset;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet1:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet1:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet_description h2,
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet_description p,
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(1) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(-6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -1;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(-9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -2;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(-11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -3;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(-13800px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -4;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-16100px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -5;
}
body input[type=radio][name=planet].planet1:checked + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-18400px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -6;
}
body input[type=radio][name=planet].planet1:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet1:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet1:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet1:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet1:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet1:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet1:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet1:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet1:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet1:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet1:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet1:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet1:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet1:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet2:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet2:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet_description h2,
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet_description p,
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(2) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(-6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -1;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(-9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -2;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(-11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -3;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-13800px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -4;
}
body input[type=radio][name=planet].planet2:checked + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-16100px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -5;
}
body input[type=radio][name=planet].planet2:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet2:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet2:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet2:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet2:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet2:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet2:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet2:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet2:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet2:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet2:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet2:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet2:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet2:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet3:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet3:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 4;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet_description h2,
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet_description p,
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(-6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -1;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(-9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -2;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -3;
}
body input[type=radio][name=planet].planet3:checked + label + input + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-13800px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -4;
}
body input[type=radio][name=planet].planet3:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet3:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet3:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet3:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet3:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet3:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet3:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet3:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet3:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet3:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet3:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet3:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet3:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet3:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet4:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet4:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 5;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 4;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet_description h2,
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet_description p,
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(-6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -1;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -2;
}
body input[type=radio][name=planet].planet4:checked + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -3;
}
body input[type=radio][name=planet].planet4:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet4:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet4:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet4:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet4:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet4:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet4:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet4:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet4:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet4:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet4:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet4:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet4:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet4:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet5:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet5:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 6;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 5;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 4;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet_description h2,
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet_description p,
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -1;
}
body input[type=radio][name=planet].planet5:checked + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -2;
}
body input[type=radio][name=planet].planet5:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet5:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet5:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet5:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet5:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet5:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet5:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet5:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet5:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet5:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet5:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet5:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet5:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet5:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet6:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 7;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 6;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 5;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 4;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet_description h2,
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet_description p,
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet6:checked + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: -1;
}
body input[type=radio][name=planet].planet6:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet6:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet6:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet6:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet6:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet6:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet6:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet6:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet6:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet6:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet6:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet6:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet6:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet6:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet7:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(13800px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 8;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 7;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 6;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 5;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 4;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet_description h2,
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet_description p,
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet7:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 0;
}
body input[type=radio][name=planet].planet7:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet7:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet7:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet7:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet7:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet7:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet7:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet7:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet7:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet7:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet7:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet7:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet7:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet7:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet8:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(16100px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 9;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(13800px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 8;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 7;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(9200px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 6;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(5) .planet {
  transform: translateZ(6900px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 5;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(6) .planet {
  transform: translateZ(4600px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 4;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(7) .planet {
  transform: translateZ(2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 3;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet {
  transform: translateZ(0px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 2;
  animation: planet 60s 3.9s infinite linear;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet_description {
  opacity: 1;
  transition: all 0.6s 2.6s;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet_description h2,
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet_description h1 {
  position: relative;
  top: 0px;
  transition: all 0.5s 3s;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet_description p,
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet_description a {
  transition: all 1s 3.5s, padding 0.3s 0s;
  opacity: 1;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet .moon {
  opacity: 1;
  transition: all 1s 3.2s;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet .trajectory {
  opacity: 0.2;
  transition: all 0.6s 2.9s;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(8) .planet .overlay {
  opacity: 1;
  top: -240px;
}
body input[type=radio][name=planet].planet8:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(9) .planet {
  transform: translateZ(-2300px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 1;
}
body input[type=radio][name=planet].planet8:checked + label.mercury > .info h3 {
  color: #E8927C;
}
body input[type=radio][name=planet].planet8:checked + label.venus > .info h3 {
  color: #b45d15;
}
body input[type=radio][name=planet].planet8:checked + label.earth > .info h3 {
  color: #26daaa;
}
body input[type=radio][name=planet].planet8:checked + label.mars > .info h3 {
  color: #e55f45;
}
body input[type=radio][name=planet].planet8:checked + label.jupiter > .info h3 {
  color: orange;
}
body input[type=radio][name=planet].planet8:checked + label.saturn > .info h3 {
  color: #b29d81;
}
body input[type=radio][name=planet].planet8:checked + label.uranus > .info h3 {
  color: #8dcdd8;
}
body input[type=radio][name=planet].planet8:checked + label.neptune > .info h3 {
  color: #4f83e2;
}
body input[type=radio][name=planet].planet8:checked + label.pluto > .info h3 {
  color: #FF8732;
}
body input[type=radio][name=planet].planet8:checked + label {
  opacity: 1;
}
body input[type=radio][name=planet].planet8:checked + label:before {
  display: block;
  width: 4px;
  height: 4px;
  position: absolute;
  left: 2px;
  top: 2px;
  z-index: 2;
  background: white;
  border-radius: 4px;
  content: "";
}
body input[type=radio][name=planet].planet8:checked + label > .info h2 {
  opacity: 1;
}
body input[type=radio][name=planet].planet8:checked + label > .info h2 .pip {
  width: 30px;
  margin-right: 6px;
}
body input[type=radio][name=planet].planet8:checked + label > .info h3 {
  opacity: 1;
  color: #fea082;
}
body input[type=radio][name=planet] {
  appearance: none;
}
body input[type=radio][name=planet]::after {
  content: "";
}
body input[type=radio][name=planet].planet9:checked::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input::after {
  display: none;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(9) {
  pointer-events: all;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(1) .planet {
  transform: translateZ(18400px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 10;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(2) .planet {
  transform: translateZ(16100px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 9;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(3) .planet {
  transform: translateZ(13800px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 8;
}
body input[type=radio][name=planet].planet9:checked + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + input + label + div .solar_systm:nth-of-type(4) .planet {
  transform: translateZ(11500px) translateY(0) rotatex(4deg) scaleX(0.89);
  opacity: 7;
}
body input[type=radio][name=planet].planet9:checked + label + input + la

Recomendado

Um código por mcdonge13

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS