/* Apply box-sizing universally to prevent width overflow bugs */
*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Color Palette */
    --primary-background: #ffffff;
    --primary-blue: #56baf1;
    --secondary-blue: #2b68e2;
    --light-gray: #515151;
    --dark-gray: #303131;
    --black: #000000;
    --grid-line: #e5e5e5;
    --card-bg: #ffffff;
}

body.dark-mode, html.dark-mode {
    --primary-background: #141414;
    --light-gray: #cccccc;
    --dark-gray: #e0e0e0;
    --black: #ffffff;
    --grid-line: #333333;
    --card-bg: #1e1e1e;
}

/* Smooth Transition for all color changes */
body, header, nav, .project-card, .proj-card, a, h1, h2, h3, p, i, strong, div, button {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}