/* MasterResumeStyles.css */
/* Styles for the Master Resume page */

/* General body styling */
body {
    font-family: "Times New Roman", Arial, sans-serif; /* Set the font family for the entire page */
    color: #000000; /* Set text color to black */
    background-color: #ffffff; /* Set background color to white */
}

body, header, #employment, #volunteer, #education, .skill-box, .hire-me-button {
    text-align: center; /* Center-align text for the body and specific sections */
}

header, #employment, #volunteer, #education, .skill-box, .hire-me-button {
    border: 3px solid #707070; /* Adds a border to the skill boxes */
    margin-bottom: 20px; /* Adds bottom spacing between the boxes */    
}

/*Style for the header, adds padding to create space around the content and improve readability*/   
header, main, nav, #employment ul, #scroll-box {
    max-width: 1000px; /* Sets a maximum width to prevent it from stretching too wide on large screens */
}

.hire-me-button {
    max-width: 200px;
}

header, #scroll-box, #employment, #volunteer, #education, .skill-box, #employment ul {
   padding: 10px; /* Adds padding inside the boxes for better spacing of content */ 
}

header, #scroll-box, #employment, #volunteer, #education, .skill-box, .hire-me-button {
    box-shadow: 0 0 24px 4px #6a6969; /* Adds a subtle shadow effect to the boxes for depth and visual interest */
    border-radius: 12px;
}

header, main, nav, p, #employment ul, #scroll-box, .hire-me-button {
    margin: 0 auto; /* Centers the header horizontally within the viewport */
}

p {
    max-width: 90%; /* Sets a maximum width for paragraphs to improve readability */
    margin-bottom: 16px; /* Adds bottom spacing between paragraphs for better separation of content */
}

ul, .skill-box ul, #employment ul {
    text-align: left; /* Aligns list items to the left for better readability */
}

main, .intro-row {
    gap: 20px; /* Gap between grid items */
}

main {
    padding: 24px;
    display: grid; /* Use CSS Grid for layout */
    grid-template-columns: 1fr 1fr; /* Lock desktop layout to exactly two columns */
}

a {
    color: #000000; /* Set link color to white */
    text-decoration: none; /* Remove underline from links */
}

/*Style for links on hover*/
a:hover {
    color: #4c43ff;
    text-decoration: underline;
}

/*Style for links when they are focused (tabbing through the content links), adds an outline for better accessibility*/
a:focus-visible {
    outline: 2px solid #2843af;
    outline-offset: 4px;
}

nav, nav ul, .intro-row, .hire-me-button {
    display: flex; /* Uses flexbox to layout navigation items in a row */ 
}

nav, .intro-row, .hire-me-button {
    align-items: center; /* Vertically centers the navigation items within the nav bar */
}

/*Style for navigation items */
nav, .hire-me-button {
    justify-content: center; /* Aligns navigation items to the center the nav bar */
    gap: 12px; /* Adds space between navigation items for better readability */
    padding: 13px; /* Adds horizontal padding to the nav bar for better spacing on smaller screens */
} 

nav h3, nav li {
    padding: 0;/* Removes any default padding from the h3 element for a cleaner look */
}

/* makes navigation links look like buttons with padding, border, rounded corners, and a semi-transparent background for a modern and clean appearance */
nav a {
    display: inline-block;
    padding: 10px 15px; /* Adds padding inside the navigation links for better clickability and spacing */
    border: 2px solid #a4a4a4;
    border-radius: 999px;
    background-color: #c6c6c6;
}

nav ul {
    flex-wrap: wrap; /* Allows navigation items to wrap to the next line on smaller screens */
    gap: 16px; /* Adds space between navigation items for better readability */
    list-style-type: none; /* Removes default bullet points from the list */
}

/*Style for navigation list items, adds spacing and padding for better readability*/
nav li, .intro-row h1 {
    margin: 0;
}


#scroll-box, #employment ul {
    overflow-y: auto; /* Enable vertical scrolling */
}

/* Style for the scrollable box containing the Skill Sets */
#scroll-box {
    margin-top: 20px;
    max-height: 977px;
    border: 1px solid #707070; /* Adds a border to the scroll box */
}

.skill-box ul {
    columns: 2; /* Split content into two columns */
    column-gap: 20px; /* Gap between columns */
}

#employment ul {
    list-style-type: none; /* Removes list bullets */
    max-height: 300px;
}

.img-1, .img-2 {
    transform: translateY(20px); /* Move the image 20px down */
    display: block; /* Ensure the image behaves as a block element */
    max-width: 150px; /* Set a maximum width for the images */
    max-height: 150px; /* Set a maximum height for the images */
}

.intro-row {
    justify-content: center;
}

@media (max-width: 900px) {
    main {
        grid-template-columns: 1fr; /* Stack columns on smaller screens */
    }
    .img-1,
    .img-2 {
        max-width: 85px; /* Adjust the maximum width for smaller screens */
        max-height: 85px; /* Adjust the maximum height for smaller screens */
    }
}