/* INÍCIO DO AUDIO */
.audio-player {
    width: 300px;
    border-radius: 12px;
    background-color: #3f4553;
    padding: 6px;
}

.audio-player::-webkit-media-controls-play-button {
    background-color: #22c55e;
    border-radius: 50%;
}

/* FIM DO AUDIO */

.sumario{
  font-size: 20px;
}

.BotaoTrocarConteudo {
  background-color: #092857;
  border: solid 3px #092857;
  color: deeppink;
  font-weight: bold;
 font-size: 25px;
 text-shadow:4px 4px 4px black;
}

.AtaqueFisico{
 color: white;
  background-color: #ec6630; 
}
.AtaqueMagico{
 color: white;
  background-color: purple; 
}
.Deus{
 color: black;
  background-color: black; 
  border: solid 3px black;
}

.grafico{
  background-color: rgb(255, 255, 255); 
   border: solid 4px #a315c7;
}
.pedra{
 color: white;
  background-color: brown; 
}
.inseto{
 color: black;
  background-color: yellowgreen; 
}
.humanoide{
  color: white;
  background-color: deeppink;
}
.demonio{
  color: white;
  background-color: red;
}
.cobra{
  color: white;
  background-color: green;
}
.temafieldset{
  background-color: #19327f;
}
.temafieldset2{
  background-color: #092857;
  border: solid 3px #092857;
}
.imgMenor{
  width: 150px;
  height: 100px;
  border: solid 2px #17e5f2;
  border-radius: 20px;
  }

.img1{
width: 200px;
height: 150px;
border: solid 2px #17e5f2;
border-radius: 20px;
}


.imgqrcode{
width: 250px;
height: 250px;
border: solid 2px #17e5f2;
border-radius: 20px;
}
.imgurso{
width: 250px;
height: 250px;
}

.imagemDeCapaParaCasteloDemoniaco{
  width: 350px;
  height: 200px;
  border: solid 2px #17e5f2;
  border-radius: 20px;
  }
  
.pipoca{
height: 100px;
border-radius: 10px;
}

.luta{
   background-color: #212338;
  text-align: left;
}
.PontosExtras{
  color: lawngreen;
}

.PontosExtrasDosSoldadosDasSombras{
  color: #f700f6;
}
.PontosPontosExtrasDosTitulos{
  color: yellow;
}
.sublinhado{
  border-radius: 5px;
border: solid 1px white;
background-color: #031833;
padding: 5px 5px 0 5px;
}

.TestaqueEmVermelho{
background-color: red;
}
.imagemParaItens{
height: 75px;
border-radius: 10px;
}
.botaoNovo{
padding: 10px;
display:inline-block;
color: white;
text-decoration: none;
font-weight: bold;
background-color: #031833;
border-radius: 10px;
border: solid 3px #373960;
}
h3{
  color:white;
}

  h2{
    color: white;
  }

  p{
    color: white;
  }

  body{
background-color: black;
color: white;
  }

a{
padding: 10px;
display:inline-block;
color: cyan;
text-decoration: none;
font-weight: bold;
background-color: #212338;
border-radius: 10px;
border: solid 3px #373960;
}

a:hover{
color: black;
text-decoration: none;
background-color: cyan;
}

legend{
color: white;
}

.nota{
  background-color: #212338;
}
ul{
  color: white;
  text-align: left;
  background-color: #212338;
}

.destaqueEquipamento{
  text-align: left;
  background-color: #212338;
}

ol{
  color: white;
  background-color: green;
}

details{
  color: white
}

  .grid-container{
display: grid;
gap: 4px;
grid-template-columns: 2fr 2fr 2fr;
background-color: #031833;
}

.grid-item-1{
grid-column: span 3;
  background-color: #373960;
  text-align: center;
  font-size: 25px;
}

