style.css

/* --- Body and Background --- */
body {
    margin: 0;
    padding: 40px; /* Lets the page scroll */

    /* Your dotted background */
    background-color: #f8f9fa;
    background-image: radial-gradient(circle, #d0d0d0 1px, transparent 1px);
    background-size: 20px 20px;
}
/* --- Font Styles (from your file) --- */
h1 {
    font-family: 'Kalam';
    font-weight: 400;
    font-size: 3rem;
    margin: 0;
}
h2 {
    font-family: 'Kalam';
    font-weight: 400;
    font-size: 3rem;
    margin-bottom: 50px;
    text-align: center;
}
.hero p {
    font-family: 'Kameron';
    font-size: 1.2rem;
    margin: 0;
    line-height: 1.5;
}
.text-w-logo {
    font-family: 'Kameron';
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

/* --- Hero Section (from your file) --- */
.hero {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;

    max-width: 1000px; /* Added max-width */
    margin-left: auto;
    margin-right: auto;
}
.hero-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 400px;
}
.heroine {
    width: 300px;
}

/* --- Project Grid Container --- */
.pics-wrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 60px; 

    /* Center the whole grid */
    max-width: 1200px;
    margin: 0 auto;
}

/* --- Project Card --- */
.thumbnails {
    /* This adds the card look */
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);

    /* This is for the tilt and hover effects */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    
    /* Make it work as a link */
    text-decoration: none;
    color: inherit;
    display: block;
}

.thumbnails img {
    width: 100%; /* Make image fill the card */
    display: block; /* Remove extra space below image */
    border-radius: 8px 8px 0 0; /* Match card corners */
}

/* MrMed thumbnail height constraint */
#mrmed img {
    height: 300px;
    object-fit: contain;
}

.name-link {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Pushes text and arrow apart */
    padding: 15px 20px; /* Adds breathing room */
}

/* Your arrow icon */
.name-link img {
    width: 24px;
    height: 24px;
}

/* --- The Fun Scrapbook Tilt --- */
.thumbnails:nth-child(1) {
    transform: rotate(-3deg);
}
.thumbnails:nth-child(2) {
    transform: rotate(2deg);
    margin-top: 10px; /*Slight overlap */
}
.thumbnails:nth-child(3) {
    transform: rotate(-1deg);
}

/* Hover effect */
.thumbnails:hover {
    transform: scale(1.05) rotate(0deg); /* Straighten and zoom */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    z-index: 10; /* Bring to front */
}
        .heroine:hover {
        transform: rotate(2deg);

/* ======================================= */
/* Responsive Design (Revised Logic)     */
/* ======================================= */

/* --- 1. All Tablets (e.g., iPad Pro, Air, Mini) --- */
/* (Applies from 1200px down to 769px)
   - Hero stays side-by-side but gets smaller.
   - Projects snap to 2 columns.
*/
@media (max-width: 950px) {
    
    /* --- Tablet Hero --- */
    .hero {
        /* Stays side-by-side, but with less gap */
        gap: 2rem;
        padding-left: 20px;
        padding-right: 20px;
    }

    h1 {
        font-size: 2.75rem; /* Slightly smaller title */
    }
    
    .hero p {
        font-size: 1.1rem; /* Slightly smaller text */
    }

    .heroine {
        width: 280px; 
    }
}

    /* --- Tablet Projects --- */
    .pics-wrap {
        /* Snaps to 2-column grid */
        grid-template-columns: repeat(2, 1fr);
        
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* --- 2. Mobile (iPhone) --- */
/* (Applies from 768px and down)
   - Hero STACKS.
   - Projects snap to 1 column.
*/
@media (max-width: 760px) {

    /* --- Mobile Hero --- */
    .hero {
        /* This is the key: stacks text and image vertically */
        flex-direction: column;
        
        gap: 1.5rem;
        margin-bottom: 60px;
        padding-left: 20px; /* Keep padding */
        padding-right: 20px;
    }

    .hero-text {
        /* This centers your text elements */
        align-items: center;
        text-align: center;
        max-width: 100%; /* Lets it use the full width */
    }

    h1 {
        /* Makes your main title a bit smaller on phones */
        font-size: 2.5rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .heroine {
        /* Make your image a bit smaller so it fits nicely */
        width: 250px;
    }

    /* --- Mobile Projects --- */
    .projects h2 {
        font-size: 2.5rem; /* Smaller "My Projects" title */
    }

    .pics-wrap {
        /* This is the final snap to 1 column */
        grid-template-columns: 1fr;
    }
    
    /* Optional: remove the tilt on mobile */
    .thumbnails:nth-child(n) { 
        transform: rotate(0deg);
        margin-top: 0;
    }
}
/* ======================================= */
/* Footer                                */
/* ======================================= */
footer {
    text-align: center;
    padding: 50px 20px 30px 20px;
    
    /* Adds a subtle line above the footer */
    border-top: 1px solid #eee; 
    margin-top: 100px;
}

.social-links {
    margin-bottom: 25px;
}

.social-links a {
    /* This targets the <i> icon tags */
    font-size: 1.8rem; /* Makes icons bigger */
    color: #777;      /* A subtle grey color */
    margin: 0 15px;    /* Spaces them out */
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #333; /* Darker on hover */
}

.contact-email {
    margin-bottom: 25px;
}

.contact-email a {
    font-family: 'Kameron', serif;
    font-size: 1.2rem;
    color: #333;
    text-decoration: none;
    
    /* Fun "highlighter" effect */
    border-bottom: 2px solid #C2E5FF; /* Uses your sticky note blue */
    padding-bottom: 2px;
    transition: all 0.2s ease-in-out;
}

.contact-email a:hover {
    background-color: #C2E5FF; /* Fills the highlight on hover */
    color: #000;
}

.copyright {
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    color: #aaa;
    margin: 0;
}