/* elements */
body {
    background-color: aliceblue;
}

h1 {
    color: blue;
    text-align: center;
    text-shadow: 1px 1px 2px #aaa;
    border: 2px solid rgb(0, 0, 0);
}

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

p {
    font-family: Arial, Helvetica, sans-serif;
    /* 'web safe' 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: blue;
}

/* dependant class */
.text {
    font-size: 16px;
    color: black;
}

/* Dependent class for emphasized text */
.text--bold {
    font-weight: bold;
}

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

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

/* navigation styles */
nav {
    clear: both; /* Ensures the nav is below nay floated elements */
    background-color: #333;
    /* dark background for nav */
}

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

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

nav ul li {
    margin: 0 15px;
    /* space between menu items */
}

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

/* Float classes */
.floatLeft {
    float: left;
    margin: 0 20px 10px 0;
    /* Adjusts spacing */
}

.floatRight {
    float: right;
    margin: 0 0 10px 20px;
    /* Adjusts spacing */
}

.clearFloat {
    clear: both;
}

/* New styles for dog items */
.dog-item {
    display: flex;
    /* Flexbox to align image and text */
    align-items: center;
    margin-bottom: 20px;
    /* Space between dog items */
}

.dog-item img {
    margin-right: 15px;
    /* Space between the image and text */
}

/* Ensure images are responsive */
.dog-item img {
    max-width: 100%;
    /* Responsive image */
    height: auto;
    /* Maintain aspect ratio */
}