.grid-item0{
  background-image:  url(https://staticg.sportskeeda.com/editor/2023/03/17ca6-16794716243600-1920.jpg);
margin: 2px;
grid-column: span 3;
background-repeat: repeat;
background-size: 100%;
  height: 350px;
}

.grid-item1{
margin: 2px;
grid-row: span 15;
background-color: #092857;
  text-align: center;
  padding: 5px 10px 5px 10px;
  box-shadow: 2px 2px 2px  #17e5f2;
}
.grid-item2{
margin: 2px;
grid-column: span 2;
background-color: #092857;
  text-align: center;
  padding: 5px 10px 5px 10px;
  box-shadow: 2px 2px 2px  #17e5f2;
}
.grid-item3{
margin: 2px;
background-color: #092857;
  text-align: center;
  padding: 5px 10px 5px 10px;
  box-shadow: 2px 2px 2px  #17e5f2;
}

.grid-item30{
  margin: 2px;
  grid-column: span 2;
  background-color: #092857;
    text-align: center;
    padding: 5px 10px 5px 10px;
    box-shadow: 2px 2px 2px  #17e5f2;
    
    z-index: 2;  /*  Indica a posição do elemento nas camadas de sobreposição */
    position: sticky;
    top: 0;
  }

.grid-itemFlutuante{
  z-index: 2;  /*  Indica a posição do elemento nas camadas de sobreposição */
position: sticky;
top: 0;

margin: 2px;
background-color: #092857;
  text-align: center;
  padding: 5px 10px 5px 10px;
  box-shadow: 2px 2px 2px  #17e5f2;
}


.grid-item4{
 
  background-image:  url(https://images8.alphacoders.com/113/1139017.jpg);
grid-column: span 3;
background-repeat: repeat;
background-size: 100%;
  height: 350px;

}
.grid-item5{

margin: 2px;
grid-column: span 2;
background-repeat: repeat;
background-size: 100%;
  height: 75px;
  text-align: center;
}

.grid-item6{
  grid-column: span 4;
margin: 2px;
background-color: #3f4553;
  text-align: center;
  padding: 5px 10px 5px 10px;
  box-shadow: 2px 2px 2px  white;
    height: 350px;
}

X.grid-item6{
margin: 2px;
grid-column: span 1;
background-image:  url(https://wallpapercave.com/wp/wp2200981.jpg);
background-repeat: repeat;
background-size: 100%;
  text-align: center;
  padding: 5px 10px 5px 10px;
  height: 350px;
}
.grid-item7{
grid-column: span 3;
height: 350px;
text-align: center;
margin: 2px;
background-color: #092857;
padding: 5px 10px 5px 10px;
box-shadow: 2px 2px 2px  #17e5f2;
}

.imglupa{
    height: 40px;
}

.imgicones{
height: 30px;
width: 30px;
transform: rotate(50deg);
margin: 5px;

 }

 
 .html{
color: #ec6630;
font-style: italic;
font-family:cursive;
}
.css{
color: #0096e6;
font-style: italic;
font-family:cursive;
}
.java{
color: #eeaf4b; 
font-style: italic;
font-family:cursive;
}
button{
  border-radius: 10px;
}





.cards-container{
  width: 100%;
  border-radius: 10px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
  gap: 30px
}


.flip-card{
width: 200px;
height: 150px;
border-radius: 10px;
perspective: 1000px;
background-color: transparent;
}

.flip-card-inner{
  position: relative;
  width: 100%;
  height: 100%;
  transition: 1s;
  transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner{
  transform: rotateY(180deg);
}

.flip-card:hover {
  cursor: pointer;
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.flip-card-front,
.flip-card-back{
  display: grid;
  place-items: center;
}
.flip-card-front{
  display: grid;
  place-items: center; 
  border: 1px solid rgba (151, 149, 149, 0.466);
  border-radius: 10px;
}

.flip-card-back{
  background-color: #212338;
  transform: rotateY(180deg);
  box-shadow: 5px 5px 5px lightgray;
  border-radius: 10px;
}

.flip-card-front img{
  width: 90%;
  background-size: cover;
}

.flip-card-back h3{
  color: #f1c40f;
}



.barra {
  width: 200px;
  height: 20px;
  border-radius: 10px;
  background-color: greenyellow;
}
.barra div {
  height: 100%;
  border-radius: 10px;
  background-color: red;
  transition: all 300ms;
}


.barraVida {
  width: 200px;
  height: 20px;
  border-radius: 10px;
  background-color: red;
}
.barraVida div {
  height: 100%;
  border-radius: 10px;
  background-color: greenyellow;
  transition: all 300ms;
}

.barraMana {
  width: 200px;
  height: 20px;
  border-radius: 10px;
  background-color: red;
}
.barraMana div {
  height: 100%;
  border-radius: 10px;
  background-color:  greenyellow;
  transition: all 300ms;
}

.blob {
padding: 10px;
display:inline-block;
color: white;
text-decoration: none;
font-weight: bold;
background-color: #031833;
border-radius: 10px;
border: solid 3px #373960;

	box-shadow: 0 0 0 0 rgba(0, 0, 0, 1);
	transform: scale(1);
	animation: pulse 2s infinite;
}

@keyframes pulse {
	0% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.7);
	}

	70% {
		transform: scale(1);
		box-shadow: 0 0 0 10px rgba(0, 0, 0, 0);
	}

	100% {
		transform: scale(0.95);
		box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
	}
}


/*  INÍCIO DO CARROSSEL */
.galery {
  width: 100%;
  height: 360px;
  overflow: hidden;
}
.galery .fotos {
width: 500%;
animation-name: animacao;
animation-duration: 20s;
animation-iteration-count: infinite;
}
.galery .fotos img {
width: 19.9%;
  height: 360px;
border: solid 1px black;
}
@keyframes animacao {
  0% { margin-left: 0;}
  20% { margin-left: 0;}
  25% { margin-left: -100%;}
  45% { margin-left: -100%;}
  50% { margin-left: -200%;}
  70% { margin-left: -200%;}
  75% { margin-left: -300%;}
  95% { margin-left: -300%;}
  100% { margin-left: -400%;}
}
/*  FIM DO CARROSSEL */


/* BORDA GRADIENTE */
.caixa{
  position: relative;
color: #FFFFFF;
background: #0079BF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10px;
margin-left: 45%; /* é aqui que se ajusta o alinhamento da imagem no span */
width: 50px;
height: 50px;
border-radius: 10px;
}

.caixa::before, .caixa::after {
  content: '';
  position: absolute;
  width: calc(100% + 30px);
  height: calc(100% + 30px);
  background: linear-gradient(45deg,#ffff00, #00ff00, #0099ff, #001aff,#a200ff,#ff0055,#ff0000,
  #ffff00, #00ff00, #0099ff, #001aff, #0099ff);
  z-index: 0;
  background-size: 300%;
  border-radius: 10px;
  animation: AnimarBorda 8s linear infinite;


}

.caixa::after{
  filter: blur(50px);
}

@keyframes AnimarBorda{
  0%{
    background-position: 0;
  }
  100%{
    background-position: 300%;
  }
}
/* BORDA GRADIENTE */


/* teste */
.abas {
  width: 100%;
}

.botoes {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botao {
 padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botao.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudo {
  padding: 20px;
  border: 1px solid #ccc;
}

.aba {
  display: none;
}

.aba.ativo {
  display: block;
}
/* teste */

/* Início abas do menu Habilidades */
.abasHabilidades {
  width: 100%;
}

.botoesHabilidades {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoHabilidades {
   padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoHabilidades.ativo {
 background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoHabilidades {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaHabilidades {
  display: none;
}

.abaHabilidades.ativo {
  display: block;
}
/* Fim abas do menu Habilidades */

/* Início abas do menu Treino */
.abasTreino {
  width: 100%;
}

.botoesTreino {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoTreino {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoTreino.ativo {
 background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoTreino {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaTreino {
  display: none;
}

.abaTreino.ativo {
  display: block;
}
/* Fim abas do menu Treino */

/* Início abas do menu Kasaka */
.abasKasaka {
  width: 100%;
}

.botoesKasaka {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoKasaka {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoKasaka.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoKasaka {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaKasaka {
  display: none;
}

.abaKasaka.ativo {
  display: block;
}
/* Fim abas do menu Kasaka */

/* Início abas do menu classes e títulos*/
.abasArise {
  width: 100%;
}

.botoesArise {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoArise {
 padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoArise.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoArise {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaArise {
  display: none;
}

.abaArise.ativo {
  display: block;
}
/* Fim abas do menu classes e títulos */

/* Início abas do menu Loja */
.abasLoja {
  width: 100%;
}

.botoesLoja {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoLoja {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoLoja.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoLoja {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaLoja {
  display: none;
}

.abaLoja.ativo {
  display: block;
}
/* Fim abas do menu Loja */

/* Início abas do menu Inventário */
.abasInventario {
  width: 100%;
}

.botoesInventario {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoInventario {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoInventario.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoInventario {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaInventario {
  display: none;
}

.abaInventario.ativo {
  display: block;
}
/* Fim abas do menu Inventario */

.botaoInventarioteste {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: white;
  cursor: pointer;
}

.botaoInventarioteste.ativo {
   background-color: #031833;
  color: #fff;
}

/* Início efeito de moedas na compra */
.moeda {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ffd700;
  border-radius: 50%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

.moeda-animacao {
  animation: sair-moeda 2s linear;
}

@keyframes sair-moeda-direita {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, 0);
    opacity: 0;
  }
}

@keyframes sair-moeda-esquerda {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, 0);
    opacity: 0;
  }
}

@keyframes sair-moeda-cima {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -100px);
    opacity: 0;
  }
}

@keyframes sair-moeda-baixo {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 100px);
    opacity: 0;
  }
}
/* Fim efeito de moedas na compra */


/* Início efeito de moedas na compra 2*/
.moeda2 {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ffd700;
  border-radius: 50%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

.moeda2-animacao {
  animation: sair-moeda2 2s linear;
}

@keyframes sair-moeda2-direita {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, 0);
    opacity: 0;
  }
}

@keyframes sair-moeda2-esquerda {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, 0);
    opacity: 0;
  }
}

@keyframes sair-moeda2-cima {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -100px);
    opacity: 0;
  }
}

@keyframes sair-moeda2-baixo {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 100px);
    opacity: 0;
  }
}
/* Fim efeito de moedas na compra 2*/

/* Início efeito de moedas na compra 3*/
.moeda3 {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #ffd700;
  border-radius: 50%;
  opacity: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 12px;
  font-weight: bold;
}

.moeda3-animacao {
  animation: sair-moeda3 2s linear;
}

@keyframes sair-moeda3-direita {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(100px, 0);
    opacity: 0;
  }
}

@keyframes sair-moeda3-esquerda {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(-100px, 0);
    opacity: 0;
  }
}

@keyframes sair-moeda3-cima {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -100px);
    opacity: 0;
  }
}

@keyframes sair-moeda3-baixo {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 100px);
    opacity: 0;
  }
}
/* Fim efeito de moedas na compra 3*/


/* INÍCIO DA MANA*/
.bolha {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: rgba(122, 40, 138, 0.5);
  border-radius: 50%;
  opacity: 0;
  box-shadow: 0 0 10px rgba(122, 40, 138, 0.5);
}

.bolha-animacao-cima {
  animation: subir-bolha 3s linear;
}

.bolha-animacao-baixo {
  animation: descer-bolha 3s linear;
}

.bolha-animacao-esquerda {
  animation: esquerda-bolha 3s linear;
}

.bolha-animacao-direita {
  animation: direita-bolha 3s linear;
}

@keyframes subir-bolha {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(0, -200px) scale(1.5);
    opacity: 0;
  }
}

@keyframes descer-bolha {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(0, 200px) scale(1.5);
    opacity: 0;
  }
}

@keyframes esquerda-bolha {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-200px, 0) scale(1.5);
    opacity: 0;
  }
}

@keyframes direita-bolha {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(200px, 0) scale(1.5);
    opacity: 0;
  }
}
/* FIM DA MANA*/


/* INÍCIO DO EFEITO DA VIDA*/
.seta-verde {
  position: absolute;
  font-size: 100px;
  font-weight: bold;
  color: #00FF00;
  opacity: 0;
  text-shadow: 0 0 10px #00FF00;
  text-align: center;
  width: 100px;
}

.seta-verde-animacao {
  animation: subir-seta 1s linear;
}

@keyframes subir-seta {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, -100px);
    opacity: 0;
  }
}
/* FIM DO EFEITO DA VIDA*/

