/* Styles the body by changing the font, places the margin and padding on defult settings
adjust the line height, and changes the background color to light grey*/
body { font-family: Arial, sans-serif; margin: 0; padding: 0;
line-height: 1.6; background-color: #f0f2f5;}

/*adjust header 1 by changing font, text color to white, and centers the text */
h1 {font-family: Arial, sans-serif; color: white; text-align: center;}

/*adjust header 2 by changing font, text color to a very dark blue, and centers the text */
h2 {font-family: Arial, sans-serif; color: #2c3e50; text-align: center; }

/* Styles class header by hcnging the background color, the text color to white,
aligns text to center, pads it right by 20px and adds a border bottom to get it 
a shadded look*/
.header { background-color: #3498db; color: white; text-align: center;
padding: 20px; border-bottom: 5px solid #2980b9; }

/* Styles the table to collaspse, adjust the margin, changes the background color, and
adjust the size of the border and hides anything that goes outside the border with
overflow*/
table { border-collapse: collapse; margin: 20px auto; background: white;
border-radius: 10px; overflow: hidden; }

/*styles the table header and data, by adding a border with the size and placement being
adjusted, centers all text, and vertical aligns it.*/
th, td { border: 1px solid black; padding: 10px; width: 120px; height: 50px;
text-align: center; vertical-align: middle; }

/*styles caption in be in bold and adjust the margin while the text is centered*/
caption { font-weight: bold; margin-bottom: 10px; text-align: center }

/*styles form by changing the background color, adjust postition of the background,
due to maring and padding, adds a border and changes the size because of width and
radius*/
form { background: #fff; margin: 20px auto; padding: 20px; border: 2px solid #ccc;
border-radius: 10px; width: 60%; }

/*styles label to have bold text */
label {font-weight: bold; }

/* Styles class footer to add a border, as well as changes the background color and aligns the text to the center */ 
.footer { width: 100%; background-color: #2c3e50; color: white; text-align: center; padding: 15px; border-top: 4px solid #34495e; margin-top: 10px; } 

/*adds a specfic color to links when not being used*/
a { color: #0066cc; text-decoration: none; } 

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

/* changes color when the link has been visited */
a:visited { color: #800080; }

/*adjust the size of the image to make it smaller due to height and width */
img {height: auto; width:150px;}