body{

   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#020000+1,000000+100 */
 background: #020000; /* Old browsers */
 background: -moz-linear-gradient(-45deg,  #020000 1%, #000000 100%); /* FF3.6-15 */
 background: -webkit-linear-gradient(-45deg,  #020000 1%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
 background: linear-gradient(135deg,  #020000 1%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#020000', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  height:100vh;
  width:100vw;
  color:white;
  padding:0;
  margin:0;
     -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
overflow: hidden;
font-family: 'Poppins', sans-serif;
font-size: 16px;
}
/* -------------------------------------------------lien*/

nav{
display: flex;
justify-content:center;
position:relative;
}
ul{
list-style: none;
display: flex;
flex-direction: row;
}
li{
margin-right: 20px;
}
a{
color:#FF503F;
}
a:visited{
  color: #FF503F;
  text-decoration: none;
}

/* -------------------------infos */
div p{
  border:1px solid rgba(186, 187, 194, 0.74);
  border-top:none;
  border-right:none;
  border-bottom:none;
  padding-left:5px;
}
p{
  opacity:0;
  font-size:12px;
  text-align:center;
  transition:0.44s;
}
div.system:active p{
  opacity:1;
}
div.system::before{
  content:'Simulation du rythme des révolutions des planètes du système solaire par Yann LE FORESTIER, une seconde =  un mois.';
opacity:0;
  min-height:12vh;
  padding-left: 20px;
  padding-right: 20px;
  width:80%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition:0.77s;
  text-align:center;
  background-color:darkorange;
  position:absolute;
  bottom:7px;

  z-index: 9;
  border-radius: 7px;
}
div.system:active::before{
  opacity:1;
}
/* my system by yleforestier.fr */
.system{
  display:flex;
  justify-content:center;
  align-items:center;
  height:100vh;
  width:100%;
  overflow: visible;
}
.nep, .ura, .sat, .jup, .mar, .ter, .ven, .mer, .sun, .plu, .lun{
  display:block;
  position:absolute;
  animation-fill-mode: forwards;
  border-radius:50%;
/*   border:1px solid white; */
}
.plu{
/*   left:0.5vw; */
/*   margin-left:-49.5vw; */
  height:1px;
  width:1px;
  background-color:blue;
  color:blue;
}
.orb-plu{
  display:block;
  height:1px;
  width:99vw;
  border-radius:50%;
  margin:0;
  padding:0;
  position:absolute;
  left:0.5vw;
  animation: revolution 17s infinite linear;
}
.nep{
/*   left:-12.5vw; */
  height:1px;
  width:1px;
  background-color:lightblue;
  color:lightblue;
}
.orb-nep{

  display:block;
  height:1px;
  width:75vw;
  margin:0;
  padding:0;
  position:absolute;
  left:12.5vw;
  animation: revolution 16s infinite linear;
}

.ura{
/*   left:26vw; */
  height:1px;
  width:1px;
  background-color:grey;
  color:grey;
}
.orb-ura{

  display:block;
  height:1px;
  width:48vw;
  margin:0;
  padding:0;
  position:absolute;
  left:26vw;
  animation: revolution 15s infinite linear;
}

.sat{
/*   left:37.8vw; */
  height:1px;
  width:1px;
  background-color:yellow;
  color:yellow;
}
.orb-sat{

  display:block;
  height:1px;
  width:24.4vw;
  margin:0;
  padding:0;
  position:absolute;
  left:37.8vw;
  animation: revolution 354s infinite linear;
}

.jup{
/*   left:43.5vw; */
  height:1px;
  width:1px;
  background-color:brown;
  color:brown;
}
.orb-jup{

  display:block;
  height:1px;
  width:13vw;
  margin:0;
  padding:0;
  position:absolute;
  left:43.5vw;
  animation: revolution 142s infinite linear;
}

.mar{
/*   left:48.1vw; */
  height:1px;
  width:1px;
  background-color:red;
  color:red;
}
.orb-mar{

  display:block;
  height:1px;
  width:3.8vw;
  margin:0;
  padding:0;
  position:absolute;
  left:48.1vw;
  animation: revolution 23s infinite linear;
}

.ter{
/*   left:48.75vw; */
  height:1.2px;
  width:1.2px;
  background-color:lightblue;
  color:lightblue;
}
.orb-ter{

  display:flex;
  justify-centent:center;
  align_items:center;
  height:1.2px;
  width:2.5vw;
  margin:0;
  padding:0;
  position:absolute;
  left:48.75vw;
  animation: revolution 12s infinite linear;
}
.lun{
  height:0.5px;
  width:0.5px;
  background-color:grey;
  color:grey;
}
.orb-lun{
  display:block;
  height:1px;
  width:2px;
  margin:0;
  margin-top:-0.5px;

  padding:relative;
  animation: revolution 0.95s infinite linear;
}

.ven{
/*   left:49.1vw; */
  height:1px;
  width:1px;
  background-color:cyan;
  color:cyan;
}
.orb-ven{

  display:block;
  height:1px;
  width:1.8vw;
  margin:0;
  padding:0;
  position:absolute;
  left:49.1vw;
  animation: revolution 7s infinite linear;
}

.mer{
/*   left:49.51vw; */
  height:1px;
  width:1px;
  background-color:lightsalmon;
  color:lightsalmon;
}
.orb-mer{

  display:block;
  height:1px;
  width:0.98vw;
  margin:0;
  padding:0;
  position:absolute;
  left:49.51vw;
  animation: revolution 3s infinite linear;
}

.sun{
  left:50vw;
  transform:translatex(-50%);/*center pro*/
  height:7px;
  width:7px;
  background-color:yellow;
  color:yellow;
  font-weight:800;
  border-radius:50%;
}
/* ---------------------------------------animation */

@keyframes revolution {
  0%   { transform:rotate(0deg); }
  100% { transform:rotate(360deg); }
}