/* elements */
body {
    background-color: #f0f0f0;
}

h1 {
    color: 009933;
    /* color for heading text */
    text-align: center;
    /* text styling: alignment */
    text-shadow: 1px 1px 2px #aaa;
    /* text styling: shadow */
    border: 2px solid #009933;
    /* added border */
}

p {
    font-family: Arial, sans-serif;
    /* 'web safe' font */
}

h2 {
    font-family: 'Roboto', sans-serif;
    /* 'custom' font */
}

/* grouped selectors */
h1,
h2,
p {
    margin: 10px;
}

/* descendant selector */
nav ul li {
    list-style-type: none;
    /* removes bullet points from list items */
}

/* independant class */
.highlight {
    background-color: yellow;
}

/* dependant class (missing __.button) */
.button {
    padding: 10px 15px;
}

/* REMOVE ALL FLOATS FOR WK 8 ASSIGNMENT (INLINE STYLE INSTEAD OF FLOAT) */

/* Image styles */
img {
    padding: 10px;
    background-color: #f0f0f0;
    border: 2px solid #ccc;
    margin: 10px;
}

/* Banner and logo reset */
.banner,
.logo {
    all: unset;
}

/* Background image classes */
.backgroundSection1 {
    background-image: url('background1.jpg');
    background-size: cover;
    height: 300px;
    color: black;
    /* Text color */
}

/* pseudo class */
a:hover {
    color: red;
    /* changes link color when hovering */
}

/* Container styles */
#container {
    width: 90%;
    /* Liquid width */
    margin: 0 auto;
    /* Center the container */
    background-color: #fff;
    /* Optional background color */
    padding: 20px;
    /* Padding inside the container */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    /* Optional shadow for depth */
}

/* navigation styles */
nav {
    text-align: center;
    background-color: #333;
    /* dark background for nav */
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    /* flexbox for inline layout */
}

nav ul li {
    margin: 0 15px;
    /* space between menu items */
    display: inline-block;
    /* Use inline-block for items */
}

nav a {
    color: white;
    /* text color for links */
    text-decoration: none;
    /* removes underline */
    padding: 10px 15px;
    /* add padding for clickable area */
}

nav a:hover {
    background-color: #575757;
    /* background color when hovering */
}