/* Terminal/Coder Theme */
.post-title {
    color: #00FFCC !important;
    font-size: 2.5em !important;
    position: relative !important;
    text-shadow: 0 0 15px rgba(0, 255, 204, 0.5) !important;
    animation: electric-glow 2s infinite !important;
}

/* Posts */
.post-content pre,
.post-content code {
    background: #1a1a1a !important;
    color: #33FF66 !important;
    padding: 15px !important;
    border: 1px solid #333333 !important;
    border-radius: 5px !important;
    font-family: 'JetBrains Mono', 'Fira Code', monospace !important;
    position: relative !important;
    overflow: hidden !important;
    animation: electric-surge 3s infinite ease-in-out !important;
}

.post-content pre::before,
.post-content code::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(51, 255, 102, 0.2),
        transparent
    ) !important;
    animation: electric-scan 3s infinite linear !important;
    animation: electric-glow 2s infinite ease-in-out !important;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.5),
                    0 0 20px rgba(0, 255, 204, 0.3),
                    0 0 30px rgba(0, 255, 204, 0.1) !important;
    }

/* Terminal/Coder Theme with Electric Effects */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* Core Styles */
/* Terminal/Coder Theme with Electric Effects */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

/* Base Electric Animations */
@keyframes electric-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes electric-glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(51, 255, 102, 0.5),
                    0 0 20px rgba(51, 255, 102, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(51, 255, 102, 0.8),
                    0 0 30px rgba(51, 255, 102, 0.5);
    }
}

@keyframes electric-scan {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Core Styles */
body {
    background-color: #000000 !important;
    color: #FFFFFF !important;
    font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !important;
    line-height: 1.6 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Base Electric Animations */
@keyframes electric-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

@keyframes electric-glow {
    0%, 100% {
        text-shadow: 0 0 10px rgba(51, 255, 102, 0.5),
                    0 0 20px rgba(51, 255, 102, 0.3);
    }
    50% {
        text-shadow: 0 0 20px rgba(51, 255, 102, 0.8),
                    0 0 30px rgba(51, 255, 102, 0.5);
    }
}

/* Layout */
.wrapper {
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 2rem !important;
}

/* Site Header */
.site-header {
    border-top: 5px solid #00FFCC !important;
    border-bottom: 1px solid #333333 !important;
    background: #111111 !important;
    box-shadow: 0 0 20px rgba(51, 255, 102, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
}

.site-header::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 200% !important;
    height: 100% !important;
    background: linear-gradient(90deg, 
        transparent 0%,
        rgba(51, 255, 102, 0.1) 50%,
        transparent 100%
    ) !important;
    animation: electric-scan 3s infinite linear !important;
}

.site-header .site-title {
    position: relative !important;
    color: #33FF66 !important;
    text-shadow: 0 0 10px rgba(51, 255, 102, 0.5) !important;
    animation: electric-glow 2s infinite !important;
    z-index: 1 !important;
}

/* Site Header */
.site-header {
    border-top: 5px solid #00FFCC !important;
    border-bottom: 1px solid #333333 !important;
    background: #111111 !important;
    box-shadow: 0 0 20px rgba(51, 255, 102, 0.3) !important;
    position: relative !important;
}

.site-header::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: linear-gradient(90deg, transparent, rgba(51, 255, 102, 0.1), transparent) !important;
    animation: electric-pulse 2s infinite !important;
}

.site-header .site-title {
    position: relative !important;
    color: #33FF66 !important;
    text-shadow: 0 0 10px rgba(51, 255, 102, 0.5) !important;
    animation: electric-glow 2s infinite !important;
    z-index: 1 !important;
}

.site-header .site-title {
    animation: electric-glow 2s infinite ease-in-out !important;
    color: #33FF66 !important;
    text-shadow: 0 0 10px rgba(51, 255, 102, 0.5),
                 0 0 20px rgba(51, 255, 102, 0.3),
                 0 0 30px rgba(51, 255, 102, 0.1) !important;
}

/* Post Styling */
.post-title {
    color: #00ffff !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8) !important;
    font-size: 2.5em !important;
}

.post-meta {
    color: #00ff9f !important;
    font-size: 0.9em !important;
    margin-bottom: 2em !important;
}

.post-content {
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 25px !important;
    border: 1px solid #00ccff !important;
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.2) !important;
    margin-top: 20px !important;
}

