/*
    CSU Personal Page Styling
    -------------------------
    Author: Arif Sheikh
    Email: arif_dot_sheikh_AT_colostate_dot_edu
    Description: This CSS file provides a reusable styling template for creating personal webpages for CSU graduate students and faculty.
    License: Free to use under a Creative Commons Attribution 4.0 International License
    URL: https://creativecommons.org/licenses/by/4.0/
    Last Updated: December 13, 2024
*/


<style>
    /* General Styles for the entire webpage */
/* Add padding to account for the fixed header */
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    color: #1e4d2b; /* CSU Green for text */
    background-color: #f5f5f5;
    padding-top: 130px; /* Height of the fixed header */
    padding-bottom: 100px; /* Height of the fixed footer */
}



/* Ensure the main content doesn't overlap */
main {
    margin-top: 130px; /* Offset for header */
    margin-bottom: 100px; /* Offset for footer */
}

    /* Stationary Header and Navigation */
    header {
        background-color: #1e4d2b; /* CSU Green for the header background */
        color: #fff; /* White text for contrast */
        position: fixed; /* Fix header at the top of the page */
        top: 0;
        left: 0;
        width: 100%; /* Make header span the full width of the page */
        z-index: 1000; /* Ensure header stays above other elements */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for a clean effect */
        display: flex; /* Use flexbox for horizontal alignment */
        align-items: center; /* Center items vertically */
        justify-content: center; /* Align items horizontally */
        padding: 1rem 2rem; /* Add spacing inside the header */
    }

    /* Styling for the logo inside the header */
    .logo {
        max-height: 60px; /* Ensure logo doesn't exceed 60px height */
        margin-right: 1rem; /* Add spacing between logo and text */
    }

    /* Title and subtitle text in the header */
    header h1 {
        font-size: 1.8rem; /* Adjust size for the main title */
        margin: 0;
        white-space: nowrap; /* Prevent text wrapping */
    }

    header p {
        font-size: 0.9rem; /* Smaller font for subtitle */
        margin: 0;
        white-space: nowrap; /* Prevent text wrapping */
    }

    /* Navigation Menu below the header */
    nav {
        background-color: #c8c372; /* CSU Gold for navigation background */
        color: #1e4d2b; /* CSU Green for text */
        position: fixed; /* Fix navigation just below the header */
        top: 75px; /* Position it right below the header */
        left: 0;
        width: 100%; /* Full width for navigation */
        z-index: 999; /* Stacked below the header */
        padding: 0.5rem 0;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for separation */
    }

    nav ul {
        display: flex; /* Horizontal menu layout */
        justify-content: center; /* Center-align menu items */
        list-style: none; /* Remove bullet points */
        margin: 0;
        padding: 0;
    }

    nav ul li {
        margin: 0 1.5rem; /* Add spacing between menu items */
    }

    nav ul li a {
        color: #1e4d2b; /* CSU Green for link text */
        text-decoration: none; /* Remove underlines from links */
        font-weight: bold; /* Make links bold */
        transition: color 0.3s; /* Smooth color transition on hover */
    }

    nav ul li a:hover {
        color: #d9782d; /* Accent PMS 021 for hover effect */
    }

    /* Main Section Styling */
    section {
        padding: 2rem 1rem; /* Add internal padding */
        max-width: 1200px; /* Limit section width for readability */
        margin: auto; /* Center sections on the page */
        background: #fff; /* White background for contrast */
        margin-bottom: 2rem; /* Add spacing between sections */
        border-radius: 8px; /* Rounded corners for clean design */
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    }

    /* Section Titles */
    section h2 {
        font-size: 2rem; /* Larger font for section titles */
        color: #1e4d2b; /* CSU Green */
        border-bottom: 3px solid #f2d535; /* Underline with CSU Accent */
        display: inline-block; /* Title underlining spans only the text */
        margin-bottom: 1rem;
    }
    
    
/* About Section Container */
.about-container {
    display: flex; /* Flexbox layout for better alignment */
    align-items: flex-start; /* Align content to the top */
    gap: 1.5rem; /* Add space between the image and text */
    flex-wrap: wrap; /* Wrap the text below the image if needed */
}

/* About Image */
.about-image {
    width: 200px; /* Fixed width for the image */
    height: 200px; /* Fixed height for the image */
    border-radius: 50%; /* Circular image */
    object-fit: cover; /* Ensures the image fits nicely */
    float: left; /* Aligns the image to the left */
    margin-right: 1.5rem; /* Add spacing to the right of the image */
    margin-bottom: 1rem; /* Adds space below the image */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/* About Section Text Styling */
.about-container p {
    margin: 0 0 1rem; /* Add spacing below paragraphs */
    line-height: 1.6; /* Improve text readability */
    color: #333; /* Darker gray for better contrast */
}


    /* Footer Styling */
    footer {
        background-color: #1e4d2b; /* CSU Green for footer background */
        color: #fff; /* White text for contrast */
        text-align: center; /* Center-align footer text */
        padding: 1rem 0; /* Add internal padding */
        position: fixed; /* Fix footer at the bottom */
        bottom: 0;
        left: 0;
        width: 100%; /* Make footer span the full width */
        z-index: 1000; /* Keep it above other elements */
        box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional shadow for effect */
    }

    footer a {
        color: #f2d535; /* CSU Gold for footer links */
        text-decoration: none; /* Remove underlines from links */
        font-weight: bold; /* Make footer links bold */
    }

    footer a:hover {
        color: #d9782d; /* Accent PMS 021 for hover effect */
    }
</style>