/* Base styles */
body {
    font-family: Arial, sans-serif; /* Use a modern, easy-to-read font */
    color: #004a77; /* Dark blue color for primary text */
    background-color: #fff; /* White background to keep things clean and simple */
    margin: 0;
    padding: 0;
}

/* header css */

header {
    font-family: Arial, sans-serif; /* Use a modern, easy-to-read font */
    text-align: left;
    margin: 0 auto;
    padding: 20px 0;
    color: #004a77; /* Dark blue color for primary text */
}

header h1 {
    margin: 0;
    font-size: 12vw; /* Scales the font size based on the width of the viewport */
}

header h1 a {
    color: #004a77; /* Or any color you prefer */
    text-decoration: none; /* Removes underline from links */
}

/*image on homepage */

.image-quote-container img {
    border: 5px solid #ff8100; /* Adjust border size and color as needed */
    display: block;
    margin: 0 auto; /* Center the image */
}

.image-quote {
    color: #333; /* Adjust the color as needed */
    text-align: center; /* Center the quote text */
    margin-top: 20px; /* Space between the image and the quote */
    font-style: italic; /* Optional: style for the quote */
}


/* blue css */

h1, h2, p {
    margin: 0.5em 0; /* Add some spacing around text elements */
}

a {
    color: #00adee; /* Bright blue color for links for good contrast and readability */
    text-decoration: none; /* Removes underline from links */
}

a:hover, a:focus {
    text-decoration: underline; /* Adds underline on hover/focus for better usability */
}

/* Navigation styles */
nav {
    background-color: #004a77; /* Dark blue background for the navigation */
    color: #fff; /* White text color for contrast */
}

nav ul {
    list-style-type: none; /* Remove bullet points from list */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
    display: flex; /* Display list items in a row */
    flex-direction: column; /* Stack list items vertically for mobile */
    align-items: left; /* Center items horizontally */
}

nav ul li {
    padding: 10px; /* Add some padding to list items */
}

nav ul li a {
    color: #fff; /* Ensure link colors are white for readability */
}

/* Highlight different sections with colors */
.resume-link { background-color: #ff8100; } /* Orange for Resume */
.gallery-link { background-color: #00adee; } /* Light blue for 3D Kitchens */
.printing-link { background-color: #ffd200; } /* Yellow for Graphic Arts */
.publications-link { background-color: #ff8100; } /* Reuse orange for Publications */
.contact-link { background-color: #ffd200; } /* Yellow for Contact, ensuring good color distribution */

/* Media Queries for larger screens */
@media (min-width: 768px) {
    nav ul {
        flex-direction: row; /* List items in a row on larger screens */
    }
}

/* Basic styling for table */

th {
    text-align: left; 
}



/* Basic styling for gallery */
        .gallery-container {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
        }
        .thumbnail {
            cursor: pointer;
        }
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0,0,0);
            background-color: rgba(0,0,0,0.9);
        }
        .modal-content {
            position: relative;
            margin: auto;
            padding: 0;
            width: 90%;
            max-width: 1200px;
        }
        .close {
            color: #aaaaaa;
            position: absolute;
            top: 10px;
            right: 25px;
            font-size: 35px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
        .modal-img {
            margin: auto;
            display: block;
            width: 80%;
            max-width: 700px;
        }