@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Newsreader:ital,wght@0,600;1,400&display=swap');

body {
    background: linear-gradient(135deg, #16181d 85%, #1c2732 100%);
    color: #e6e7ec;
    font-family: 'DM Mono', 'Newsreader', 'Georgia', serif;
    margin: 0; padding: 0;
    min-height: 100vh;
    letter-spacing: 0.02em;
}

nav {
    background: rgba(30,38,50,0.98);
    padding: 1.3em 0 1.1em 0;
    text-align: center;
    border-bottom: 2.5px solid #3a3c4d;
    box-shadow: 0 2px 18px #0007;
}

.nav-btn {
    background: #23282f;
    color: #adc6d6;
    border: 1.5px solid #444956;
    padding: 0.68em 2.1em;
    margin: 0 1.5em;
    border-radius: 8px;
    font-size: 1.05em;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.09em;
    cursor: pointer;
    position: relative;
    box-shadow: 0 1.5px 8px #0006;
    transition: background 0.18s, color 0.18s, border 0.18s;
    outline: none;
}

.nav-btn:hover, .nav-btn.active {
    background: #3e5263;
    color: #e5e8ee;
    border-color: #8bafba;
}

main {
    max-width: 590px;
    margin: 4em auto 0 auto;
    text-align: center;
    background: rgba(29, 34, 41, 0.90);
    border-radius: 18px;
    box-shadow: 0 3px 32px #0008;
    padding: 2.7em 1.7em 2em 1.7em;
}

h1 {
    font-family: 'Newsreader', serif;
    font-size: 2.65em;
    margin: 0.2em 0 0.1em 0;
    font-weight: 600;
    letter-spacing: 0.12em;
    color: #ebf0f7;
    text-shadow: 0 2px 16px #1e3140a0;
}
.subtitle {
    font-size: 0.5em;
    letter-spacing: 0.15em;
    color: #79b7b8;
    font-weight: 400;
    margin-left: 0.2em;
}

.deck {
    margin: 0.5em 0 2.6em 0;
    font-size: 1.13em;
    color: #d3e3e9;
    font-family: 'DM Mono', monospace;
}
.slang {
    font-size: 0.94em;
    color: #8aabb2;
    letter-spacing: 0.07em;
    text-shadow: 0 0.5px 6px #2228;
}

.about, .contact {
    margin-bottom: 2.1em;
    background: rgba(24, 28, 37, 0.83);
    padding: 1.2em 1.3em;
    border-radius: 10px;
    box-shadow: 0 1px 8px #14282c55;
    border-left: 3.5px solid #437883;
}

a.flicker {
    color: #00c9ff;
    border-bottom: 1.5px dashed #d6faff;
    text-shadow: 0 0 6px #00c9ff7d, 0 0 1.5px #83ebff;
    animation: flicker 1.8s infinite alternate;
    transition: border-color 0.19s;
}
a.flicker:hover {
    color: #fff;
    border-bottom: 1.5px solid #00e8e8;
}
@keyframes flicker {
    0%   { opacity: 1;   text-shadow: 0 0 6px #00c9ff9d;}
    25%  { opacity: 0.93;}
    37%  { opacity: 1; }
    45%  { opacity: 0.89; text-shadow: 0 0 5px #2cf3fd40;}
    60%  { opacity: 1;}
    70%  { opacity: 0.95; text-shadow: 0 0 7px #b2f8ff;}
    100% { opacity: 1;}
}

.noir-block {
    background: linear-gradient(93deg, #161b1d 88%, #20333e 100%);
    color: #b9e1ea;
    margin: 2.5em auto 1.2em auto;
    padding: 1.4em 1em 1.1em 1em;
    border-radius: 7px;
    font-size: 1.16em;
    box-shadow: 0 1px 12px #08353b5c;
    font-family: 'DM Mono', monospace;
    letter-spacing: 0.01em;
    border-left: 3.5px solid #95b3c1;
}

footer {
    text-align: center;
    color: #7ca3c7;
    font-size: 0.95em;
    margin-top: 4.5em;
    padding-bottom: 1.7em;
    font-family: 'DM Mono', monospace;
}
.gulf { color: #55e3df; letter-spacing: 0.09em; }
.dimes { color: #ffc866; }
.neo { color: #96bbf1; }