I'm facing a frustrating issue on my website. Every time I refresh the page, it jerks and the text seems to compress and then return to normal. Even after removing most of my code, the problem persists and I can't figure out what's causing it. Any help in unraveling this mystery would be greatly appreciated. Check out the code snippet below.
function myFunction() {
var x = document.getElementById("topLinks");
if (x.style.display === "block") {
x.style.display = "none";
}
else {
x.style.display = "block";
}
}
function openNav() {
document.getElementById("mySidebar").style.width = "250px";
}
function closeNav() {
document.getElementById("mySidebar").style.width = "0";
}@import url('https://fonts.googleapis.com/css?family=Noto+Serif:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Yanone+Kaffeesatz:wght@300;400;700&display=swap');
* {
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
* {
margin: 0;
padding: 0;
}
body {
background: url(img/background.png) fixed;
}
.abbr {
cursor: help;
}
/* CONTENT DIV */
.content {
max-width: 75%;
margin: 0 auto;
margin-top: 8px;
margin-bottom: 8px;
line-height: 1.6em;
font-family: 'Noto Serif', serif;
background: rgba(78, 192, 253, .7);
overflow: hidden;
padding: 1em;
text-align: left;
min-height: 100%;
font-size: 1.6em;
}
/** SIDEBAR **/
.sidebar {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidebar a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidebar a:hover {
col...etc