/*configuração geral, dps arrumo erros*/ 

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }


html, body {
  height: 100%;

  margin: 0;
  padding: 0;

  background-color: #050B1C; /*azul marinho ou preto?*/
  color: rgb(186, 218, 255);
  font-family: 'Poppins', sans-serif;
  text-align:center;
  overflow-y:  auto;

}

/*titulo e texto*/
h1 {
  margin-top:40px; /* mudar cor*/
}

p  {
  margin-top :  10px;
  margin-bottom :  0;
}

canvas { /*no meio*/
  display:block;
  margin: 0  auto;
  margin-top: 50px !important;      /*fica mais em cima mas n no titulo*/
}


header {
position: relative;
z-index: 60;
 padding: 22px 20px 6px;
    }


/* fica a VL aq*/
#caixaDaViaLactea {
  position: relative;
  width: 100%;
  height: 1100px; /* dar espaço */
  margin-top: 42px; 
  overflow: visible;
}


/* sol sem brilho, fica bizar */
#sol {
position: absolute ;
left: 50% ;
  top: 50%;
  width: 180px;
  height : 180px;
  transform: translate(-50%, -50%);
  background: url("solcerto.png")   center/cover no-repeat; /*n ta aparecendo a foto*/
  border-radius: 50%;
  z-index: 30;
}

  .planeta { /*ficar na posiçao certa ne*/

  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin:center  center;
  cursor: pointer;

}

.planeta img {
  border-radius: 50%;
  display: block;
  transition: transform .25s ease;
}
.planeta:hover img { transform: scale(1.15); }

  /* n deixar tudo do mesmo tamanho*/
#mercurio img { width: 22px; height: 22px; }
#venus  img    { width: 30px; height: 30px;  }
#terra img    { width: 34px; height: 34px; }
#marte  img    { width: 28px; height: 28px; }
#jupiter img  { width: 100px; height: 100px; }
#saturno img  { width: 90px; height: 90px; }
#urano img    { width: 60px; height: 60px; }
#netuno img   { width: 55px; height: 55px; }

/* ta saindo da telaa*/ /*arrumei com ia*/
@keyframes orbita1 { from { transform: rotate(0deg) translateX(130px) rotate(0deg);} to { transform: rotate(360deg) translateX(130px) rotate(-360deg);} }

@keyframes orbita2 { from { transform: rotate(0deg) translateX(180px) rotate(0deg);} to { transform: rotate(360deg) translateX(180px) rotate(-360deg);}  }
@keyframes orbita3 { from { transform: rotate(0deg) translateX(230px) rotate(0deg);} to { transform: rotate(360deg) translateX(230px) rotate(-360deg);}  }
@keyframes orbita4  { from { transform: rotate(0deg) translateX(280px) rotate(0deg);} to { transform: rotate(360deg) translateX(280px) rotate(-360deg);} }
@keyframes orbita5 { from { transform: rotate(0deg)  translateX(350px) rotate(0deg);} to { transform: rotate(360deg) translateX(350px) rotate(-360deg);} }
@keyframes orbita6 { from { transform: rotate(0deg) translateX(430px) rotate(0deg);} to { transform: rotate(360deg) translateX(430px) rotate(-360deg);} }
@keyframes orbita7 { from { transform: rotate(0deg)  translateX(500px) rotate(0deg);} to { transform: rotate(360deg) translateX(500px) rotate(-360deg);} }
 @keyframes orbita8 { from { transform: rotate(0deg) translateX(570px) rotate(0deg);} to { transform: rotate(360deg) translateX(570px) rotate(-360deg);} }

  /*velo diferentes q nem no real*/
#mercurio { animation: orbita1 22s linear infinite;}
#venus   {animation: orbita2 35s linear infinite;}
#terra   {animation: orbita3 50s linear infinite; }
#marte   { animation: orbita4 70s linear infinite;}
#jupiter { animation: orbita5 110s linear infinite; }
#saturno  { animation: orbita6 140s linear infinite;}
#urano    { animation: orbita7 180s linear infinite; }
#netuno   { animation: orbita8 220s linear infinite; }

/* vem com a msm foto*/
#modoZoom {

position: fixed;
  inset: 0;
  display: none;
  justify-content: center;
  align-items: center;
  background: rgba(0,0,20,0.9);
  z-index: 200;

}

#modoZoom.active { display: flex; }
#zoomContent {
  max-width: 800px;
  text-align: center;
  color: rgb(216, 233, 253);
}

#imagemDoPlaneta {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
}

 #botaoVoltar {
  background: #535ea1;

  color: white;

  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  border-radius: 8px;
cursor: pointer;
margin-top: 20px;
}