/* From Google Fonts for font style */
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Tokumin&display=swap');

html, body {
    font-family: "Kaisei Tokumin", serif;
    font-weight: 400;
    font-size: 20px;
    font-style: normal;
    margin: 0 auto;
    background-color: #FFFDFC;
}

/* Element Sizes */
h1 {
    font-size: 2rem;
}

p {
    font-size: 1rem;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 1400px; /* Max Width and Margins */
    margin-left: auto;
    margin-right: auto;
    padding: 0 1rem;
    margin-bottom: 60px;
    box-sizing: border-box; /* Defined height and width will include padding and border */
}

.introHeader {
    /* Top Right Bottom Left - Spacing Order */
    margin: 0rem 0rem 2rem 0rem;
    text-align: center;
    font-size: 2rem;

    /* Minimum height */
    min-height: 1.5em;
}

/* - - - - - - - - - - Home Navigation Bar - - - - - - - - - - */
.homeNavBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    /* For Spacing */
    justify-content: space-between; /* Distribution of items with equal spacing between */
    width: 100%;
    max-width: 800px;
}

/* Winglet / Icon class */
.winglet img {
    width: 175px; /* Default size for large screens, matching your previous HTML attribute */
    height: auto; /* Maintains aspect ratio */
    /* You had a hover effect for this image already, keep it */
}

/* Home Navigation Bar */
.homeNavBarLinks {
    display: flex;
    flex-direction: row; /* Keeps the Links inline horizontally */
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 4.25rem;
}

.homeNavBarLinks a {
    text-decoration: none;
    font-weight: 1000;
    color: black;
    font-size: 1.5rem;
}

.homeNavBarLinks a:hover {
    color: #5992F5;
}

/* - - - - - - - - - - Home Social Bar - - - - - - - - - - */
.homeSocialBar {
    display: flex; /* Make it a flex container */
    flex-direction: row;
    justify-content: center; /* Center the social icons horizontally */
    /* Top Right Bottom Left - Spacing Order */
    margin: 0.75rem 0rem 6rem 0rem;
    width: 100%; /* Allows it to take full width of its parent (.container) */
    max-width: 650px; /* Constrain max width for aesthetics if icons get too spread out */
}

.homeSocialBar ul {
    display: flex; /* Make the ul a flex container too */
    list-style-type: none;
    margin: 0;
    padding: 0;
    gap: 6rem; /* Space between each social icon */
    align-items: center; /* Ensure icons are vertically aligned if they have different sizes */
}

.homeSocialBar a {
    color: black; 
    text-decoration: none; /* Good practice for links */
}

/* Set the size and default color on the parent <a> tags */
.homeSocialBar a .social-icon {
    width: 2.5rem; 
    height: 2.5rem;
}

/* Hover Color for the <a> tags (icon will inherit) */
.homeSocialBar a:hover {
    color: #5992F5;
}

/* - - - - - - - - - - Navigation Bar - - - - - - - - - - */
.navBar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px;;
}

.navBarLinks {
    border: 4px black;
    border-style: solid none;
    padding: 35px 50px;
}

.socialLinks {
    display: flex;
    gap: 2em;
    margin: 20px;
}

.socialLinks a {
    color: black; 
    text-decoration: none; /* Good practice for links */
}

.socialLinks a .social-icon {
    width: 3rem; 
    height: 3rem;
}

/* Hover Color for the <a> tags (icon will inherit) */
.socialLinks a:hover {
    color: #5992F5;
}

.winglet img:hover {
    opacity: 0.5;
}

/* About Container/Block */
.about-container {
    /* Sizing */
    display: flex;
    width: 85%;
    max-width: 1200px;

    flex-direction: row;
    align-items: center;
    padding: 30px; /* Internal padding*/
    gap: 50px; /* Space between the image and the text */

    background-color: #fff; /* White background for the section */
    border-radius: 15px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    box-sizing: border-box; /* Include padding in width calculation */

    /* Spacing and Margin */
    margin-bottom: 2rem;

}

/* Profile Picture */
.about-image-wrapper {
    flex-shrink: 0; /* Prevent the image container from shrinking */
    width: 300px; /* Fixed width for the image container */
    height: 300px; /* Fixed height to make it square */
    border-radius: 50%; /* Make the image container circular */
    overflow: hidden; /* Hide any parts of the image that go outside the circle */
    border: 5px solid #007bff; /* Optional: a blue border around the circular image */
    display: flex; /* Use flex to center the image if it doesn't perfectly fill */
    justify-content: center;
    align-items: center;
}

