/* style.css */
:root {
    --gunmetal: #223843ff;
    --antiflash-white: #eff1f3ff;
}

body {
    font-family: 'Inter', sans-serif;
    background-color: var(--antiflash-white);
    color: var(--gunmetal);
}

/* --- Color Utility Classes --- */
.bg-gunmetal { background-color: var(--gunmetal); }
.text-gunmetal { color: var(--gunmetal); }
.bg-antiflash-white { background-color: var(--antiflash-white); }
.text-antiflash-white { color: var(--antiflash-white); }
.border-gunmetal { border-color: var(--gunmetal); }

/* --- Portfolio Text Styling --- */
.portfolio-text {
    font-weight: 900;
    /* Base font size for large desktops */
    font-size: 10rem;
    line-height: 0.8;
    color: var(--antiflash-white);
    text-align: right;
    letter-spacing: -0.05em;
}

/* --- Masonry Layout for Work/Portfolio Page --- */
.masonry-container {
    /* Default to 3 columns on larger screens */
    column-count: 3;
    column-gap: 1.5rem;
}

.masonry-item {
    display: inline-block;
    width: 100%;
    margin-bottom: 1.5rem;
    /* Prevents items from breaking across columns */
    break-inside: avoid;
    transition: transform 0.2s ease-in-out;
}

.masonry-item img {
    width: 100%;
    height: auto;
    border-radius: 1rem;
}

.masonry-item:hover {
    transform: scale(1.03);
}


/* --- Responsive Media Queries --- */

/* For large tablets and small laptops */
@media (max-width: 1024px) {
    .portfolio-text {
        font-size: 8rem;
    }
    .masonry-container {
        /* Switch to 2 columns */
        column-count: 2;
    }
}

/* For standard tablets and large phones */
@media (max-width: 768px) {
    .portfolio-text {
        font-size: 6rem;
    }
    .masonry-container {
        /* Switch to a single column layout */
        column-count: 1;
    }
}

/* For smaller mobile phones */
@media (max-width: 480px) {
    .portfolio-text {
        /* Further reduce font size for compact screens */
        font-size: 4.5rem;
    }
    
    /* Example of adjusting heading sizes on small screens */
    /* Note: Tailwind's responsive classes (e.g., text-4xl sm:text-5xl) are often a better way to handle this. */
    .text-5xl {
        font-size: 2.5rem; /* Adjusts the "I'm Mohamed Shahin Ali" heading */
    }
}