:root {
    --bg-color: #f3fff5;
    --text-color: #1f4f33;
    --accent-color: #2e8b57;
    --button-text: #2e8b57;
    --button-bg-hover: #e8fff0;
    --top-bar-bg: #2e8b57;
    --toggle-bg: rgba(255, 255, 255, 0.8);
}

.dark-mode {
    --bg-color: #0f1a13;
    --text-color: #d7ffe5;
    --accent-color: #66d19e;
    --button-text: #0f1a13;
    --button-bg-hover: #a6f5cd;
    --top-bar-bg: #143726;
    --toggle-bg: rgba(20, 30, 25, 0.8);
}

/* Apply variables to html and body so entire page changes */
html, body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background 0.3s, color 0.3s;
    height: 100%;
}

/* Canvas behind everything */
#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    transition: background 0.3s;
}

/* Top bar */
.top-bar {
    width: 100%;
    padding: 1rem 1.5rem;
    background-color: var(--top-bar-bg);
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    transition: background 0.3s;
}

/* Login button */
.login-btn {
    padding: 0.6rem 1.2rem;
    background-color: #ffffff;
    color: var(--button-text);
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s ease-in-out, color 0.3s;
}

.login-btn:hover {
    background-color: var(--button-bg-hover);
}

/* Headings */
h1 {
    text-align: center;
    font-size: clamp(2rem, 5vw, 4rem);
    margin-top: 2.5rem;
}

/* Contact section */
.contact {
    margin: 2.5rem auto;
    width: 90%;
    max-width: 600px;
    text-align: center;
}

.contact h2 {
    color: var(--accent-color);
    font-size: clamp(1.5rem, 4vw, 2rem);
}

.contact p {
    font-size: clamp(0.9rem, 2.5vw, 1.2rem);
}

/* Personal use note */
.personal-use-note {
    text-align: center;
    font-size: clamp(0.7rem, 2vw, 0.9rem);
    color: gray;
    margin: 2.5rem 0;
}

/* Theme toggle */
.theme-toggle {
    position: fixed;
    bottom: 1.25rem;
    left: 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    cursor: pointer;
    user-select: none;
    font-size: 1rem;
    background: var(--toggle-bg);
    padding: 0.5rem 1rem;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    transition: background 0.3s;
}

.toggle-switch {
    width: 2.5rem;
    height: 1.2rem;
    background: var(--accent-color);
    border-radius: 20px;
    position: relative;
    transition: 0.3s;
}

.toggle-ball {
    width: 1.1rem;
    height: 1.1rem;
    background: white;
    border-radius: 50%;
    position: absolute;
    top: 0.05rem;
    left: 0.05rem;
    transition: 0.3s;
}

/* Toggle ball moves in dark mode */
.dark-mode .toggle-ball {
    left: 1.35rem;
}

/* Responsive */
@media (max-width: 600px) {
    .top-bar { padding: 1rem; }
    .login-btn { padding: 0.5rem 1rem; font-size: 0.9rem; }
    h1 { margin-top: 2rem; }
    .theme-toggle { font-size: 0.9rem; padding: 0.4rem 0.8rem; }
}