/* Custom CSS for the Inter font and general body styling */
html, body { /* Apply overflow-x hidden to both html and body */
    font-family: 'Inter', sans-serif;
    background-color: #000000; /* was #1a1a1a Very dark gray/near black */
    color: #ffffff; /* White text color */
    overflow-x: hidden; /* Prevent horizontal scrolling */
}
/* Styling for scrollbar to match the dark theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #282828; /* Darker track */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #555555; /* Grayish thumb */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #777777; /* Lighter grayish thumb on hover */
    }
/* Offset for anchor links due to fixed header */
html {
    scroll-padding-top: 70px; /* Adjust this value based on your navbar height */
}
/* Basic styling for form focus */
input:focus, textarea:focus {
    outline: none;
    border-color: #dc2626; /* red-600 */
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.5); /* red-500 with opacity */
}
/* Styles for vote buttons */
.vote-btn.voted-up { color: #22c55e; /* green-500 */ }
.vote-btn.voted-down { color: #ef4444; /* red-500 */ }
.vote-btn:disabled {
    cursor: not-allowed;
}

/* Portfolio Image Layouts */
.portfolio-entry .flex-container {
    display: flex;
    gap: 1.5rem; /* Corresponds to gap-6 in Tailwind */
}

/* Default (Left Image) */
.portfolio-entry.image-left .flex-container {
    flex-direction: row;
}

/* Right Image */
.portfolio-entry.image-right .flex-container {
    flex-direction: row-reverse;
}

/* Top Image */
.portfolio-entry.image-top .flex-container {
    flex-direction: column;
}
.portfolio-entry.image-top .image-container,
.portfolio-entry.image-top .description-container {
    width: 100%;
}

/* Bottom Image */
.portfolio-entry.image-bottom .flex-container {
    flex-direction: column-reverse;
}
.portfolio-entry.image-bottom .image-container,
.portfolio-entry.image-bottom .description-container {
    width: 100%;
}