/* INÍCIO DO EFEITO DA FADIGA*/
#seta-vermelha-container {
  position: relative;
}

.seta-vermelha {
  position: absolute;
  font-size: 100px;
  color: #FF0000;
  opacity: 0;
}

.seta-vermelha-animacao {
  animation: descer-seta 1s linear;
}

@keyframes descer-seta {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  100% {
    transform: translate(0, 100px);
    opacity: 0;
  }
}

/* FIM DO EFEITO DA FADIGA*/


/* INÍCIO DO MENU PARA AS DUNGEOS*/
.abasNova {
  width: 100%;
}

.botoesNova {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoNova {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoNova.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoNova {
  padding: 20px;
 
}

.abaNova {
  display: none;
}

.abaNova.ativo {
  display: block;
}
/* FIM DO MENU PARA AS DUNGEOS*/


.status-container {
  display: flex;
  justify-content: space-around;
}

.status-item {
  margin: 10px;
}

#containerSombra {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.item {
  flex-basis: calc(33.33% - 10px);
  margin: 5px;
  padding: 20px;
  box-sizing: border-box;
}

/* Início abas do menu Esil Radiru*/
.abasArise2 {
  width: 100%;
}

.botoesArise2 {
  display: flex;
  justify-content: space-around;
  margin-bottom: 20px;
}

.botaoArise2 {
  padding: 10px 20px;
  border: none;
  border-radius: 0px;
  background-color: #031833;
  cursor: pointer;
  color: white;
}

.botaoArise2.ativo {
  background-color: white;
  color: #031833;
  border: solid 3px #7A288A;
}

.conteudoArise2 {
  padding: 20px;
  border: 1px solid #ccc;
}

.abaArise2 {
  display: none;
}

.abaArise2.ativo {
  display: block;
}
/* Fim abas do menu Esil Radiru */

/* Início dos corações */
.coracao {
  position: absolute;
  font-size: 50px;
  color: #7A288A;
  text-shadow: 0 0 2px #3b3f54;
  opacity: 0;
  transform: scale(0);
  transition: all 0.5s ease-out;
}

.coracao.show {
  opacity: 1;
  transform: scale(1);
}

.coracao::before {
 content: '💜💜';
}
/* Fim dos corações */

/* início petalas */
#petalas-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}

.petala {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: #e235ae; /* Cor vermelha */
  border-radius: 50%;
  opacity: 0.8;
}
/* fim petalas */

/* início lua */
#lua-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}

.lua {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: #000000; 
  box-shadow: 0 0 20px rgba(128, 0, 128, 0.5), 
              0 0 10px rgba(255, 105, 180, 0.8); 
}


/* fim lua */

/* início bolas de fogo */

#container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1000;
}

