body {
    font-family: 'VT323', 'Courier New', monospace;
    /* Retro matrix font, with fallbacks */
    font-size: 16pt;
    /* Increased for readability */
    line-height: 1.5;
    /* Adjusted to accommodate larger text */
    color: #00FF00;
    /* Classic matrix green */
    background-color: #000000;
    /* Black background for margins */
    position: relative;
    overflow-x: hidden;
    /* Prevent horizontal scroll from rain */
    padding: 0 100px;
    /* Default side margins for desktop */
}

@media screen and (max-width: 768px) {
    body {
        padding: 0 10px;
        /* Reduced padding for mobile */
        font-size: 16pt;
        /* Consistent with desktop for readability */
    }
}

body::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(to bottom, transparent 0%, rgba(0, 255, 0, 0.05) 2px, transparent 4px);
    pointer-events: none;
    z-index: -1;
    /* Behind content */
    animation: matrix-scan 10s linear infinite;
    /* Scanline animation for matrix feel */
}

@keyframes matrix-scan {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 100%;
    }
}

.resume-container {
    max-width: 6.5in;
    /* ~624px, unchanged */
    margin: 0 auto;
    padding: 0.75in;
    background-color: rgba(0, 0, 0, 0.8);
    /* Semi-transparent black for depth */
    border: 1px solid #00FF00;
    /* Green border */
    box-shadow: 0 0 10px #00FF00;
    /* Glowing green shadow */
    position: relative;
    z-index: 1;
    /* Above rain */
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

@media screen and (max-width: 768px) {
    .resume-container {
        max-width: 100%;
        /* Full width on mobile */
        padding: 0.5in;
        /* Slightly reduced padding for more content space */
        margin: 0;
        /* Remove auto margins to use full width */
    }
}

.section-title {
    font-size: 17pt;
    /* Increased for readability */
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* Wider spacing for digital look */
    border-bottom: 1px dashed #00FF00;
    /* Dashed green border */
    padding-bottom: 0.1in;
    margin-top: 0.3in;
    margin-bottom: 0.15in;
    text-shadow: 0 0 5px #00FF00;
    /* Green glow */
    animation: flicker 2s infinite alternate;
    /* Flicker animation */
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

@keyframes flicker {
    0% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }

    100% {
        opacity: 1;
    }
}

.job-title {
    font-weight: bold;
    font-size: 15pt;
    /* Increased for readability */
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

.dates {
    font-style: italic;
    color: #00FF00;
    /* Green for consistency */
    font-size: 15pt;
    /* Increased for readability */
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

.company {
    font-style: italic;
    font-size: 15pt;
    /* Increased for readability */
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

h1 {
    font-size: 28pt;
    /* Increased for readability */
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 0.05in;
    text-shadow: 0 0 8px #00FF00;
    /* Stronger glow for title */
    animation: scan 1s infinite alternate;
    /* Scanning animation */
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

@media screen and (max-width: 768px) {
    h1 {
        font-size: 24pt;
        /* Increased for readability */
    }
}

@keyframes scan {
    0% {
        text-shadow: 0 0 8px #00FF00;
    }

    100% {
        text-shadow: 0 0 12px #00FF00;
    }
}

.header-contact {
    font-size: 15pt;
    /* Increased for readability */
    margin-bottom: 0.3in;
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

@media screen and (max-width: 768px) {
    .header-contact {
        font-size: 14pt;
        /* Increased for readability */
    }
}

.header-contact a {
    color: #00FF00;
    text-decoration: none;
}

.header-contact a:hover {
    text-decoration: underline;
    text-shadow: 0 0 5px #00FF00;
}

.header-contact span {
    margin: 0 0.5em;
}

p,
ul,
li {
    margin-bottom: 0.2in;
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}

ul {
    list-style-type: square;
    /* Matrix-like blocks */
    padding-left: 0.5in;
}

@media screen and (max-width: 768px) {
    ul {
        padding-left: 0.3in;
        /* Reduced padding for mobile */
    }
}

li {
    margin-bottom: 0.1in;
}

a {
    color: #00FF00;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    text-shadow: 0 0 5px #00FF00;
}

.text-center {
    text-align: center;
}

.mb-8 {
    margin-bottom: 2rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.ml-4 {
    margin-left: 1rem;
}

@media screen and (max-width: 768px) {
    .ml-4 {
        margin-left: 0.5rem;
        /* Reduced for mobile */
    }
}

.p-8 {
    padding: 2rem;
}

.bg-white {
    background-color: #000000;
}

.bg-gray-100 {
    background-color: #000000;
}

.text-3xl {
    font-size: 2.5rem;
    /* Increased for readability */
}

@media screen and (max-width: 768px) {
    .text-3xl {
        font-size: 2rem;
        /* Increased for readability */
    }
}

.font-bold {
    font-weight: bold;
}

.text-blue-600 {
    color: #00FF00;
}

@media print {
    body {
        background-color: #ffffff;
    }

    .resume-container {
        padding: 0;
        margin: 0;
        width: 100%;
    }

    .bg-gray-100 {
        background-color: #ffffff;
    }

    .matrix-rain {
        display: none;
        /* Hide matrix rain when printing */
    }
}

/* Matrix rain effect with random characters */
.matrix-rain {
    position: fixed;
    top: 3rem;
    /* Increased from 2rem to clear visitor count */
    left: 0;
    width: 100%;
    height: calc(100% - 3rem);
    /* Adjusted height for offset */
    pointer-events: none;
    z-index: -1;
    display: flex;
    justify-content: space-between;
    /* Spread columns evenly */
    overflow: hidden;
    background: transparent;
    /* Ensure no background interference */
    animation: matrix-rain-fade 2s ease-in-out infinite;
    /* Gentle fade for visibility */
}

@keyframes matrix-rain-fade {
    0% {
        opacity: 0.8;
    }

    50% {
        opacity: 0.6;
    }

    100% {
        opacity: 0.8;
    }
}

.matrix-rain .column {
    display: inline-block;
    /* Ensure columns are distinct */
    width: 1.5em;
    /* Narrower columns to prevent overlap */
    font-size: 30pt;
    /* Increased for readability */
    white-space: nowrap;
    animation: fall linear infinite;
    /* Falling animation */
    opacity: 0.6;
    /* Slightly transparent for depth */
    text-shadow: 0 0 10px #00FF00;
    /* Green glow for visibility */
    color: #00FF00;
    /* Green code */
    line-height: 1.2;
    /* Adjusted spacing for vertical characters */
    text-align: center;
    /* Center characters in column */
}

@media screen and (max-width: 768px) {
    .matrix-rain .column {
        width: 1.2em;
        /* Slightly narrower for mobile */
        font-size: 26pt;
        /* Increased for readability */
    }
}

@keyframes fall {
    0% {
        transform: translateY(-100vh);
    }

    /* Start above viewport */
    100% {
        transform: translateY(100vh);
    }

    /* Fall below viewport */
}

/* Glitch effect for individual characters */
.matrix-rain .char {
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Smooth glitch transition */
}

.matrix-rain .char.glitching {
    opacity: 0.2;
    /* Fade during glitch */
    transform: translateX(2px);
    /* Slight shift */
}

/* Visitor counter styles */
.visitor-count {
    font-size: 14pt;
    /* Increased from 16pt */
    font-weight: bold;
    color: #00FF00;
    text-align: center;
    text-shadow: 0 0 5px #00FF00;
    /* Green glow */
    z-index: 2;
    position: relative;
    font-family: 'VT323', 'Courier New', monospace !important;
    /* Explicit font */
}