/* sets the bodys font to arial the margin to 20 px and changes the background color and text color*/
body { font-family: Arial; margin: 20px; background-color: #ffff; color:#333; }

/*changes the margin for the head, section, and footer */
header, section, footer { margin-bottom: 40px; }

/* changes the color of the text for header 1-3*/
h1, h2, h3 { color: #2b3a67; }

/* changes the size of thumbnail and shapes the pictures to have a round box border*/
.thumbnail { width: 200px; height: auto; border-radius: 10px; }

/*changes the display and moves the images left */
figure { display: inline-block; margin: 10px; }

/*changes the font size and the color of the text */
figcaption { font-size: 0.9em; color: #555; }


/* Moves the text over to the left and changes the size of the image and adds a border */
.side-by-side { display: flex; align-items: center; gap: 20px; }

.side-by-side img { width: 200px; border-radius: 8px; }

/*adds a custom image for the start of the list for ul and ul1 */
ul { list-style-image: url("https://cdn4.iconfinder.com/data/icons/logos-and-brands-2/422/62_Creative_Commons_logo_logos-16.png"); padding-left:30px; }

ul1 { list-style-image: url("https://cdn3.iconfinder.com/data/icons/remixicon-business/24/creative-commons-fill-16.png"); padding-left:px;}

/*makes it so that the audio is above the video and aligns them */
audio, video { display: block; margin-top: 10px; }

/* Changes the size of the letter the color and adds a border to the top of the footer to seperate it from the main body */
footer { font-size: 0.9em; color: #666; border-top: 1px solid #ccc; padding-top: 10px; }

/* while hovering links changes color and adds underline */
a:hover {color: #003366; text-decoration: underline; }