I use the following code to add a popup among my content to have a pop up for a certain phrase.
<p style="font-family: Bookman Old Style" align="justify" style="color:black;font-size:18px;" > Many of the musically inclined ancient Greek thinkers proposed the theory that waves and sound were related, and that vibrations or other disturbances must be the cause of sounds. In 550 BCE, Pythagoras realised that music was formed by vibrating strings and set out to calculate the mathematical relationships between the lengths of the strings that produced harmonies tones.</p>
<p style="font-family: Bookman Old Style" align="justify" style="color:black;font-size:18px;" >
<div class="popup" onclick="myFunction()"> <i>Galileo Galilei (1564-1642)</i>
<span class="popuptext" id="myPopup">
The Italian physicist, mathematician, and astronomer born in Pisa in the Grand Duchy of Tuscany (1564-1642 CE). Among other things, Galileo studied the acceleration of objects and discovered the four largest moons of the planet Jupiter. His work significantly advanced the use of quantitative experimentation in science, and he made noteworthy contributions in the development of technology: He invented the refracting telescope, perfected the compound microscope, and improved compass design. Galileo was famously jailed during the Inquisition for his support of Copernicus's heliocentric view of the cosmos.
</span>
</div><script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}</script> presented a clear explanation of the relationship between vibrating substances and the sounds they make, scientific theories of wave propagation started to gain more attention in the 17th century CE. </p>Now the fontstyle of the content containing the popup code is different and not aligned as the top content.
How do I fix this issue?
