@charset "utf-8";

/* Browser background */
html {
    background-color: rgb(245, 156, 156);
}

/* Body */
body {
    font-family: Verdana, Geneva, sans-serif;
    color: rgb(255, 0, 94);
    background-color: ivory;
    margin: 0; /* Removes default margin */
    width: 90%; /* Sets the width to 90% */
    margin-left: auto; /* Centers the page on the left */
    margin-right: auto; /* Centers the page on the right */
    background-image: url(background.jpg);
    background-size: cover; /* Ensures the background covers the entire page */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-position: center; /* Centers the image */
}

/* Header */
header {
    text-align: center;
    padding: 20px;
}

/* Headings */
h2 {
    font-size: 1.3em;
}

h1, h2 {
    text-shadow: 4px 6px 5px gray;
}
    /* Navigation */
/* nav {
    background-color: rgb(120, 145, 165);
    padding: 15px;
    text-align: center;
}*/
nav ul {
    list-style: none; /* Removes default list styling */
margin: 0; /* Removes margin */
padding: 0; /* Removes padding */
}

nav li {
    display: block; /* Allows width to be applied */
    width: 20%; /* Each item takes up 20% of the nav width */
    float: left; /* Aligns items in a row */
}

nav a {
    display: block; /* Makes the entire area clickable */
    background-color: #ae0000; /* Set your desired background color */
    line-height: 2.8em; /* Sets the height of each link */
    text-decoration: none; /* Removes underline from links */
    text-align: center; /* Centers the text */
    color: white; /* Set default text color */
}

    nav a:hover {
        background-color: #2980b9; /* Color when hovered (coordinated with your site) */
        color: #ae0000; /* Contrasting font color */
    }
/* Main */
main {
    padding: 20px; /* Sets padding to 20px on all sides */
    margin-top: 35px; /* Adds a top margin of 35px */
}

/* Style only for images in the main section */
    main > img {
        width: 25%;
        padding: 25px;
        float: right;
    }

/* Style for header images */
header > img {
    width: 100%;
}

/* Footer */
body > footer {
    background-color: rgb(120, 145, 165);
    color: rgba(255, 255, 255, 0.6);
    font-weight: bold;
    font-size: 0.9em;
    line-height: 3em;
    text-align: center;
    margin-top: 10px;
    padding: 10px;
    clear: both;
}

/* Custom list marker */
.education-list {
    list-style-type: circle;
}
@media screen and (max-width: 768px) {
    body {
        width: 100%;
        margin: 0;
    }

    nav li {
        float: none; /* Remove float for navigation */
        font-size: x-large; /* Set font size */
        width: 100%; /* Full width for nav items */
    }

    nav a {
        border-bottom: 1px solid black; /* Bottom border for links */
    }

    /* Extra Credit: Navicon Menu */
    .navicon {
        display: block; /* Show Hamburger Icon */
    }

        .navicon:hover + ul {
            display: block; /* Reveal menu on hover */
        }

    img {
        width: 90%; /* Images under main section */
        float: none; /* No float */
    }
}
@media screen and (min-width: 769px) {
    /* Desktop-specific styles here */
    body {
        background-image: url('desktop-bg.jpg'); /* Example of a desktop background */
    }
    /* Other desktop styles */
}
.image-grid {
    display: grid; /* Use CSS Grid Layout */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive columns */
    gap: 10px; /* Space between grid items */
}

    .image-grid img {
        width: 100%; /* Make images fill the grid cell */
        height: auto; /* Maintain aspect ratio */
        display: block; /* Remove bottom space below images */
    }