/*titulo em branco, fundo preto(imitar espaço)*/
.tituloprin { 
  text-align: center; 
  margin-top: 40px; 
  font-size: 2.5rem; 
} 
/*legenda embaixo*/
.subt { 
  text-align: center; 
  margin-bottom: 60px; 
  color: #aaa; /*cinza clarinho*/
} 
body {
  font-family: "Arial", sans-serif;
  background: #0b0c10; 
  color: #fff;
  margin: 0;
  padding: 0;
}
/*linha embaixo do titulo, arrumar!*/
.linhadotempo { 
  position: relative; 
  margin: 0 auto; 
  padding: 20px 0; 
  width: 80%; 
} 
  .linhadotempo::after { 
    content: ""; 
    position: absolute; 
    width: 4px; 
    background: rgb(189, 24, 255); 
    top: 300px; /*fixo fica melhor*/
    bottom: 0; 
    left: 50%; 
    margin-left: -2px; 
  } 
  .fato { 
    position: relative; 
    width: 45%; 
    padding: 20px; 
    box-sizing: border-box; 
    background: rgba(20,20,30,0.9); 
    border-radius: 12px; 
    margin-bottom: 40px; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
  } 
  .fato:hover { 
    transform: scale(1.03); /*aumentei um pouco*/
  } 
  .fato.esquerda { 
    left: 0; 
  } 
  .fato.direita { 
    left: 55%; 
  } 
  .fato .ano { 
    font-size: 1.8rem; 
    font-weight: bold; 
    margin-bottom: 10px; 
    color: rgb(189, 24, 255); /*roxo ou azul*/
  } 
  /*texto em branco*/
 .fato .info.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
  .fato img { 
    width: 100%; 
    border-radius: 10px; 
    margin-top: 10px; 
  } 
  .escondido { 
    opacity: 0; 
    transform: translateY(50px); 
    transition: all 0.8s ease-out; 
  } 
  .show { 
    opacity: 1; 
    transform: translateY(0); 
  } 
  .prova { 
    background: #1a1a2e; 
    padding: 20px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.3); 
    margin-top: 15px; 
  } 
  .prova button { 
    display: block; 
    width: 100%; 
    margin: 8px 0; 
    padding: 12px; 
    background: #8652b7; 
    color: white; 
    border: none; 
    border-radius: 8px; 
    cursor: pointer; 
    font-size: 16px; 
    transition: background 0.3s; 
  } 
  .prova button:hover { 
    background: #8652b7; /*ficar diferentinho*/
  } 
  .resposta { 
    margin-top: 12px; 
    font-weight: bold; 
    font-size: 0.95rem; 
    color: #ffffff; 
    min-height: 20px; 
    transition: all 0.3s ease; 
  } 
    .info, .prova { 
      display: none; 
      opacity: 0; 
      transform: translateY(20px); 
      transition: all 0.6s ease-in-out; 
    } 
    .info.active, .prova.active { 
      display: block; 
      opacity: 1; 
      transform: translateY(0); 
    } 
    
.astronautafofo {
  position: fixed; /*fixed ta impedindo ele de mexer?*/ /*arrumado com IA*/
  bottom: 50px;
  left: 50px;
  cursor: pointer;
  z-index: 1000;
}

#astro {
  width: 120px;
  animation: floaty 8s ease-in-out infinite;
}
/*arrumar pra ficar mais parecido com gravidade 0*/
@keyframes floaty {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(30px, -20px) rotate(10deg); }
  50% { transform: translate(0px, -40px) rotate(-10deg); }
  75% { transform: translate(-30px, -20px) rotate(5deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

/*estilo gibi*/
.bolinha{
  position: absolute; 
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  background: white;
  color: black;
  padding: 10px;
  border-radius: 10px;
  width: 180px;
  text-align: center;
  font-size: 14px;
  display: none;
  z-index: 1001;
}

.bolinha::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px;
  border-style: solid;
  border-color: white transparent transparent transparent;
}