/*Body STUFF*/
body { 
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif; /* Font used on aaronhasty.com */
    line-height: 1.4; /* Slightly increased line-height for readability */
    color: #a2a2a6;
    background-color: #26262d; /* Light background color */
}
/*NAV STUFF*/
nav {
    background-color: #31313a; /* Background color for the nav bar */
    padding: 10px;
    position: fixed; /* Fixes the nav bar to the top of the viewport */
    top: 0; /* Aligns the nav bar to the top of the page */
    left: 0; /* Ensures the nav bar starts from the left */
    width: 100%; /* Make the nav bar span the entire width of the screen */
    z-index: 1000; /* Ensures the nav stays on top of other elements */
}
nav ul {
    list-style-type: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox to align items horizontally */
    justify-content: space-around; /* Evenly space the items */
}
nav li {
    display: inline-block; /* Ensure the list items appear in a row */
}
nav a {
    text-decoration: none; /* Remove underline from links */
    color: #f0f0f0; /* Text color */
    padding: 10px 20px; /* Add some padding around the links */
    display: block; /* Make the entire area clickable */
}
nav a:hover {
    background-color: #26262d; /* Change background color on hover */
    color: #e67e22; /* Ensure text color stays white */
}
nav button{
    display:none;
}
/* Container for content */
.container {
    max-width: 900px; /* Slightly wider container */
    margin: 0 auto;
    margin-top: 20px;
    padding: 30px; /* Increased padding for spacious feel */
    background: #31313a; /* White background for content area */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Softer shadow for depth */
}
/*HeadShot Stuff*/
img[alt="OL Logo"]  {
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    max-width: 40%; /* Ensures responsiveness */
    height: auto;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto', sans-serif; /* Consistent font family */
    color: #f0f0f0; /* Dark text color */
}
h1 {
    border-bottom: 2px solid #e67e22; /* Orange underline for emphasis */
    padding-bottom: 0px; /* Space between text and underline */
    margin-bottom: 12px; /* Space below heading */
    scroll-margin-top: 50px;
}
h2 ,p {
    margin: 5px; /* Space above heading */
}
p {
    margin-bottom: 12px;
}
h3, h4, h5, h6 {
    font-size: 1.5rem; /* Adjust sizes for subheadings */
    margin-top: 0px;
    margin-bottom: 0px;
}
/* Links */
a {
    color: #e67e22; /* Orange color for links */
    text-decoration: none;
    font-weight: bold; /* Bold links for visibility */
}
a:hover {
    text-decoration: underline;
}
/* Code blocks */
pre {
    background: #f4f4f4; /* Light grey background for code blocks */
    padding: 15px; /* Increased padding */
    border-radius: 6px; /* Rounded corners */
    overflow-x: auto;
    border: 1px solid #ddd; /* Light border for definition */
    margin-bottom: 20px; /* Space below code blocks */
}
code {
    background: #f4f4f4; /* Light grey background for inline code */
    padding: 3px 6px; /* Slightly increased padding */
    border-radius: 4px;
    font-size: 0.9rem; /* Adjust font size for readability */
}
/* Lists */
ul, ol {
    margin: 0;
    padding: 0;
    padding-left: 2rem;
}
ul li, ol li {
    margin: 0px; /* Increased spacing between list items */
}
/* Specific to certifications and skillset */
#contact + ul,
#certifications + ul,
#skillset + ul
{
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Three columns layout */
    gap: 1.5rem; /* Increased spacing between columns */
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 1rem; /* Adjust font size to match overall design */
}

#skillset + ul {
    grid-template-columns: repeat(4, 1fr); /* Three columns layout */
}
#certifications + ul ul,
#skillset + ul ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    padding-left: 1.5rem; /* Increased indent for nested lists */
    font-size:0.8rem;
}
@media (max-width: 768px) {
    nav ul {
        flex-direction: column; /* Stack the links vertically */
        display: none; /* Initially hide the menu */
        width: 100%; /* Ensure the menu takes up the full width */
    }
    nav li {
        text-align: center; /* Center the links */
        display: block; /* Ensure each item takes up the full width */
    }
    nav ul.show {
        display: flex; /* Show the menu when toggled */
    }
    .menu-toggle {
        display: block; /* Show the menu toggle button */
        cursor: pointer;
        color: #f0f0f0;
        padding: 10px 20px;
        background-color: #31313a;
        border: none;
        width: 100%;
        text-align: center;
    }
    .menu-toggle:hover {
        background-color: #555;
    }
    #skillset + ul {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns on tablets */
    }
}