@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

body {
    font-family: 'Press Start 2P', 'Consolas', 'Menlo', 'Monaco', 'Courier New', monospace; /* Retro/Hacker font */
    line-height: 1.6;
    font-weight: 300;
    margin: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background-image: url('https://images.pexels.com/photos/1252890/pexels-photo-1252890.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1'); /* Star Wars-like space background */
    background-color: #000000; /* Fallback dark background */
    background-size: cover; /* Cover the entire page */
    background-position: center; /* Center the background image */
    background-repeat: no-repeat; /* Do not repeat the image */
    background-attachment: fixed; /* Keep the background fixed during scroll */
    color: #39FF14; /* Neon green text */
    text-shadow: 0 0 3px #39FF14, 0 0 5px #39FF14; /* Adjusted neon glow effect */
}

h1 {
    color: #39FF14; /* Neon green */
    font-weight: 700; /* Bolder */
    text-align: center;
    margin-bottom: 40px; /* More space */
    text-transform: uppercase; /* Uppercase for a more "technical" feel */
    letter-spacing: 2px; /* Add letter spacing */
    text-shadow: 0 0 5px #39FF14, 0 0 8px #39FF14; /* Adjusted neon glow effect */
}

h2 {
    color: #00FFFF; /* Neon blue for section titles */
    border-bottom: 1px solid #00FFFF; /* Neon blue border */
    padding-bottom: 10px;
    margin-top: 50px;
    font-weight: 500;
    text-shadow: 0 0 3px #00FFFF; /* Adjusted neon glow effect */
    letter-spacing: 1px;
}

ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 40px;
}

li {
    background-color: #1A1A1A; /* Slightly lighter dark background for list items */
    margin-bottom: 10px;
    padding: 15px 20px;
    border-radius: 0; /* Sharp corners for terminal feel */
    border: 1px solid #333333; /* Darker border for separation */
    transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1); /* Subtle cyan glow */
}

li:hover {
    background-color: #2A2A2A; /* Lighter background on hover */
    transform: none; /* Remove lift effect, focus on background change */
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3); /* Enhanced cyan glow on hover */
}

li a {
    text-decoration: none;
    color: #00FFFF; /* Neon blue for links */
    font-weight: 400;
    display: block;
    text-shadow: 0 0 2px #00FFFF; /* Adjusted neon glow effect */
}

li a:hover {
    text-decoration: underline;
    color: #80FFFF; /* Lighter neon blue on hover */
}

/* Optional: Add a blinking cursor effect to the header for more "hacker" feel */
h1::after {
    content: '_';
    animation: blink-caret 1s step-end infinite;
}

@keyframes blink-caret {
    from, to {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}