*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--bg-soft:#eef2f7;
--bg-warm:#f7f9fc;
--ink:#1f2a37;
--ink-muted:#4f5f73;
--surface:#ffffff;
--surface-tint:#f4f8fc;
--line:#d9e2ee;
--brand:#2b5f87;
--brand-soft:#5e8fb1;
--accent:#3f7a6e;
--shadow:0 10px 24px rgba(26, 50, 74, 0.1);
--radius-lg:14px;
--radius-md:10px;
}

body{

font-family:"Nunito Sans", "Trebuchet MS", "Segoe UI", sans-serif;

background-attachment: fixed;
/* Reference: https://4kwallpapers.com/technology/matrix-falling-code-13665.html */
background-image: url("../media/programmer-wallpaper.jpg");
background-size:100% auto;

color:var(--ink);
line-height:1.55;

/* make the page a column flex container so footer can be pushed to bottom */
display: flex;
flex-direction: column;
min-height: 100vh;
padding-top: 152px; /* Account for fixed navbar (92px) + header-nav (60px) */
}

.infographic {
  max-width: 100%;
  height: auto;
}

main{

width:90%;

max-width:1100px;

margin:auto;

padding-top:40px;
padding-bottom:48px;

/* allow main to grow and fill available vertical space */
flex: 1;
}

/* Header and Navigation for articles */
.header-nav {
display: flex;
gap: 5px;
justify-content: center;
padding: 5px 0;
background-color: black;
position: fixed;
top: 92px; /* Position below the fixed navbar */
left: 0;
right: 0;
z-index: 39; /* Below navbar z-index of 40 */
}

.header-links {
color: white;
text-decoration: none;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.3s ease;
font-size: 13px;
}

.header-links:hover {
color:rgba(0, 245, 245, 0.873);
}

#action_icon {
  width: 40px;
  height: auto;
}

.reference {
  width: 15px;
  height: auto;
}

/* Responsive styles for header-nav */
@media (max-width: 760px) {
.header-nav {
display: none;
}

.header-links {
font-size: 13px;
padding: 6px 12px;
}
}

/* Scroll to Top */
.scrollTop {
  display: none; /* Hidden by default */
  position: fixed; /* Fixed/sticky position */
  bottom: 20px; /* Place the button at the bottom of the page */
  right: 30px; /* Place the button 30px from the right */
  z-index: 99; /* Make sure it does not overlap */
  border: none; /* Remove borders */
  outline: none; /* Remove outline */
  background-color: black; /* Set a background color */
  color: white; /* Text color */
  cursor: pointer; /* Add a mouse pointer on hover */
  padding: 15px; /* Some padding */
  border-radius: 10px; /* Rounded corners */
  font-size: 18px; /* Increase font size */
}

a{

text-decoration:none;

color:inherit;

transition:color 0.25s ease, opacity 0.25s ease;

}

a:hover{
color:var(--brand);
}

::selection{
background:rgba(43, 95, 135, 0.2);
color:var(--ink);

}