/*changes the fonts for the body as well as the background color, and adjusts the postition of the body by keeping it at its default settings*/
body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6;
  background-color: #ffffcc; }

/*changes the text color for the header 1 and 2 as well as aligns the text to the center */
h1, h2 { color:#2c3e50; text-align: center; }

/*Styles the class header by changing the background color, text color to white, and moves the text to the center while also adding a border and adjust the postion by padding */
.header { background-color: #3498db; color: white; text-align: center;
  padding: 20px; border-bottom: 5px solid #2980b9; }

/*Styles the class floats by creating a solid line border that, changes the background color, and adjust the postition border due to margin and padding */
.floats { background: #fff; margin: 20px; padding: 20px; border: 6px solid
  #555; border-radius: 40px ; height: 150px; }

/* Stlyes class floats-image by adding a border and adjusting its position */
.floatsImage { float: left; margin-right: 15px; margin-bottom:10px; border: 3px solid #555; border-radius: 8px; height: auto; width: 100px; }

/* styles postition-section and container creating a border for the section and adjust everything in the section and container by making its postition relative */
.positionSection { background: #ecf0f1; margin: 20px; padding: 20px;
  border: 2px dashed #7f8c8d; border-radius: 10px; position: relative; }

.positionContainer { height: 225px; position: relative; background: #dfe6e9;}

/*styles box to create a border for static, relative, absoulute, and fixed. adjust the text to the center of the box */
.box { width: 100px ; height: 100px; text-align:center; line-height: 100px;
  border: 2px solid #2c3e50; border-radius: 10px; margin: 5px; color: white;}

/* Styles the class static, relative, absolute, and fixed. By changing the color of the background and adjust the postition to their respective name */
.static { background-color: #1abc9c; position: static; }

.relative {background-color: #f39c12; position: relative; left: 300px; }

.absolute { background-color: #9b59b6; position: absolute; top: 10px;
  left: 150px; }

.fixed { background-color: #e74c3c; position: fixed; top:10px; right: 10px; }

/* Styles all classes that are under for the flexbox section, these CSS create another border adjusting the size of the border and color of the border. The container allows the the postition for each boxs to be adjusted in postition. Item creates a border within the border aligning the text to the center */ 
.flexSection { background: #fff; margin: 20px; padding: 20px; border: 2px solid #bdc3c7;
  border-radius: 8px; }

.flexContainer { display: flex; justify-content: space-around; align-items: center; background: #eee; padding: 10px; border-radius: 8px; }

.flexItem { background-color: #3498db; color: white; padding: 20px; margin: 10px;
  border-radius: 8px; border: 2px solid #2980b9; flex: 1; text-align: center; }

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

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