body {
    background-color: #000; /* Black background */
    color: #00ff00; /* Green text */
    font-family: 'Courier New', Courier, monospace; /* Monospace font for CMD effect */
}

a {
    color: #00ff00; /* Green text for links */
    text-decoration: none; /* Remove underline from links */
}

a:hover {
    color: #00cc00; /* Dark green text for hovered links */
}

.typing span {
    display: inline-block;
    white-space: pre-wrap; /* Allows text to wrap to the next line */
    word-wrap: break-word; /* Breaks long words to fit within the container */
}

.typing-cursor {
    display: inline-block;
    width: 10px; /* Set to desired width for typing cursor */
    height: 18px; /* Set to desired height */
    background-color: #00ff00;
    animation: blink-caret 0.6s infinite;
}

@keyframes blink-caret {
    50% { background-color: transparent; }
}

ul {
    list-style: none; /* Remove default list style */
}

.typing a {
    text-decoration: none;
    color: inherit;
}

.typing a:hover {
    text-decoration: underline;
}

.typing-dot {
    animation: blink-dot 1s step-end infinite;
}

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

.project {
    margin-top: 50px; /* Add space at the top */
    margin-bottom: 50px; /* Add space between projects */
}

/* Larger, responsive images by default */
.project img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1100px;
    border-radius: 6px;
    transition: transform 0.4s ease, opacity 0.4s ease;
}

/* Portrait images: smaller default size, overrides generic project image sizing */
.project img.portrait,
img.portrait {
    width: 100%;
    max-width: 420px; /* adjust as needed */
    height: auto;
    border-radius: 8px;
}

/* Prevent overflow on small screens */
@media (max-width: 520px) {
    .project img.portrait,
    img.portrait {
        max-width: 85vw;
    }
}

/* Lightbox overlay */
.lightbox {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
}
.lightbox.open {
    display: flex;
}
.lightbox img {
    max-width: min(95vw, 1400px);
    max-height: 90vh;
    border-radius: 10px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    background: #111;
}

/* Lock background scroll while lightbox is open */
body.lightbox-open {
    overflow: hidden;
}

/* FIX: only hide before the .loaded class is applied */
html.js .project img:not(.loaded) {
    opacity: 0;
    transform: translateY(12px);
}

.project img.loaded {
    opacity: 1;
    transform: translateY(0);
}

#terminal-input {
    display: flex;
    align-items: center;
    margin-top: 20px;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
}

#terminal-input span {
    margin-right: 10px;
}

#command-input {
    background-color: #000;
    color: #00ff00;
    border: none;
    outline: none;
    font-family: 'Courier New', Courier, monospace;
    font-size: 16px;
    width: 300px;
    caret-color: #00ff00; /* Custom cursor color */
    caret-width: 1000px; /* Custom width for the caret */
}

#command-suggestions {
    background-color: #000;
    color: #00ff00;
    font-family: 'Courier New', Courier, monospace;
    border: 1px solid #00ff00;
    margin-top: 10px;
    padding: 10px;
    width: 300px;
}

#command-suggestions ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#command-suggestions li {
    padding: 5px 0;
}

.project-image {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    transform: translateY(20px);
    width: 250px; /* Set the desired width */
    height: auto; /* Maintain aspect ratio */
}


.code-snippet {
    background: #0a0a0a;
    border: 1px solid #00ff00;
    border-radius: 4px;
    padding: 12px;
    margin: 16px 0;
    overflow-x: auto;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    inline-size: 500px;
}

.code-snippet code {
    color: #00ff00;
    display: block;
    white-space: pre;
}

.code-snippet .code-comment {
    color: #00aa00;
}

.code-snippet .code-keyword {
    color: #00ff00;
    font-weight: bold;
}

.code-snippet-header {
    color: #00ff00;
    font-size: 14px;
    margin-bottom: 8px;
    font-weight: bold;
}