/* 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*/

* {
  box-sizing: border-box; margin: 0; padding: 0;
}

body { font-family: Arial, sans-serif; margin: 0; padding: 30px;
line-height: 1.6; color: white; background-color: F0C7C0;}

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

/* Header styling */
header {
	text-align: center; margin-bottom: 30px; font-size: 30px; font-family: "Bree Serif", serif; font-weight: 400; font-style: normal; padding: 15px; background-color: white;   border: 10px groove #185787;
}

/*Settings for h2 - font, text color, and center text */
h2 {font-family: Arial, sans-serif; color: black; text-align: center; }

/* 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-color: black;
border-radius: 10px; border: 10px groove #c4450a; 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 white; padding: 10px; width: 120px; height: 50px;
text-align: center; vertical-align: middle; }


/*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: #185787; margin: 20px auto; padding: 20px; border: 2px solid #ccc;
border-radius: 10px; width: 60%; }

/*styles label to have bold text */
label {font-weight: bold;
       font-size: 10px;
         color: white;
}

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

/*adds a specfic color to links when not being used*/
a { color: blue; 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;}

.centered-container {
    text-align: center; /* Centers the text horizontally */
    width: 80%;          /* Optional: sets a width for the container to demonstrate wrapping */
    margin: 0 auto;      /* Optional: centers the block container itself on the page */
}


/* changes paragraph text to black and aligh text left */
p {color: black;}