.bola-fogo {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: #000000; /* Cor negra */
  box-shadow: 0 0 10px rgba(128, 0, 128, 0.8), /* Luz roxa */
              0 0 5px rgba(255, 105, 180, 0.5); /* Tom rosa */
}

/* fim bolas de fogo */

.EfeitoEstrela {
   color: deeppink;
   text-shadow:4px 4px 4px black;
   font-weight: bold;
}

/* Início do efeito de estrela */
#conteinerEstrela {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000; /* Adicionei um z-index alto para sobrepor outros elementos */
}

.estrela {
  font-size: 100px;
  opacity: 0;
}
/* Fim do efeito de estrela */

/* Início do efeito de estrela 2*/
#conteinerEstrela2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.estrela2 {
  font-size: 100px;
  opacity: 0;
}
/* Fim do efeito de estrela 2*/

/* Início do efeito de estrela 3*/
#conteinerEstrela3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.estrela3 {
  font-size: 100px;
  opacity: 0;
}
/* Fim do efeito de estrela 3*/

/* Início do efeito de estrela 4*/
#conteinerEstrela4 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.estrela4 {
  font-size: 100px;
  opacity: 0;
}
/* Fim do efeito de estrela 4*/

/* Início do efeito de estrela 5*/
#conteinerEstrela5 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.estrela5 {
  font-size: 100px;
  opacity: 0;
}
/* Fim do efeito de estrela 5*/


