/* Cheat Sheet CSS Styles 
🧰 The Core CSS Properties
1. Text & Fonts
- color → text color
- font-size → size of text (16px, 1.2rem)
- font-family → which font to use (Arial, sans-serif)
- font-weight → thickness (normal, bold, 600)
- text-align → alignment (left, center, right)

2. Box Model (Spacing & Borders)
- margin → space outside an element
- padding → space inside an element
- border → line around an element (1px solid black)
- width / height → size of the box
👉 These four are the “box model” — the foundation of CSS layout.

3. Backgrounds
- background-color → fill color behind text/box
- background-image → add an image as background

4. Layout & Positioning
- display → how an element behaves (block, inline, flex, grid)
- position → how it’s placed (static, relative, absolute, fixed, sticky)
- top, right, bottom, left → offsets when using position
- z-index → stack order (which element is “on top”)

5. Flexbox Basics (modern layout)
- display: flex; → turns a container into a flexbox
- justify-content → horizontal alignment (flex-start, center, space-between)
- align-items → vertical alignment (flex-start, center, flex-end)

Mini example:
body {
  font-family: Arial, sans-serif;    text font
  font-size: 16px;                   text size
  color: #333;                       text color
  background-color: #f9f9f9;         page background
  margin: 0;                         remove default spacing
  padding: 0;
}
header {
  display: flex;                     flexbox layout
  justify-content: space-between;    logo left, nav right
  align-items: center;               vertical centering
  padding: 1em;
  background-color: #1e1e1e;
  color: white;
}

Layout Tips:
- Flexbox: great for distributing items along a single axis (navbars, button groups, toolbars).
- Grid: great for defining structured areas (hero sections, galleries, dashboards)
*/

/* VS Code theme for the logo and code slogan */
.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 */
}