.profile-pic {
    width: 100%; /* Make the image fill its circular container */
    height: 100%;
    object-fit: cover; /* Crop the image to fill the container while maintaining aspect ratio */
    display: block; /* Removes extra space below inline images */
}

/* About Content / Text */
.about-content {
    flex-grow: 1; /* Allow the text content to take up the remaining space */
    text-align: left;
    line-height: 1.6; /* Improve readability of paragraphs */
    font-size: 1.1em; /* Slightly larger font size for the main text */
}

.about-content p {
    margin-bottom: 1em; /* Space between paragraphs */
}

/* - - - - - - - - - - Footer - - - - - - - - - - */
footer {
    text-align: center;   
    margin-top: 5px;   /* Spacing above footer */
    padding: 10px;
    color: #a0a0a0;
    font-size: 0.75rem;
}

/* - - - Fade In Animation - - - */
/* Initial State (Hidden) */
.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;

    visibility: hidden;
}

/* Visible State (Active) */
.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0); /* Return to normal position */
    visibility: visible;
}


/* - - - - - For media devices - - - - - */
/* On screens that are 992px or less - medium screens */
@media screen and (max-width: 992px) {
  .winglet img {
    width: 150px;    /* Scaling down logo for medium screens */
  }
  .homeNavBar {
    max-width: 700px;
  }
  .homeNavBarLinks {
    gap: 3rem;
  }

}


/* On screens that are 768px or less (mobile) */
@media screen and (max-width: 768px) {
    .introHeader {
        /* Top Right Bottom Left - Spacing Order */
        margin: 6rem 0rem 2rem 0rem;
    }
    .winglet img {
        width: 150px; /* Scale down logo further for small screens */
    }
    .homeNavBar {
        flex-direction: column;     /* Changes the stacking of logo and links to be vertical */
        gap: 0.75rem; /* Add vertical gap when stacked */
        max-width: 90%; /* Allow it to take more width on smaller screens, while still being centered */
    }
    .homeNavBarLinks {
        flex-direction: column;     /* Changes the stacking of logo and links to be vertical */
        align-items: center;        /* Center the stacked links */
        gap: 1.25rem;          /* Adjust gap for stacked links */
    }
    .homeNavBarLinks a {
        font-size: 1.25rem;
    }
    .homeSocialBar {
        margin-top: 3rem;
    }

    /* Changes for Social Media Icons */
    .homeSocialBar ul {
        display: flex;
        flex-direction: row; /* Keep it a row by default for the first two */
        flex-wrap: wrap; /* Allow items to wrap to the next line */
        justify-content: center; /* Center items in the row */
        gap: 3rem; /* Adjust horizontal gap for mobile */
        row-gap: 1.5rem;
    }
    .homeSocialBar ul li {
        /* Remember to change calc() to reflect the gap value in .homeSocialBar ul {}
         */
        flex-basis: calc((100% - 3rem) / 2); /* Roughly 2 icons per row, accounting for gap */
        max-width: calc((100% - 3rem) / 2); /* Ensures it doesn't grow beyond half */
        text-align: center; /* Ensures the icon (content of li) is centered within its flex-basis */
    }
    /* Pushes Last Item to its own row (if there's an odd amount) */
    .homeSocialBar ul li:last-child:nth-child(odd) {
        flex-basis: 100%;
    }

    .about-container {
        flex-direction: column; /* Stack image and text vertically on smaller screens */
        align-items: center; /* Center items when stacked */
        gap: 30px;
        padding: 20px;
        max-width: 90%; /* Allow section to take more width on mobile */
    }

    .about-image-wrapper {
        width: 200px; /* Smaller image on mobile */
        height: 200px;
    }

    .about-content {
        text-align: center; /* Center text on mobile for better readability */
    }
   
}


@media (max-width: 480px) {
    .about-container {
        padding: 15px;
        gap: 20px;
    }
    .about-image-wrapper {
        width: 150px; /* Even smaller image on very small screens */
        height: 150px;
    }
    .about-content {
        font-size: 1em; /* Adjust font size if needed */
    }
}