/* Início do efeito de estrela 6*/
#conteinerEstrela6 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  z-index: 10000;
}

.estrela6 {
  font-size: 100px;
  opacity: 0;
}
/* Fim do efeito de estrela 6*/

#resultado {
  margin-top: 20px;
  font-size: 18px;
  font-weight: bold;
}

/* início do Escrituras Antigas*/
#resultado.sucesso {
  color: greenyellow;
}

#resultado.erro {
  color: #ff0000;
}
/* Fim do Escrituras Antigas*/

/* Início das chamas do grimório*/
#chama-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
}

.chama {
  position: absolute;
  opacity: 0;
  filter: blur(5px);
}

.chama.pequena {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 20px 40px 20px;
  border-color: transparent transparent #FF3737 transparent;
}

.chama.media {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 100px 50px;
  border-color: transparent transparent #FF3737 transparent;
}

.chama.grande {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 100px 200px 100px;
  border-color: transparent transparent #FF3737 transparent;
}
/* Fim das chamas do grimório*/

/*início dos vagalumes*/
#vagalume-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 10000;
  pointer-events: none;
}

.vagalume {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background-color: black; /* Roxo */
  box-shadow: 0 0 20px rgb(167, 22, 207); /* Brilho rosa */
}
/*fim dos vagalumes*/