.post-content h2, 
.post-content h3, 
.post-content h4 {
    color: #00FFCC !important;
    animation: electric-glow 2s infinite ease-in-out !important;
    text-shadow: 0 0 10px rgba(0, 255, 204, 0.5),
                 0 0 20px rgba(0, 255, 204, 0.3),
                 0 0 30px rgba(0, 255, 204, 0.1) !important;
}

.post-content a {
    color: #33FF66 !important;
    text-decoration: none !important;
    transition: all 0.2s ease-out !important;
    position: relative !important;
}

.post-content a:hover {
    color: #00CC99 !important;
    text-shadow: 0 0 10px rgba(51, 255, 102, 0.3) !important;
}

/* Code Blocks in Posts */
.post-content pre,
.post-content code {
    background: #1a1a1a !important;
    color: #00ff9f !important;
    padding: 15px !important;
    border: 1px solid #00ccff !important;
    border-radius: 5px !important;
    font-family: 'Courier New', monospace !important;
}

/* Blockquotes in Posts */
.post-content blockquote {
    border-left: 4px solid #00ccff !important;
    padding-left: 20px !important;
    margin: 20px 0 !important;
    font-style: italic !important;
    background: rgba(0, 204, 255, 0.05) !important;
    color: #00ff9f !important;
}


/* Post Styling */
.post-title {
    color: #00ffff !important;
    text-shadow: 0 0 15px rgba(0, 255, 255, 0.8) !important;
    font-size: 2.5em !important;
}

.post-meta {
    color: #00ff9f !important;
    font-size: 0.9em !important;
    margin-bottom: 2em !important;
}

.post-content {
    background: rgba(0, 0, 0, 0.8) !important;
    padding: 25px !important;
    border: 1px solid #00ccff !important;
    box-shadow: 0 0 20px rgba(0, 204, 255, 0.2) !important;
    margin-top: 20px !important;
}

.post-content h2, .post-content h3, .post-content h4 {
    color: #00ccff !important;
    text-shadow: 0 0 10px rgba(0, 204, 255, 0.7) !important;
}

.post-content a {
    color: #00ffff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.5) !important;
}

.post-content a:hover {
    color: #ff00ff !important;
    text-shadow: 0 0 10px rgba(255, 0, 255, 0.8) !important;
}

/* Code Blocks in Posts */
.post-content pre,
.post-content code {
    background: #1a1a1a !important;
    color: #00ff9f !important;
    padding: 15px !important;
    border: 1px solid #00ccff !important;
    border-radius: 5px !important;
    font-family: 'Courier New', monospace !important;
}

/* Blockquotes in Posts */
.post-content blockquote {
    border-left: 4px solid #00ccff !important;
    padding-left: 20px !important;
    margin: 20px 0 !important;
    font-style: italic !important;
    background: rgba(0, 204, 255, 0.05) !important;
    color: #00ff9f !important;
}
/* Site Navigation */


.site-title, .site-title:visited {
    color: #00ccff !important;
    text-transform: uppercase !important;
    letter-spacing: 3px !important;
    font-weight: bold !important;
}

.site-nav .page-link {
    color: #00ff9f !important;
    text-transform: uppercase !important;
}

a {
    color: #00ccff !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

a:hover {
    color: #ff00ff !important;
    text-shadow: 0 0 8px #ff00ff !important;
}

.post-list li {
    border: 1px solid #00ccff !important;
    margin-bottom: 20px !important;
    padding: 15px !important;
    background-color: rgba(0, 204, 255, 0.05) !important;
    transition: all 0.3s ease !important;
}

.post-list li:hover {
    box-shadow: 0 0 15px rgba(0, 204, 255, 0.3) !important;
    transform: translateX(5px) !important;
}

.post-meta {
    color: #00ff9f !important;
}

.post-link {
    color: #00ccff !important;
    font-weight: bold !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #00ff9f !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
}

.site-footer {
    border-top: 1px solid #00ccff !important;
    background-color: #0f0f0f !important;
}

pre, code {
    background-color: #1a1a1a !important;
    border: 1px solid #00ccff !important;
    color: #00ff9f !important;
}