/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
/* Core Variables & Reset */
:root {
    --bg-color: #ffffff;
    --text-color: #0e0e0e;
    --accent-color: #f97316; /* Elegant minimalist orange */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-color);
    scroll-behavior: smooth; /* Smooth scrolling for nav links */
}

/* Scroll Snapping Logic */
.container {
    height: 100vh;
    overflow-y: scroll;
    scroll-snap-type: y mandatory; /* Forces snapping to sections */
}

section {
    height: 100vh;
    width: 100vw;
    scroll-snap-align: start; /* Aligns the top of the section to the top of the viewport */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 2rem;
}

/* Typography & Layout */
.content {
    max-width: 800px;
    text-align: center;
}

h1 {
    font-size: 4rem;
    font-weight: 700;
    letter-spacing: -0.05em;
    margin-bottom: 1rem;
}

h2 {
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

p {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #555;
    margin-bottom: 2rem;
}

.accent {
    color: var(--accent-color);
}

.divider {
    height: 4px;
    width: 60px;
    background-color: var(--accent-color);
    margin: 0 auto 2rem auto;
}

/* Navigation */
nav {
    position: fixed;
    top: 2rem;
    right: 3rem;
    z-index: 100;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    font-size: 1rem;
    transition: color 0.3s ease;
}

nav a:hover {
    color: var(--accent-color);
}

/* Buttons */
.btn {
    display: inline-block;
    padding: 1rem 2rem;
    background-color: var(--text-color);
    color: var(--bg-color);
    text-decoration: none;
    font-weight: 600;
    border: 2px solid var(--text-color);
    transition: all 0.3s ease;
}

.btn:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

.btn.outline {
    background-color: transparent;
    color: var(--text-color);
}

.btn.outline:hover {
    background-color: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--bg-color);
}

/* Project Grid */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    text-align: left;
}

.card {
    padding: 2rem;
    border: 1px solid #eaeaea;
    border-left: 4px solid var(--accent-color);
    background: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.card h3 {
    font-size: 1.5rem;
    margin-bottom: 0.5rem;
}

.card p {
    font-size: 1rem;
    margin-bottom: 0;
}

/* Images */
.responsive-avatar {
  max-width: 20%;
  height: auto;
}

/* Responsive Design */
@media (max-width: 768px) {
    h1 { font-size: 3rem; }
    nav {
        top: auto;
        bottom: 2rem;
        left: 50%;
        transform: translateX(-50%);
        background: rgba(255, 255, 255, 0.9);
        padding: 1rem 2rem;
        border-radius: 50px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    }
}