/* --- STYLE.CSS --- */

body {
    color: #FFFF00; /* Sets default text color for all pages */
    font-family: 'Source Code Pro', monospace;
    font-size: 18px;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #1a1a1a; /* Fallback color for other pages */
}

/* === NEW HOMEPAGE BACKGROUND STYLE === */
.homepage {
    background-image: url('HOLES.jpeg'); /* Your image file! */
    background-size: cover; /* Stretches image to fill the screen */
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents image from tiling */
    background-attachment: fixed; /* Cool parallax scroll effect */
}

header {
    margin-bottom: 40px;
    border-bottom: 1px solid #FFFF00;
    padding-bottom: 20px;
}

header {
    margin-bottom: 40px;
    border-bottom: 1px solid #FFFF00;
    padding-bottom: 20px;
}

nav a {
    color: #FFFF00;
    text-decoration: none;
    margin-right: 20px;
    font-family: 'VT323', monospace;
    font-size: 24px;
    transition: color 0.3s, background-color 0.3s;
}

nav a:hover {
    color: #1a1a1a;
    background-color: #FFFF00;
}

.active {
    text-decoration: underline;
    font-weight: bold;
}

.content-wrapper {
    max-width: 800px;
    margin: 0 auto;
}

.terminal-window {
    border: 1px solid #FFFF00;
    border-radius: 5px;
    box-shadow: 0 0 15px rgba(255, 255, 65, 0.3);
    background-color: rgba(13, 13, 13, 0.85); /* MODIFIED: Dark, 85% opaque background */
}

.window-header {
    background-color: #333;
    padding: 8px 12px;
    border-bottom: 1px solid #FFFF00;
    display: flex;
    align-items: center;
}

.dot {
    height: 12px;
    width: 12px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}
.dot.red { background-color: #ff5f56; }
.dot.yellow { background-color: #ffbd2e; }
.dot.green { background-color: #27c93f; }

.window-title {
    color: #eee;
    font-family: 'VT323', monospace;
    font-size: 20px;
    margin-left: auto;
}

.window-body {
    padding: 20px 30px;
}

h1 {
    font-family: 'VT323', monospace;
    font-size: 48px;
    color: #FFFF00;
    margin-top: 0;
    margin-bottom: 20px;
}

h2 {
    font-family: 'VT323', monospace;
    font-size: 36px;
    color: #FFFF00;
    border-bottom: 1px dashed #FFFF00;
    padding-bottom: 10px;
}

p {
    margin-bottom: 20px;
}

a {
    color: #FFFFE0;
    text-decoration: none;
    border-bottom: 1px dotted #FFFFE0;
}

a:hover {
    color: #1a1a1a;
    background-color: #FFFFE0;
}

.prompt {
    color: #ff6ac1; /* A different color for prompts */
}

/* BLINKING CURSOR ANIMATION */
.cursor {
    animation: blink 1s step-end infinite;
    display: inline-block;
}

@keyframes blink {
    from, to { color: transparent; }
    50% { color: #FFFF00; }
}

/* PORTFOLIO ITEM STYLING */
.portfolio-item {
    border: 1px dashed #555;
    padding: 20px;
    margin-bottom: 30px;
    background-color: rgba(255, 255, 65, 0.05);
}

.portfolio-item h3 {
    font-family: 'VT323', monospace;
    font-size: 28px;
    margin-top: 0;
    color: #FFFFE0;
}

pre {
    background-color: #111;
    border-left: 3px solid #FFFFE0;
    padding: 15px;
    white-space: pre-wrap; /* Wraps long lines */
    word-wrap: break-word;
    font-family: 'Source Code Pro', monospace;
    color: #eee;
}
/* === WORK PAGE BACKGROUND === */
.work-page {
    background-image: url('blog-background.jpeg'); /* The new image for this page */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* === ART PAGE BACKGROUND === */
.art-page {
  background-image: url('art-back.jpeg'); /* The new image for this page */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* === POETRY PAGE BACKGROUND === */
.poetry-page {
  background-image: url('poetry-background.jpeg'); /* The new image for this page */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
/* === CONTACT PAGE BACKGROUND === */
.contact-page {
  background-image: url('starry-wall.jpeg'); /* The new image for this page */
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}/* === HOMEPAGE INTRO LAYOUT === */
.intro-wrapper {
    display: flex;
    align-items: flex-start; /* Aligns items to the top */
    gap: 30px; /* Space between headline and bio panel */
}

.intro-headline {
    flex-basis: 50%; /* Takes up half the space */
}

.bio-panel {
    flex-basis: 50%; /* Takes up the other half */
    border-left: 1px dashed #555;
    padding-left: 30px;
}

.bio-photo {
    max-width: 150px; /* Adjust size as needed */
    height: auto;
    border-radius: 5px; /* Optional: slightly rounded corners */
    border: 1px solid #FFFFE0; /* Light yellow border */
    margin-bottom: 15px;
    box-shadow: 0 0 10px rgba(255, 255, 224, 0.2); /* Subtle glow to match the theme */
}

/* For smaller screens */
@media (max-width: 768px) {
    .intro-wrapper {
        flex-direction: column; /* Stacks items vertically */
    }
    .bio-panel {
        border-left: none;
        padding-left: 0;
        margin-top: 20px;
        border-top: 1px dashed #555;
        padding-top: 20px;
    }
    /* === CONTACT FORM STYLES === */
.contact-form {
    margin-top: 30px;
}

.contact-form label {
    display: block;
    margin-bottom: 5px;
    font-family: 'VT323', monospace;
    font-size: 24px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    background-color: #111;
    border: 1px solid #555;
    border-radius: 3px;
    padding: 10px;
    color: #FFFFE0; /* Light yellow text */
    font-family: 'Source Code Pro', monospace;
    font-size: 16px;
    margin-bottom: 20px;
    box-sizing: border-box; /* Important for padding */
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #FFFF00; /* Main yellow */
    box-shadow: 0 0 10px rgba(255, 255, 0, 0.3);
}

.submit-button {
    background-color: transparent;
    border: 1px solid #FFFF00;
    color: #FFFF00;
    padding: 10px 20px;
    font-family: 'VT323', monospace;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.submit-button:hover {
    background-color: #FFFF00;
    color: #1a1a1a;
}
}