:root {
    --primary: #fdf6f6;    /* Soft White for text */
    --accent: #A47864;     /* Mocha */
    --jade: #AEB784;       /* Jade Accent */
    --bg: #1e1e1e;         /* Deep Charcoal Background */
    --card: #2d2d2d;       /* Slightly lighter gray for the boxes */
}

body { 
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
    margin: 0; 
    background: var(--bg); 
    color: var(--primary); 
    line-height: 1.6; 
}

nav { 
    background: #121212; 
    padding: 25px; 
    display: flex; 
    justify-content: center; 
    border-bottom: 1px solid #333; 
    position: sticky; 
    top: 0; 
    z-index: 100; 
}

nav a { 
    text-decoration: none; 
    color: var(--primary); 
    font-weight: bold; 
    font-size: 0.85rem; 
    text-transform: uppercase; 
    margin: 0 20px; 
    letter-spacing: 1px; 
    transition: 0.3s;
}

nav a:hover { color: var(--jade); }

.container { 
    max-width: 900px; 
    margin: 60px auto; 
    padding: 40px; 
    background: var(--card); 
    border-radius: 12px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.5); 
}

h1, h2 { color: var(--jade); margin-top: 0; }

footer { 
    background: #121212; 
    color: #888; 
    padding: 60px 20px; 
    text-align: center; 
    margin-top: 80px; 
}

.footer-addr { 
    font-size: 0.8rem; 
    opacity: 0.6; 
    margin-top: 25px; 
    border-top: 1px solid #333; 
    padding-top: 20px; 
}

.btn { 
    background: var(--jade); 
    color: #121212; 
    padding: 14px 35px; 
    border-radius: 4px; 
    text-decoration: none; 
    display: inline-block; 
    font-weight: bold; 
}

.btn:hover { background: var(--accent); color: white; }

/* Styles for the 9-calculator list */
ul { 
    column-count: 2; 
    column-gap: 40px; 
    list-style-type: '⚡ '; 
    text-align: left; 
    display: inline-block; 
    color: #ccc;
}