/* Inherits base styles from styles.css (body background, font, etc.) */

/* Main container for the about page content */
.main-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    max-width: 900px; /* Keeps content readable on large screens */
    margin: auto;
    padding: 5vh 2vw;
    color: white;
    font-family: 'Raleway', sans-serif;
    height: 100vh;
    overflow-y: auto; /* Allows scrolling if content gets long */
}

/* Back Button position */
.back-button-container {
    margin-bottom: 5vh;
}

/* Section for your photo and description */
.about-section {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3vw;
    margin-bottom: 5vh;
    width: 100%;
    object-fit: cover;
}

/* Use the same profile picture ID for consistent sizing */
#pfp {
    aspect-ratio: 16 / 9;
    width: 30vw;
    height: 30vw;
    min-width: 150px;
    min-height: 150px;
    
    
}

.about-text {
    flex-basis: 60%;
    display: flex; /* Ensures flex properties work */
    flex-direction: column;
}

.about-text h1 {
    font-size: calc(var(--pfp-height) / 6);
    margin-bottom: 2vh;
    border-bottom: 2px solid var(--Special_txt); /* Use your special red color */
    padding-bottom: 10px;
    align-self: flex-start; /* Aligns the heading to the start */
}

.about-text p {
    font-size: calc(var(--pfp-height) / 13);
    line-height: 1.6;
}

/* General styling for "Interests" and "Skills" sections */
.content-section {
    width: 100%;
    margin-bottom: 5vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-section h2 {
    font-size: calc(var(--pfp-height) / 8);
    margin-bottom: 3vh;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* This is the container for all your skill/interest tags */
.item-container {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap to the next line */
    justify-content: center;
    gap: 15px;
}

/* The minimal "tag" style for each item */
.item-tag {
    background-color: #1a1a1a;
    border: 1px solid #333;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: calc(var(--pfp-height) / 15);
    transition: all 0.3s ease;
    cursor: default; /* Indicates it's not clickable */
}

.item-tag:hover {
    background-color: var(--Special_txt);
    border-color: var(--Special_txt);
    transform: translateY(-3px);
}

/* Responsive adjustments for mobile devices */
@media (max-width: 768px) {
    body {
        overflow: auto; /* Ensure scrolling is enabled on mobile */
    }

    .main-container {
        padding-top: 10vh; /* Add space at the top */
        height: auto; /* Allow the container to grow */
    }
    
    .about-section {
        flex-direction: column;
        text-align: center;
    }

    .about-text h1 {
        align-self: center; /* Center heading on mobile */
    }

    /* Adjust font sizes for smaller screens */
    .about-text h1, .content-section h2 {
        font-size: 6vw;
    }

    .about-text p, .item-tag {
        font-size: 3.5vw;
    }

    nav > ul > li > a {
        font-size: 3.5vw;
    }
    #pfp {
    /* aspect-ratio: 16 / 9; */
    width: 52vw;
    height: 65vw;
    min-width: 150px;
    min-height: 150px;
    
    
}
}

/* --- 1. FIX PAGE SCROLLING & CUT-OFF CONTENT --- */
/* This overrides the problematic styles from your main CSS file */
body {
    height: auto;               /* Allows the page to grow taller than the screen */
    min-height: 100vh;          /* Ensures the page is at least the height of the screen */
    overflow-y: auto;           /* Re-enables vertical scrolling */
    justify-content: flex-start;/* Aligns content to the top instead of the vertical middle */
    flex-direction: column;     /* Stacks the nav and main content vertically */
}


/* --- 2. MAKE THE NAV SCROLL WITH THE PAGE --- */
/* This makes the navigation bar a normal part of the page content */
nav {
    width: 90%;
    max-width: 900px; /* Aligns the nav's width with your main content */
    padding-top: 4vh;
}

nav > ul {
    position: static;          /* CRITICAL: This makes the nav scroll with the page */
    display: flex;
    justify-content: flex-end; /* Pushes "Home" and "Contact" links to the right */
    width: 100%;
}


/* --- 3. ADJUST MAIN CONTENT SPACING --- */
/* This ensures there is clean spacing below the nav */
.main-container {
    padding-top: 5vh;
}