/* 
@author Grace Bero
index.css

This is a CSS file that contains the styles for the index (home) page of the website
index.html will get styles from this file
*/

/* Header */
#degree {
    margin-top: -50px;
}

#about-me-text {
    display: flex; /* Enable flexbox */
    justify-content: center; /* Horizontally center the content */
    align-items: center; /* Vertically center the content */
    text-align: center; /* Center the text inside the <p> */
    height: 100%; /* Ensure the div takes up available height (if necessary) */
    padding: 20px; /* Add padding for spacing */
}

/* Recent Project Sections */
#recent-project {
    display: flex;
    flex-wrap: wrap; /* Ensures responsiveness */
    background-color: #f5f5f5; /* Light gray background */
    border: 1px solid #dcdcdc; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add spacing inside the box */
    margin: 20px 0; /* Add vertical spacing around the box */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

#recent-project-text {
    flex: 1; /* Allows text block to grow */
    align-items: flex-start;
    padding: 20px;
}

#wesley-photo {
    display: flex;
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
    flex-direction: column; /* Stack photo and buttons vertically */
    gap: 20px; /* Gap between photo and buttons */
}

.picture-container {
    display: flex;
    flex-direction: column; /* Stack photo and buttons */
    align-items: center; /* Center photo and buttons */
    gap: 20px; /* Add spacing between photo and buttons */
}

#wesley img {
    width: 300px;
    height: auto;
    object-fit: cover; /* Ensures the image fits nicely */
    border-radius: 8px; /* Optional: Rounded corners for the image */
}

#wesley-buttons {
    display: flex;
    flex-direction: column; /* Stack buttons */
    align-items: center; /* Center buttons */
    gap: 10px; /* Add spacing between buttons */
    position: static; /* Ensure it scrolls with the page */
    z-index: auto; /* Reset stacking order so it doesn't overlap the navbar */
    margin-top: 20px; /* Add space to separate it from the navbar */
}

#headshot img {
    width: 200px; /* Adjust width for the oval shape */
    height: 250px; /* Adjust height for the oval shape */
    border-radius: 50%; /* Creates an oval because width and height differ */
    object-fit: cover; /* Ensures the image fits nicely */
}

/* Courses section */
#courses {
    display: flex; /* Use flexbox for columns */
    justify-content: space-between; /* Space out the children */
    gap: 20px; /* Add gap between columns */
    text-align: center;
}

u1 {
    text-align: left;
    font-size: 1.2em;
}


#current {
    background-color: #6a7b99; /* Light gray background */
    border: 1px solid #303848; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add spacing inside the box */
    padding-top: 0; /* Remove top padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for depth */  
}

#past {
    background-color: #BF9268; /* Light gray background */
    border: 1px solid #856649; /* Light gray border */
    border-radius: 10px; /* Rounded corners */
    padding: 20px; /* Add spacing inside the box */
    padding-top: 0; /* Remove top padding */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optional: Add a subtle shadow for depth */
}

#skills img {
    width: 100px; /* Set the desired width */
    height: 100px; /* Maintain aspect ratio */
}

/* Certifications Section */
#certifications {
    display: flex;
    justify-content: center;       /* Center child sections */
    align-items: center;           /* Vertically center content */
    gap: 20px;
    flex-wrap: wrap;
    text-align: center; /* Center text inside the section */
    background-color: #f5f5f5;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    padding: 20px;
    margin: 20px 0;
}


#certifications .child {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
    display: flex;
    flex-direction: column;
     /* Center content inside the child */
}

#certifications .child li {
    text-align: left;
}


/* Optional: make sure image scales properly */
#certifications .child img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}