/* Clean, readable font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&display=swap');

body {
    margin: 0;
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
    color: #000000;
    line-height: 1.6;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 20px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

body.dark {
    background-color: #000000;
    color: #ffffff;
}

.theme-toggle {
    position: fixed;
    top: 20px;
    right: 20px;
    background: none;
    border: 1px solid #999;
    color: #666;
    padding: 10px 14px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9em;
    transition: all 0.2s ease;
}

.theme-toggle:hover {
    border-color: #0066cc;
    color: #0066cc;
}

body.dark .theme-toggle {
    border-color: #666;
    color: #999;
}

body.dark .theme-toggle:hover {
    border-color: #ffffff;
    color: #ffffff;
}

body.dark h1, body.dark h2, body.dark h3, body.dark p { color: #ffffff; }
body.dark h3 { color: #999; }
body.dark .subtitle { color: #999; }
body.dark p { color: #e0e0e0; }
body.dark .status { background-color: #111111; border-left: 4px solid #0066cc; color: #ffffff; }

h1 { font-size: 2.5em; margin-bottom: 0.2em; font-weight: 300; }
h2 { font-size: 1.2em; margin: 2em 0 1em 0; font-weight: 500; }
h3 { font-size: 1.1em; margin: 1.5em 0 0.5em 0; font-weight: 500; color: #666; }
p { font-size: 1em; margin-bottom: 1em; color: #222; }

a { color: #0066cc; text-decoration: none; transition: color 0.2s ease; }
a:hover { color: #0052a3; text-decoration: underline; }
body.dark a { color: #4da6ff; }
body.dark a:hover { color: #66b3ff; }

.subtitle { color: #666; font-size: 1.1em; margin-bottom: 2em; }
.tech-stack { color: #666; font-size: 0.95em; margin: 1em 0; display: flex; flex-wrap: wrap; gap: 0.5em; }
.tech-stack img { height: 28px; }
.links-section { display: flex; flex-wrap: wrap; gap: 0.5em; margin: 1em 0; }
.links-section a { text-decoration: none; }
.links-section img { height: 28px; transition: transform 0.2s ease; }
.links-section a:hover img { transform: translateY(-3px); }

.status {
    background-color: #f8f9ff;
    border-left: 4px solid #0066cc;
    padding: 16px 20px;
    margin: 2em 0;
    font-style: italic;
    border-radius: 0 8px 8px 0;
}

/* Better scrolling and selection */
::selection { background-color: #0066cc; color: #ffffff; }
body.dark ::selection { background-color: #4da6ff; color: #000000; }

@media (max-width: 600px) {
    body { padding: 20px 15px; }
    h1 { font-size: 2em; }
}