:root {
      --bg-color: #1e1e1e;
      --text-color: #e0e0e0;
      --accent-color: #4db8ff;
      --card-color: #2c2c2c;
    }

    body {
      margin: 0;
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background-color: var(--bg-color);
      color: var(--text-color);
      line-height: 1.6;
    }

    .container {
      max-width: 900px;
      margin: 0 auto;
      padding: 2rem;
    }

    h1, h2 {
      color: var(--accent-color);
    }

    a {
      color: var(--accent-color);
      text-decoration: none;
    }

    a:hover {
      text-decoration: underline;
    }

    ul {
      padding-left: 1.5rem;
    }

    .card {
      background-color: var(--card-color);
      padding: 2rem;
      border-radius: 12px;
      box-shadow: 0 0 10px rgba(0,0,0,0.4);
    }

    @media (max-width: 600px) {
      .container {
        padding: 1rem;
      }
    }