/* styles.css */
body {
    background-image: url(/assets/images/nebua.jpg);
    background-size: cover; /* Scales image to cover the screen */
    background-position: center; /* Centers the image */
    background-attachment: fixed; /* Keeps image static during scroll */
    color: #00ffcc;
    font-family: 'Courier New', monospace;
    margin: 0;
    padding: 0;
}

nav {
    background-color: #0d0d0d;
    padding: 15px;
    position: sticky;
    top: 0;
    border-bottom: 2px solid #ff007a;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

nav ul li a {
    color: #00ffcc;
    text-decoration: none;
    font-size: 18px;
    padding: 10px;
}

nav ul li a:hover {
    color: #ff007a;
    text-shadow: 0 0 5px #ff007a;
    font-size: clamp(14px, 1.2vw, 18px);
}

.content {
    max-width: 800px; /* Limits width for readability */
    margin: 0 auto; /* Centers the content */
    padding: 20px;
    text-align: center; /* Centers text */
}

h1 {
    color: #ff007a;
    text-shadow: 0 0 5px #0d0d0d;
    font-size: clamp(28px, 4vw, 40px);;
}

h2 {
    color: #e6e600;
    text-shadow: 0 0 5px #0d0d0d;
    font-size: clamp(28px, 4vw, 40px);;
}

p {
    line-height: 1.6;
    font-size: clamp(14px, 1vw, 16px);
}

img, video {
    max-width: 100%; /* Ensures media doesn’t overflow */
    display: block; /* Centers images/videos with margin */
    margin: 20px auto; /* Adds space and centers */
    border: 1px solid #0d0d0d; /* Adds a themed border */
}
/* 404-specific styles */
h1.error {
    font-size: 2.5em;
    animation: glitch 1s infinite;
}

@keyframes glitch {
    0% { text-shadow: 0 0 5px #ff007a; }
    50% { text-shadow: 0 0 10px #00ffcc; }
    100% { text-shadow: 0 0 5px #ff007a; }
}

/* Home featured-specific styles */   
.featured-posts {
    display: flex;
    justify-content: space-between; /* Changed from space-around for tighter spacing */
    width: 100%; /* Fits within .content */
    max-width: 660px; /* 3 boxes (200px each) + 2 gaps (30px each) */
    margin: 20px auto; /* Centers within .content */
}

.featured-box {
    display: inline-block; /* Fits the box to content */
    margin: 10px;
    text-decoration: none;
    transition: transform 0.3s ease;
}

.featured-box:hover {
    transform: scale(1.05);
    box-shadow: 0 0 10px #ff007a;
}

.featured-box img {
    width: 200px; /* Fixed width */
    height: 200px; /* Fixed height */
    object-fit: cover; /* Crops image to fit without distortion */
    border: 2px solid #001a33; /* Border now on the image */
    margin: 0; /* Removes extra margin */
}

.featured-box h3 {
    color: #ff0000;
    font-size: 16px;
    margin: 10px 0;
    text-align: center;}


/* Project-specific styles */
.project-posts {
    display: flex;
    flex-direction: column; /* Stack boxes vertically */
    width: 100%; /* Full width of parent container */
    max-width: 800px; /* Accommodate image + text */
    margin: 20px auto; /* Center within .content */
    padding: 0 10px; /* Prevent overflow on small screens */
}

.project-box {
    display: flex; /* Image and text side by side */
    flex-direction: row; /* Image on left, text on right */
    align-items: center; /* Vertically center content */
    justify-content: flex-start; /* Start content from left */
    margin: 15px 0; /* Vertical spacing between boxes */
    text-decoration: none;
    transition: transform 0.3s ease;
    width: 100%; /* Full width for responsiveness */
}

.project-box:hover {
    transform: scale(1.02); /* Subtle scale on hover */
    box-shadow: 0 0 10px #ff007a;
}

.project-box img {
    width: 150px; /* Fixed width, adjustable */
    height: 150px; /* Fixed height */
    object-fit: cover; /* Crop image to fit */
    border: 2px solid #001a33; /* Retain border */
    margin: 0 20px 0 0; /* Right margin only */
    flex-shrink: 0; /* Prevent image shrinking */
    align-self: flex-start; /* Ensure top-left alignment */
}

.project-text {
    flex-grow: 1; /* Take remaining space */
    display: flex;
    flex-direction: column; /* Stack h3 and p vertically */
    justify-content: center; /* Center text vertically */
}

.project-text h3 {
    color: #ff0000;
    font-size: 16px;
    margin: 0 0 5px 0; /* Tighten spacing */
    text-align: left; /* Align left for consistency */
}

.project-text p {
    color: #ffffff; /* White text for dark theme */
    font-size: 14px;
    margin: 0;
    text-align: left; /* Align left for consistency */
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .project-box {
        flex-direction: column; /* Stack image and text on small screens */
        align-items: center; /* Center content for mobile */
    }

    .project-box img {
        width: 100%; /* Full width on small screens */
        height: auto; /* Maintain aspect ratio */
        margin: 0 0 10px 0; /* Bottom margin only */
    }

    .project-text h3,
    .project-text p {
        text-align: center; /* Center text for mobile */
        color: #ffffff; /* White text for dark theme */
        font-size: 14px;
        margin: 0;
    }
}