:root {
    --bg-light: #fdfdfd;
    --text-light: #222;
    --bg-dark: #1e1e1e;
    --text-dark: #eee;
    --accent: #8be9fd;
    --purple: #bd93f9;
    --green: #50fa7b;
    --font: 'Segoe UI', sans-serif;
  }
  
  body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    background-color: var(--bg-light);
    color: var(--text-light);
    transition: background-color 0.3s, color 0.3s;
  }
  
  .dark-mode {
    background-color: var(--bg-dark);
    color: var(--text-dark);
  }
  
  header {
    text-align: center;
    padding: 2em 1em;
    border-bottom: 2px solid var(--accent);
  }
  
  header .profile-pic {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 3px solid var(--green);
    object-fit: cover;
    margin-bottom: 1em;
  }
  
  .links a {
    margin: 0 0.5em;
    color: var(--purple);
    text-decoration: none;
  }
  
  #theme-switch-container {
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 10000;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4px;
  }
  
  .slider-toggle {
    width: 48px;
    height: 26px;
    background: #ccc;
    border-radius: 26px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    outline: none;
    display: flex;
    align-items: center;
    border: 2px solid rgba(0, 0, 0, 0.1);
  }
  .slider-toggle::before {
    content: '';
    position: absolute;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.2);
  }
  .slider-toggle.dark {
    background: #222;
  }
  .slider-toggle.dark::before {
    transform: translateX(22px);
  }
  
  .slider-toggle:focus {
    box-shadow: 0 0 0 2px #80cbc4;
  }
  
  main {
    max-width: 800px;
    margin: auto;
    padding: 2em 1em;
  }
  
  section {
    margin-bottom: 2em;
  }
  
  blockquote {
    font-style: italic;
    border-left: 4px solid var(--accent);
    margin: 1em 0;
    padding-left: 1em;
  }
  
  /* Blog styles */
  .blog-list {
    max-width: 800px;
    margin: 0 auto;
  }

  .blog-preview {
    background: var(--card-bg, #fff);
    border-radius: 8px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    color: inherit; /* Ensure text color is inherited */
  }

  .dark-mode .blog-preview h3 {
    color: var(--text-light);
  }

  .blog-preview h3 {
    color: var(--text-light);
    margin-top: 0;
  }

  .blog-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }

  .post-date {
    color: #666;
    font-size: 0.9em;
    margin: 0.5rem 0;
  }

  .post-excerpt {
    color: #444;
    margin: 1rem 0;
  }

  .read-more {
    display: inline-block;
    color: var(--accent, #4a90e2);
    text-decoration: none;
    font-weight: 500;
    margin-top: 0.5rem;
  }

  /* Markdown content styling */
  .markdown-content {
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
    color: var(--text-color, #333);
  }

  .markdown-content h1,
  .markdown-content h2,
  .markdown-content h3,
  .markdown-content h4,
  .markdown-content h5,
  .markdown-content h6 {
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    line-height: 1.3;
    color: var(--heading-color, #222);
  }

  .markdown-content h1 { font-size: 2.2em; }
  .markdown-content h2 { font-size: 1.8em; }
  .markdown-content h3 { font-size: 1.5em; }
  .markdown-content h4 { font-size: 1.3em; }
  .markdown-content h5 { font-size: 1.1em; }
  .markdown-content h6 { font-size: 1em; }

  .markdown-content p {
    margin: 1.2em 0;
  }

  .markdown-content a {
    color: var(--accent, #4a90e2);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s;
  }

  .markdown-content a:hover {
    border-bottom-color: currentColor;
  }

  .markdown-content code {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    background: var(--code-bg, #f5f5f5);
    padding: 0.2em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
  }

  .markdown-content pre {
    background: var(--code-bg, #282c34);
    border-radius: 6px;
    padding: 1.2em;
    overflow-x: auto;
    margin: 1.5em 0;
    line-height: 1.5;
  }

  .markdown-content pre code {
    background: transparent;
    padding: 0;
    color: var(--code-color, #abb2bf);
  }

  .markdown-content blockquote {
    border-left: 4px solid var(--accent, #4a90e2);
    margin: 1.5em 0;
    padding: 0.5em 1em;
    color: var(--blockquote-color, #666);
    background: var(--blockquote-bg, rgba(74, 144, 226, 0.05));
    font-style: italic;
  }

  .markdown-content ul,
  .markdown-content ol {
    padding-left: 1.5em;
    margin: 1.2em 0;
  }

  .markdown-content li {
    margin: 0.5em 0;
  }

  .markdown-content img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin: 1.5em 0;
  }

  .markdown-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    overflow-x: auto;
    display: block;
  }

  .markdown-content th,
  .markdown-content td {
    padding: 0.75em;
    border: 1px solid var(--table-border, #ddd);
    text-align: left;
  }

  .markdown-content th {
    background: var(--table-header-bg, #f5f5f5);
    font-weight: 600;
  }

  .markdown-content tr:nth-child(even) {
    background: var(--table-row-even, #f9f9f9);
  }

  /* Dark mode adjustments */
  .dark-mode .markdown-content {
    --text-color: #e0e0e0;
    --heading-color: #ffffff;
    --code-bg: #2d2d2d;
    --code-color: #f8f8f2;
    --blockquote-color: #cccccc;
    --blockquote-bg: rgba(255, 255, 255, 0.05);
    --table-border: #444;
    --table-header-bg: #2a2a2a;
    --table-row-even: #2d2d2d;
  }

  /* Back button */
  .back-button {
    display: inline-flex;
    align-items: center;
    background: var(--button-bg, #f0f0f0);
    color: var(--button-text, #333);
    border: 1px solid var(--button-border, #ddd);
    border-radius: 4px;
    padding: 0.5em 1em;
    font-size: 0.95em;
    cursor: pointer;
    margin-bottom: 1.5em;
    transition: background 0.2s, border-color 0.2s;
  }

  .back-button:hover {
    background: var(--button-hover-bg, #e0e0e0);
    border-color: var(--button-hover-border, #ccc);
  }

  .dark-mode .back-button {
    --button-bg: #333;
    --button-text: #f0f0f0;
    --button-border: #444;
    --button-hover-bg: #444;
    --button-hover-border: #555;
  }