/* Home Page Background - Full Grid Effect */
html, body {
    background-image: 
        /* Stars - Layer 1 */
        radial-gradient(1px 1px at 23px 47px, #fff, transparent),
        radial-gradient(0.8px 0.8px at 67px 23px, rgba(255,255,255,0.9), transparent),
        radial-gradient(1.2px 1.2px at 145px 78px, rgba(255,255,255,0.7), transparent),
        radial-gradient(0.6px 0.6px at 189px 34px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1px 1px at 234px 156px, rgba(255,255,255,0.6), transparent),
        /* Stars - Layer 2 */
        radial-gradient(0.9px 0.9px at 45px 123px, rgba(255,255,255,0.8), transparent),
        radial-gradient(1.1px 1.1px at 98px 167px, #fff, transparent),
        radial-gradient(0.7px 0.7px at 156px 89px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 203px 45px, rgba(255,255,255,0.9), transparent),
        radial-gradient(0.8px 0.8px at 267px 134px, rgba(255,255,255,0.7), transparent),
        /* Stars - Layer 3 */
        radial-gradient(0.5px 0.5px at 34px 89px, rgba(255,255,255,0.6), transparent),
        radial-gradient(1.3px 1.3px at 78px 45px, rgba(255,255,255,0.8), transparent),
        radial-gradient(0.9px 0.9px at 123px 178px, rgba(255,255,255,0.4), transparent),
        radial-gradient(0.6px 0.6px at 178px 123px, rgba(255,255,255,0.7), transparent),
        radial-gradient(1px 1px at 245px 67px, rgba(255,255,255,0.9), transparent),
        /* Stars - Layer 4 */
        radial-gradient(0.8px 0.8px at 56px 156px, rgba(255,255,255,0.5), transparent),
        radial-gradient(1.2px 1.2px at 134px 23px, rgba(255,255,255,0.8), transparent),
        radial-gradient(0.7px 0.7px at 167px 189px, rgba(255,255,255,0.6), transparent),
        radial-gradient(0.9px 0.9px at 223px 98px, #fff, transparent),
        radial-gradient(0.6px 0.6px at 289px 178px, rgba(255,255,255,0.7), transparent) !important;
    background-size: 
        300px 200px,
        280px 190px,
        320px 210px,
        290px 180px,
        310px 220px,
        270px 200px,
        330px 190px,
        300px 180px,
        290px 210px,
        280px 200px,
        320px 190px,
        310px 180px,
        270px 210px,
        290px 200px,
        300px 190px,
        280px 180px,
        320px 200px,
        310px 210px,
        270px 190px,
        290px 180px !important;
    background-color: #000 !important;
    background-attachment: fixed !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Home Page Grid Overlay - Prominent with proper alignment */
html::before, body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' viewBox='-100 -100 1200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3Cfilter id='glow'%3E%3CfeGaussianBlur stdDeviation='2' result='coloredBlur'/%3E%3CfeMerge%3E%3CfeMergeNode in='coloredBlur'/%3E%3CfeMergeNode in='SourceGraphic'/%3E%3C/feMerge%3E%3C/filter%3E%3C/defs%3E%3Cg%3E%3C!-- Horizontal lines --%3E%3Cg stroke='rgba(255,0,0,1.0)' stroke-width='2' filter='url(%23glow)'%3E%3Cline x1='-80' y1='-80' x2='1080' y2='-80'/%3E%3Cline x1='-80' y1='-40' x2='1080' y2='-40'/%3E%3Cline x1='-80' y1='0' x2='1080' y2='0'/%3E%3Cline x1='-80' y1='40' x2='1080' y2='40'/%3E%3Cline x1='-80' y1='80' x2='1080' y2='80'/%3E%3Cline x1='-80' y1='120' x2='1080' y2='120'/%3E%3Cline x1='-80' y1='160' x2='1080' y2='160'/%3E%3Cline x1='-80' y1='200' x2='1080' y2='200'/%3E%3Cline x1='-80' y1='240' x2='1080' y2='240'/%3E%3Cline x1='-80' y1='280' x2='1080' y2='280'/%3E%3Cline x1='-80' y1='320' x2='1080' y2='320'/%3E%3Cline x1='-80' y1='360' x2='1080' y2='360'/%3E%3Cline x1='-80' y1='400' x2='1080' y2='400'/%3E%3Cline x1='-80' y1='440' x2='1080' y2='440'/%3E%3Cline x1='-80' y1='480' x2='1080' y2='480'/%3E%3Cline x1='-80' y1='520' x2='1080' y2='520'/%3E%3Cline x1='-80' y1='560' x2='1080' y2='560'/%3E%3Cline x1='-80' y1='600' x2='1080' y2='600'/%3E%3Cline x1='-80' y1='640' x2='1080' y2='640'/%3E%3Cline x1='-80' y1='680' x2='1080' y2='680'/%3E%3C/g%3E%3C!-- Vertical lines - aligned with horizontal boundaries --%3E%3Cg stroke='rgba(255,0,0,0.9)' stroke-width='2' filter='url(%23glow)'%3E%3Cline x1='-80' y1='-80' x2='-80' y2='680'/%3E%3Cline x1='-40' y1='-80' x2='-40' y2='680'/%3E%3Cline x1='0' y1='-80' x2='0' y2='680'/%3E%3Cline x1='40' y1='-80' x2='40' y2='680'/%3E%3Cline x1='80' y1='-80' x2='80' y2='680'/%3E%3Cline x1='120' y1='-80' x2='120' y2='680'/%3E%3Cline x1='160' y1='-80' x2='160' y2='680'/%3E%3Cline x1='200' y1='-80' x2='200' y2='680'/%3E%3Cline x1='240' y1='-80' x2='240' y2='680'/%3E%3Cline x1='280' y1='-80' x2='280' y2='680'/%3E%3Cline x1='320' y1='-80' x2='320' y2='680'/%3E%3Cline x1='360' y1='-80' x2='360' y2='680'/%3E%3Cline x1='400' y1='-80' x2='400' y2='680'/%3E%3Cline x1='440' y1='-80' x2='440' y2='680'/%3E%3Cline x1='480' y1='-80' x2='480' y2='680'/%3E%3Cline x1='520' y1='-80' x2='520' y2='680'/%3E%3Cline x1='560' y1='-80' x2='560' y2='680'/%3E%3Cline x1='600' y1='-80' x2='600' y2='680'/%3E%3Cline x1='640' y1='-80' x2='640' y2='680'/%3E%3Cline x1='680' y1='-80' x2='680' y2='680'/%3E%3Cline x1='720' y1='-80' x2='720' y2='680'/%3E%3Cline x1='760' y1='-80' x2='760' y2='680'/%3E%3Cline x1='800' y1='-80' x2='800' y2='680'/%3E%3Cline x1='840' y1='-80' x2='840' y2='680'/%3E%3Cline x1='880' y1='-80' x2='880' y2='680'/%3E%3Cline x1='920' y1='-80' x2='920' y2='680'/%3E%3Cline x1='960' y1='-80' x2='960' y2='680'/%3E%3Cline x1='1000' y1='-80' x2='1000' y2='680'/%3E%3Cline x1='1040' y1='-80' x2='1040' y2='680'/%3E%3Cline x1='1080' y1='-80' x2='1080' y2='680'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    transform: perspective(1200px) rotateX(45deg) translateY(-15%) scale(0.8) !important;
    transform-origin: center center !important;
    filter: drop-shadow(0 0 5px rgba(255, 0, 0, 0.8)) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Home page content styling */
.home-content {
    background: transparent !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.home-content h1, .home-content h2, .home-content h3 {
    color: #fff !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4) !important;
}

.recent-posts {
    margin-top: 40px !important;
}

.post-summary {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
    padding: 15px 0 !important;
    margin-bottom: 15px !important;
}

.post-summary h3 a {
    color: #ff6666 !important;
    text-decoration: none !important;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.4) !important;
}

.post-summary h3 a:hover {
    color: #ff8888 !important;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6) !important;
}

.post-summary time {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.9em !important;
}

/* Blog posts styling for home page */
.blog-posts {
    list-style-type: none !important;
    padding: 0 !important;
    margin: 20px 0 !important;
    background: transparent !important;
    border-radius: 10px !important;
    padding: 20px !important;
    border: none !important;
    box-shadow: none !important;
    text-align: left !important;
}

.blog-posts li {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin-bottom: 15px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid rgba(0, 255, 0, 0.2) !important;
    background: transparent !important;
    text-align: left !important;
}

.blog-posts li:last-child {
    border-bottom: none !important;
}

.blog-posts li span {
    min-width: 11ch !important;
    margin-bottom: 5px !important;
    padding-left: 10px !important;
}

.blog-posts li span i {
    font-style: normal !important;
}

.blog-posts li span time {
    color: #00cc00 !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace !important;
    font-size: 0.9em !important;
    text-shadow: none !important;
    font-weight: normal !important;
}

.blog-posts li a {
    color: #00ff00 !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace !important;
    text-decoration: none !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 255, 0, 0.8), 0 0 24px rgba(0, 255, 0, 0.4) !important;
    font-weight: bold !important;
    transition: all 0.3s ease !important;
}

.blog-posts li a:hover {
    color: #00ff00 !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.95), 0 0 16px rgba(0, 255, 0, 0.9), 0 0 32px rgba(0, 255, 0, 0.5) !important;
    text-decoration: underline !important;
}

/* Blog filter/section headings */
.blog-filter, h3.blog-filter {
    color: #00ff00 !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace !important;
    font-size: 1em !important;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.95), 0 0 12px rgba(0, 255, 0, 0.8), 0 0 24px rgba(0, 255, 0, 0.4) !important;
    font-weight: bold !important;
    margin: 30px 0 25px 0 !important;
    padding-bottom: 10px !important;
    padding-left: 10px !important;
    border-bottom: 2px solid rgba(0, 255, 0, 0.4) !important;
    background: transparent !important;
    text-align: left !important;
}

/* View all posts link */
.blog-posts + p a,
p a[href="/posts/"] {
    color: #00ffff !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', monospace !important;
    text-decoration: none !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 8px rgba(0, 255, 255, 0.6) !important;
    font-weight: bold !important;
    padding: 12px 20px !important;
    border: 2px solid rgba(0, 255, 255, 0.4) !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    text-align: left !important;
    margin: 20px 0 !important;
    max-width: 200px !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.blog-posts + p a:hover,
p a[href="/posts/"]:hover {
    color: #00ffff !important;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 255, 255, 0.8) !important;
    border-color: rgba(0, 255, 255, 0.8) !important;
    box-shadow: 0 0 25px rgba(0, 255, 255, 0.4) !important;
    background: rgba(0, 0, 0, 0.7) !important;
    transform: scale(1.05) !important;
}

/* Responsive design for blog posts */
@media screen and (min-width: 600px) {
    .blog-posts li {
        flex-direction: row !important;
        gap: 20px !important;
        align-items: baseline !important;
        justify-content: flex-start !important;
        text-align: left !important;
    }
    
    .blog-posts li span {
        flex: 0 0 130px !important;
        margin-bottom: 0 !important;
        text-align: left !important;
    }
    
    .blog-posts li a {
        flex: 1 !important;
        text-align: left !important;
    }
}

/* Ensure home page content integrates well with grid background */
content {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}