/* General Styles */
body {
    background-color: #1e1e1e;
    /* Dark editor background */
    color: #e0e0e0;
    /* Light grey text */
    font-family: 'Courier New', Courier, monospace;
    /* Monospace font for tech feel */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    /* Remove diagonal lines */
    /* background-image: repeating-linear-gradient(...); */

    /* Add dense (25 emojis) faint pattern using SVG data URI (opacity 0.25) */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'><text x='20' y='30' font-size='20' fill='rgba(200,200,200,0.25)'>💻</text><text x='100' y='50' font-size='20' fill='rgba(200,200,200,0.25)'>🖱️</text><text x='180' y='25' font-size='20' fill='rgba(200,200,200,0.25)'>💾</text><text x='250' y='60' font-size='20' fill='rgba(200,200,200,0.25)'>⚙️</text><text x='320' y='40' font-size='20' fill='rgba(200,200,200,0.25)'>💡</text><text x='400' y='70' font-size='20' fill='rgba(200,200,200,0.25)'>🔌</text><text x='470' y='35' font-size='20' fill='rgba(200,200,200,0.25)'>🔋</text><text x='40' y='100' font-size='20' fill='rgba(200,200,200,0.25)'>📡</text><text x='120' y='130' font-size='20' fill='rgba(200,200,200,0.25)'>📱</text><text x='200' y='110' font-size='20' fill='rgba(200,200,200,0.25)'>⌚️</text><text x='280' y='140' font-size='20' fill='rgba(200,200,200,0.25)'>⌨️</text><text x='360' y='120' font-size='20' fill='rgba(200,200,200,0.25)'>🎵</text><text x='440' y='150' font-size='20' fill='rgba(200,200,200,0.25)'>🎸</text><text x='60' y='180' font-size='20' fill='rgba(200,200,200,0.25)'>🎧</text><text x='140' y='210' font-size='20' fill='rgba(200,200,200,0.25)'>🎤</text><text x='220' y='190' font-size='20' fill='rgba(200,200,200,0.25)'>🎹</text><text x='300' y='220' font-size='20' fill='rgba(200,200,200,0.25)'>🎷</text><text x='380' y='200' font-size='20' fill='rgba(200,200,200,0.25)'>🎺</text><text x='460' y='230' font-size='20' fill='rgba(200,200,200,0.25)'>🎻</text><text x='80' y='260' font-size='20' fill='rgba(200,200,200,0.25)'>🥁</text><text x='160' y='290' font-size='20' fill='rgba(200,200,200,0.25)'>🎮</text><text x='240' y='270' font-size='20' fill='rgba(200,200,200,0.25)'>👾</text><text x='320' y='300' font-size='20' fill='rgba(200,200,200,0.25)'>🕹️</text><text x='400' y='280' font-size='20' fill='rgba(200,200,200,0.25)'>🎲</text><text x='480' y='310' font-size='20' fill='rgba(200,200,200,0.25)'>🚀</text></svg>");
    background-repeat: repeat;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

h1,
h2 {
    color: #00ffff;
    /* Cyan accent */
    text-shadow: 0 0 5px #00ffff, 0 0 10px #00ffff;
    margin-bottom: 10px;
}

h2 {
    border-bottom: 1px solid #ff00ff;
    /* Magenta border */
    padding-bottom: 5px;
    margin-top: 30px;
}

p {
    margin-bottom: 15px;
}

a {
    color: #ffff00;
    /* Yellow links */
    text-decoration: none;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
    color: #ffffff;
    text-shadow: 0 0 3px #ffff00;
}

/* Header */
header {
    background-color: #1a1a1a;
    /* Slightly lighter dark shade */
    padding: 40px 20px;
    text-align: center;
    border-bottom: 3px solid #00ffff;
    margin-bottom: 30px;
}

.profile-container {
    display: inline-block;
}

.masked-image {
    width: 100%;
    height: auto;
    display: block;
    mask-image: url(#futuristic-mask);
    -webkit-mask-image: url(#futuristic-mask);
    /* For WebKit browsers */
}

/* To create a border around this masked image, you'd typically need another
   masked element (like the <span>) with a slightly larger, offset mask. */
.profile-pic-placeholder {
    position: relative;
    width: 200px;
    height: 200px;
    overflow: hidden;
    left: 100px;
}

header h1 {
    margin: 0;
    font-size: 2.5em;
}

.subtitle {
    color: #00ffff;
    font-size: 1.2em;
    margin-top: 5px;
}

/* Main Content Sections */
main {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 20px;
}

section {
    background-color: rgba(26, 26, 26, 0.8);
    /* Semi-transparent dark background */
    padding: 20px;
    margin-bottom: 20px;
    border: 1px solid #333;
    box-shadow: 0 0 10px rgba(0, 255, 255, 0.1);
    /* Subtle cyan glow */
}

/* Image Placeholder (Optional) */
.image-placeholder {
    width: 100%;
    height: 200px;
    /* Adjust as needed */
    background-color: #222;
    border: 2px dashed #ffff00;
    /* Yellow dashed border */
    color: #ffff00;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
}

/* Connect Section */
.social-links a {
    display: inline-block;
    margin-right: 15px;
    padding: 5px 10px;
    border: 1px solid #ffff00;
    border-radius: 3px;
}

.social-links a:hover {
    background-color: rgba(255, 255, 0, 0.1);
}

.link-placeholder {
    font-style: italic;
    color: #888;
}

/* Code Snippet */
.code-snippet {
    background-color: #111;
    /* Even darker background for code block */
    border: 1px solid #ff00ff;
    /* Magenta border */
    padding: 15px;
    margin-top: 20px;
    overflow-x: auto;
    /* Add scroll if code is too wide */
    border-radius: 4px;
}

.code-snippet code {
    color: #9cdcfe;
    /* Light blue text, common in code editors */
}

/* Footer */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    font-size: 0.9em;
    color: #888;
    border-top: 1px solid #333;
}

footer p {
    margin: 0;
}