html {
    scroll-behavior: smooth;
}
body {
    font-family: 'IBM Plex Mono', monospace;
    background-color: #111827; 
    transition: background-color 0.5s;
}
.font-pixel {
    font-family: 'Press Start 2P', cursive;
}
.pixel-border {
    border: 4px solid #4f4f4f;
    border-image: url('data:image/svg+xml;charset=utf-8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><style>path{stroke:rgb(130,255,255);stroke-width:12;}</style><path d="M0 0h100M0 0v100M100 0v100M0 100h100"/></svg>') 12 / 12px 12px 12px 12px stretch;
    position: relative;
    background-clip: padding-box; 
    transition: border-image 0.5s;
}

::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: #111827;
}
::-webkit-scrollbar-thumb {
    background: #0891b2; 
    border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #06b6d4; 
}

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.theme-matrix {
    --main-color: #39FF14; 
    --accent-color: #BBFFBB; 
    --bg-color: #0D0208; 
    --card-bg-color: #0a0a0a;
    --header-bg: #111111;
    --text-primary: #E5E5E5;
    --text-secondary: #A0A0A0;
}

.theme-matrix {
    background-color: var(--bg-color) !important;
    color: var(--text-primary) !important;
}
.theme-matrix header {
    background-color: var(--header-bg) !important;
    border-bottom: 1px solid var(--main-color);
}
.theme-matrix nav a {
    color: var(--text-secondary);
}
.theme-matrix nav a:hover {
    color: var(--main-color);
}
.theme-matrix .text-cyan-400,
.theme-matrix .text-cyan-500 { color: var(--main-color) !important; }
.theme-matrix .text-fuchsia-400 { color: var(--accent-color) !important; }
.theme-matrix .bg-gray-800 { background-color: var(--card-bg-color) !important; }
.theme-matrix .bg-gray-900 { background-color: #000000 !important; }
.theme-matrix .text-gray-300 { color: var(--text-primary) !important; }
.theme-matrix .text-gray-400 { color: var(--text-secondary) !important; }
.theme-matrix .bg-fuchsia-500,
.theme-matrix .bg-cyan-600 { background-color: var(--main-color) !important; color: var(--bg-color) !important; }
.theme-matrix .bg-fuchsia-500:hover,
.theme-matrix .bg-cyan-600:hover { background-color: var(--accent-color) !important; }
.theme-matrix .pixel-border {
    border-image: url('data:image/svg+xml;charset=utf-8,<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg"><style>path{stroke:rgb(57,255,20);stroke-width:12;}</style><path d="M0 0h100M0 0v100M100 0v100M0 100h100"/></svg>') 12 / 12px 12px 12px 12px stretch;
}