/* Reference */
/* https://www.w3.org/TR/css-color-4/#named-colors */


/* The main navigation bar container */
.navbar {
    width: 100%;                         /* Make navbar span the full width of the page */
    text-align: center;                  /* Center the nav items horizontally */
    margin: 30px 0 40px 0;               /* Add spacing above (30px) and below (40px) the navbar */
    font-family: "Helvetica Neue", Arial, sans-serif; /* Clean sans-serif academic font */
}

/* Style the unordered list inside the navbar */
.navbar ul {
    list-style: none;                    /* Remove default bullet points */
    padding: 0;                          /* Remove default browser padding */
    margin: 0;                           /* Remove default browser margin */
}

/* Each navigation item <li> */
.navbar li {
    display: inline;                     /* Display items in a row instead of stacked vertically */
    margin: 0 30px;                      /* Horizontal spacing between menu items */
}

/* Navigation links */
.navbar a {
    text-decoration: none;               /* Remove default underline from links */
    color: #333;                         /* Medium-dark gray text (professional look) */
    font-size: 25px;                     /* Large font size for high visibility */
}

/* Hover effect when mouse goes over a link */
.navbar a:hover {
    text-decoration: none;               /* Keep underline removed on hover */
    color: deepskyblue;                  /* Bright blue hover color for interaction feedback */
}

/* Activate current page link styling */
.navbar a.active {
    color: royalblue;
    font-weight: bold;
}

/* main page content*/
.post{
    max-width: 1200px;                   /* limit the width of the content for better readability */
    margin: auto;                       /* center the content horizontally */
    font-family: "Georgia", serif;      /* serif font for a classic, academic look */
    line-height: 1.6;                   /* increase line height for better readability */
}

/* name */
.post-header{
    text-align: center;
    font-size: 80px; /* font size of the name */
    font-weight: bold;  /* make the name bold */
}

/* article */
article{
    font-family: "Segoe UI", sans-serif;
    font-size: 25px;
}
/* profile position */
.profile {
    float: right;            /* positions profile to the right */
    /*margin-left: 400px;    /* creates space between text and photo *!*/
    text-align: center;
    max-width: 100%;      /* ensure the maximum width is the whole screen */
}

/*.float-right {*/
/*    float: right !important;*/
/*}*/

#profile-image img{
    width: 350px;
    height: 525px;
    /*object-fit: cover; !* ensures image scales nicely *!*/
}

/* social icon position */
.social {
    text-align: center;
}


/* hyperlink properties */
a{
    color: deepskyblue;
    text-decoration: none;
}

a:hover {
    color: royalblue;
    text-decoration: underline;
}

/* contact icon properties*/
.contact-icons {
    display: grid;                /* stack rows vertically */
    grid-template-columns: repeat(4, auto);       /* 4 columns for icons */
    grid-template-rows: auto auto;      /* 2 rows for icons */
    gap: 10px 10px;                     /* spacing between rows */
    justify-content: center;          /* center rows horizontally */
}


.contact-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
}

.contact-icons img {
    width: 70px;                  /* uniform icon width */
    height: 70px;                 /* uniform icon height */
    display: block;               /* remove inline spacing differences */
    object-fit: contain;          /* preserve aspect ratio while fitting to box */
    box-sizing: border-box;       /* ensure padding/border don't change size */
    vertical-align: middle;
    stroke: #000;                 /* line color for outline-based icons */
    fill: #000;                   /* fill color for solid icons */
    opacity: 0.9;                /* soften icon color for clean look */
    transition: transform 0.2s ease, opacity 0.2s ease, filter 0.2s ease; /* smooth hover animation */
}

.contact-icons a.row2 img {
    width: 55px;
    height: 55px;
}

.contact-icons a:hover img {
    /* enlarge and make fully opaque */
    opacity: 1;                   /* make icon fully dark on hover */
    transform: scale(1.08);       /* gently enlarge icon when hovered */
    /* Tint to lightskyblue (#87CEFA) */
    filter: invert(79%) sepia(14%) saturate(2408%) hue-rotate(174deg) brightness(103%) contrast(96%);
}



.contact-note{
    font-size: 15px;
    text-align: center;
}

.image-row{
    display: grid;
    grid-template-columns: repeat(2, 1fr);   /* 2 images per row */
    gap: 20px;                               /* spacing between images */
    justify-items: center;                   /* center each image */
    margin-top: 20px;
}

.image-row img {
    width: 300px;
    height: 200px;
    /*object-fit: contain;*/
}


/* project*/
/* project year*/
.project h3{
    font-size: 45px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* project title*/
.project-title{
    font-size: 30px;
    font-weight: bold;
}


/* footer */
.copy-right{
    text-align: center;
    font-size: 25px;
    margin-top: 40px;
    margin-bottom: 40px;
}