/* Reusable topbar and footer styles */
.topbar {
  display: flex;
  justify-content: space-between; /* logo left, nav right */
  align-items: center;
  padding: 0.5rem 0.8rem;
  background: #1e1e1e;
  border-bottom: 2px solid #777777;
  position: sticky;
  top: 0;
  z-index: 1000; /* Ensure it stays above other content */
}
.logo {
  font-family: "JetBrains Mono", Consolas, "Courier New", monospace;
  font-size: 1rem;
  background: #1e1e1e;
  padding: 0.5em 0.8em;
  border-radius: 6px;
  white-space: nowrap; /* keep all text on one line */
}
.navigation_bar {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1rem;
  padding: 0.5em 0.8em;
  border-radius: 6px;
}
footer {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 1.2rem; /* spacing between cells */
  width: 100%; /* take full width of container */
  max-width: 1340px; /* or whatever looks good on desktop */
  margin: 0 auto; /* center horizontally */
  align-items: baseline;
  white-space: nowrap;
}
.bottom_nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr; /* 5 columns */
  padding: 1.2rem 4rem;
  border-radius: 6px;
  gap: 4rem; /* spacing between cells */
  font-size: 80%;
}
hr {
  border: 1px solid #777777;
  margin: 4rem 0;
}

/* utility classes for lists */
.single_list {
  display: grid;
  grid-template-columns: 1fr; /* 1 column */
  gap: 1.2rem; /* spacing between cells */
  width: 100%; /* take full width of container */
  max-width: 1340px; /* or whatever looks good on desktop */
  margin: 0 auto; /* center horizontally */
  align-items: center;
}
.single_heading {
  padding: 1.2rem 4rem;
  border-radius: 6px;
  white-space: nowrap;
}
.single_item {
  padding: 0rem 0rem 0rem 4rem;
  border-radius: 6px;
}
.double_list {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns */
  gap: 1.2rem; /* spacing between cells */
  width: 100%; /* take full width of container */
  max-width: 1340px; /* or whatever looks good on desktop */
  margin: 0 auto; /* center horizontally */
}
.double_heading {
  padding: 1.2rem 4rem;
  border-radius: 6px;
  white-space: nowrap;
}
.double_item {
  padding: 1.2rem 4rem;
  border-radius: 6px;
}
/* Global font and color settings */
body,
.libre-baskerville-regular {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: normal;
  color: #c7c7c7;
  background: #1f2123;
}
.libre-baskerville-bold {
  font-family: "Libre Baskerville", serif;
  font-weight: 700;
  font-style: normal;
}
.libre-baskerville-regular-italic {
  font-family: "Libre Baskerville", serif;
  font-weight: 400;
  font-style: italic;
}
/* Syntax highlighting for Python code snippets */
.comment {
  color: #6a9955;
}
.keyword {
  color: #c586c0; /* Python keyword color - purple */
}
.module {
  color: #4ec9b0; /* Python module/library color */
}
.alias {
  color: #4ec9b0;
}
.function {
  color: #dcdcaa; /* Python function color */
}
.string {
  color: #ce9178;
}
.variable {
  color: #9cdcfe; /* Python variable color - light blue */
}
.def {
  color: #569cd6;
}
.bracket {
  color: #ffff00;
}
/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .layout-container {
    padding: 0.8rem 0.8rem 0.8rem 0.5rem;
  }
  .logo {
    font-size: 0.9rem;
    padding: 0.8em 0.8rem 0.8rem 0.5rem;
  }
  .double_list {
    grid-template-columns: 1fr; /* stack vertically */
    padding: 0.8rem 0.8rem 0.8rem 0.5rem;
  }
  .double_item {
    padding: 0.8rem 0.8rem 0.8rem 1rem;
  }
  footer {
    grid-template-columns: 1fr; /* stack vertically */
    padding: 0.8rem 0.8rem 0.8rem 0.5rem;
  }
  .copyright {
    /* put it at the end instead of the beginning */
    order: 2;
    padding: 0.8rem 0.8rem 4rem 0.5rem;
  }
  .bottom_nav {
    grid-template-columns: 1fr; /* stack vertically */
    padding: 0.8rem 0.8rem 0.8rem 0.5rem;
    gap: 0.8rem;
  }
  hr {
    margin: 1rem 0;
  }
}
.patreon-link {
  display: inline-block; /* change "a" element from inline element to inline-block */
  color: #fff;
  background: linear-gradient(135deg, #69ffcd, #2b8de2);
  padding: 0.5em 1em;
  border-radius: 999px;
  font-weight: 600;
  box-shadow: 0 0 10px rgba(105, 145, 255, 0.4);
  text-decoration: none;
  transition: transform 0.2s ease;
  white-space: nowrap;
  text-align: center;
}

.patreon-link:hover {
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(105, 145, 255, 0.6);
}

.onlyfans-link {
  display: inline-block; /* change "a" element from inline element to inline-block */
  color: #fff; /* white text */
  background: linear-gradient(
    135deg,
    #ff69b4,
    #8a2be2
  ); /* pink to purple gradient */
  padding: 0.5em 1em; /* space inside the box */
  border-radius: 999px; /* fully rounded corners */
  font-weight: 600; /* semi-bold text */
  box-shadow: 0 0 10px rgba(255, 105, 180, 0.4); /* subtle pink glow */
  text-decoration: none; /* remove underline */
  transition: transform 0.2s ease; /* smooth scaling on hover */
  white-space: nowrap; /* prevent text wrapping */
  text-align: center; /* center text */
}

.onlyfans-link:hover {
  transform: scale(1.05); /* slightly enlarge on hover */
  box-shadow: 0 0 12px rgba(255, 105, 180, 0.6); /* stronger pink glow on hover */
}

a:not(:has(img)) {
  color: #58a6ff; /* GitHub link blue */
  background-color: #2d2d2d; /* gray box background */
  padding: 0.2em 0.4em; /* space inside the box */
  border-radius: 4px; /* rounded corners */
  text-decoration: none; /* remove underline */
}
a:not(:has(img)):hover {
  background-color: #3a3a3a; /* darker gray on hover */
  text-decoration: underline; /* optional hover underline */
}
a:not(:has(img)), /* Apply to all links, buttons, nav items */
button,
.navigation_bar a {
  transition: all 0.1s ease; /* property | duration | timing-function */
}