/* ========================================
   GLOBAL STYLES & LAYOUT
   ======================================== */

/* Import Google Font - Roboto is clean and modern
   To change fonts:
   1. Visit https://fonts.google.com
   2. Choose a font and click "Select this style"
   3. Replace the URL below with your new font URL
   4. Update font-family in body selector */
@import url('https://fonts.googleapis.com/css?family=Roboto');

/* CSS Grid creates the 2-column layout
   - 'repeat(2,1fr)' means 2 equal columns
   - Change to 'repeat(3,1fr)' for 3 columns
   - Or use '1fr 2fr' for unequal columns (1:2 ratio) */
.grid-2{
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

/* Main body styling */
body{
    margin: 0;
    padding: 0;
    /* Change the font-family to match your imported Google Font */
    font-family: 'Roboto', sans-serif;
    
    /* COLOR SCHEME - Customize these to make it yours!
       Current theme: Dark mode with gray text */
    background-color: #101214;  /* Dark background - try #1a1a2e, #0f0f0f, or #2d2d2d */
    color: #7A7C80;            /* Gray text - try #a0a0a0, #888888, or #b0b0b0 */
}

/* Headings and elements with 'white' class */
h2,.white{
    color: #fff;  /* White headings - change for accent color like #3498db (blue) or #e74c3c (red) */
}

/* All links start with this gray color */
a{
    color: #7A7C80;  /* Matches body text - could use accent color instead */
    text-decoration: none;  /* Removes underlines */
}
/* ========================================
   SECTION 1 - LEFT PROFILE COLUMN
   ======================================== */
.section-1{
    /* Centers content vertically - adjust 40vh to move up/down
       vh = viewport height, so 40vh = 40% from top */
    padding-top: 40vh;
    text-align: center;
}

/* Location text styling */
.section-1 p{
    font-size: 1.1rem;      /* Slightly larger than base text */
    padding-bottom: 10px;
    margin:0;
}

/* Your name styling */
.section-1 h2{
    font-size: 1.7rem;      /* Make it bigger with 2rem or 2.5rem */
    margin-bottom: 10px;
}

/* Social media icon links */
.section-1 a{
    font-size: 1.5rem;      /* Icon size - increase for larger icons */
    padding: 10px;          /* Space between icons */
}
/* ========================================
   SECTION 2 - RIGHT CONTENT COLUMN
   ======================================== */
.section-2{
    padding-top: 10vh;      /* Space from top - increase to align with profile */
    width: 70%;             /* Content width - increase to 80% or 90% for wider text */
}

/* Section headings (About, Experience, etc.) */
.section-2 h2{
    font-size: 1.7rem;      /* Match profile name size or adjust */
    margin-bottom: 10px;
}

/* Section paragraphs */
.section-2 p{
    font-size: 1.1rem;      /* Body text size */
    padding-bottom: 10px;
    margin:0;
}

/* Project links styling */
.section-2 a{
    display: block;         /* Each link on its own line */
    padding: 5px;
    font-size: 1.2rem;      /* Link text size */
    padding-left: 0;
    width: fit-content;     /* Adjusts to text length */
    max-width: 200px;       /* Optional: set a maximum width */
    position: relative;     /* Needed for underline animation */
    overflow: hidden;
}

/* Animated underline - starts hidden */
.section-2 a::after{
    content: '';            /* Empty element for the underline */
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;               /* Starts at 0 width (hidden) */
    height: 2px;            /* Underline thickness - try 3px for bolder */
    background-color: #fff; /* Underline color - match your accent color */
    transition: width 0.3s ease;  /* Animation speed - lower for faster */
}
/* ========================================
   HOVER ANIMATIONS & EFFECTS
   ======================================== */

/* Project link hover - text turns white */
.section-2 a:hover{
    color: #fff;            /* Hover text color */
    cursor: pointer;
}

/* Project link hover - underline slides in */
.section-2 a:hover::after{
    width: 100%;            /* Underline expands to full width */
}

/* Social media icon hover */
.section-1 a:hover{
    color: #fff;            /* Icons turn white - or use brand colors:
                               Twitter: #1DA1F2
                               LinkedIn: #0077B5
                               GitHub: #333 */
    cursor: pointer;
    transition: 0.3s;       /* Smooth color change */
}

/* Main profile icon hover - gentle grow effect */
.white:hover{
    transform: scale(1.1);  /* 10% larger - try 1.2 for 20% */
    transition: transform 0.3s ease;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE FRIENDLY
   ======================================== */
   
/* When screen is smaller than 780px (tablet/phone) */
@media(max-width:780px){
    /* Switch to single column layout */
    .grid-2{
        grid-template-columns: 1fr;  /* 1 column instead of 2 */
    }
    
    /* Adjust profile section for mobile */
    .section-1{
        padding:0;
        padding-top: 5rem;  /* Less space on top for mobile */
    }
    
    /* Adjust content section for mobile */
    .section-2{
        padding: 0;
        padding-left: 1.5rem;  /* Small left margin */
        padding-top: 2rem;     /* Space between sections */
    }
    
    /* You might want to add:
       - Smaller font sizes for mobile
       - Adjusted icon spacing
       - Different widths for project links */
}