/* Reset para garantir que margin e padding não interfiram */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    /* Removido overflow: hidden para permitir rolagem */
}

/* Estilo do fundo com partículas */
#particles-js {
    position: fixed; /* Fixa as partículas no fundo */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: transparent; /* Fundo transparente para mostrar partículas */
    z-index: 99; /* Coloca o efeito de partículas atrás do conteúdo */
    pointer-events: none; /* Permite interação com o conteúdo sobre as partículas */
}

/* Estilo do contêiner de imagens */
#content {
    position: relative;
    width: 100%;
    min-height: 100vh; /* Garante que o contêiner tenha pelo menos a altura da viewport */
    overflow-y: auto; /* Habilita a rolagem vertical */
    z-index: 2; /* Garante que o conteúdo das imagens esteja acima das partículas */
}

/* Estilo das imagens */
.image {
    width: 100%;
    height: auto; /* Mantém a proporção da imagem */
    display: block; /* Remove o espaço extra abaixo da imagem */
    margin-bottom: 3px; /* Espaçamento entre as imagens */
}

/* Estilo do botão */
#playAudioButton {
    position: fixed; /* Fixa o botão na tela */
    bottom: 20px; /* Espaçamento do fundo da tela */
    right: 20px; /* Espaçamento da lateral direita da tela */
    padding: 10px 20px; /* Espaçamento interno do botão */
    background-color: #e878ff; /* Cor de fundo do botão */
    color: #fff; /* Cor do texto do botão */
    border: none; /* Remove a borda padrão */
    border-radius: 5px; /* Bordas arredondadas */
    z-index: 100; /* Garante que o botão esteja sobre os outros elementos */
    cursor: pointer; /* Altera o cursor para indicar que é clicável */
}

#playAudioButton:hover {
    background-color: #e99bf8; /* Cor de fundo do botão ao passar o mouse */
}
/* Estilo do ponto clicável */
.clickable-point {
    position: absolute;
    width: 35%;
    height: 5%;
    background-color: transparent;
    cursor: pointer;
    z-index: 100;
  }
  .clickable-point2 {
    position: absolute;
    width: 52%;
    height: 5%;
    background-color: transparent;
    cursor: pointer;
    z-index: 100;
  }
/* Posicionamento específico do ponto na imagem */
#image2-container {
    position: relative; /* Necessário para posicionar o ponto clicável dentro da imagem */
}