/* Root variables for colors */
:root {
    --bg-color-light: #fffff8;
    --bg-color-dark: #1f1f1f;
    --text-color-light: #111;
    --text-color-dark: #ddd;
    --link-color-light: #951100;
    --link-color-dark: #ddd;
    --link-decoration-light: none;
    --link-decoration-dark: underline;
}

/* Default light mode */
body {
    background-color: var(--bg-color-light);
    color: var(--text-color-light);
    transition: background-color 0.3s, color 0.3s;
}

/* Dark mode */
body.dark-mode {
    background-color: var(--bg-color-dark);
    color: var(--text-color-dark);
}

/* Links */
.links {
    display: flex;
    align-items: center;
    gap: 20px;
}

.links a {
    font-size: 24px;
    color: inherit;  /* This will make the color match the parent text color */
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: opacity 0.3s, transform 0.3s ease;
}

.links a:hover {
    opacity: 0.7;
    transform: scale(1.2);
}

.links .cv-link {
    font-size: 18px;
    font-weight: bold;
}

/* Mode toggle button */
#mode-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 24px;
    color: inherit;
    padding: 0;
    margin-left: 20px;
}

#mode-toggle:hover {
    opacity: 0.7;
}

/* Links styling based on theme (for links outside .links) */
a:not(.links a) {
    color: var(--link-color-light);
    text-decoration: var(--link-decoration-light);
    transition: color 0.3s, text-decoration 0.3s;
}

body.dark-mode a:not(.links a) {
    color: var(--link-color-dark);
    text-decoration: var(--link-decoration-dark);
}