/* Changes the font of body to arial, and sans-serif, base position, and changes the height of lines to 1.6 and changes the background color */ 
body { font-family: Arial, sans-serif; margin: 0; padding: 0; line-height: 1.6; background-color: #ffffcc; display: flex; flex-direction: column; align-items: center; } 

/*adjust position of li further right */
li { margin: 15px }

/* Changes header width, the background and text color, moves evertyhing to the center and adds a shade color to the bottom of the border  */ 
.header { width: 100%; background-color: #3498db; color: white; text-align: center; padding: 20px; border-bottom: 5px solid #2980b9; } 

/* Changes page's width, adjust postion and adds a border and a template to adjust postions */ 
.page { width: 95%; max-width: 1200px; padding: 10px; box-sizing: border-box; display: grid; grid-template-columns: 65% 30%; grid-template-areas: "floats sidebar" "flex flex" "grid grid"; gap: 10px; margin: 20px 0; } 

/* 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 { grid-area: floats; background: #fff; padding: 20px; border: 6px solid #555; border-radius: 40px; height: auto; }
/*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; width: 100px; height: auto; } 

/* Styles Sidebar by changing its grid, the background color, adjust postition, and adds a boder. Also styles the h2 and p in the sidebar by adjusting text location */ 
.sidebar { grid-area: sidebar; background-color: #2c3e50; color: white; padding: 20px; border-radius: 8px; } 
.sidebar h2 { text-align: center; margin-bottom: 10px; } 
.sidebar p { margin: 0; } 

/*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. This also specifically changes the images size to fit within the border and transforms when being hovered over */ 
.flexSection { grid-area: flex; background: #fff; padding: 20px; border: 2px solid #bdc3c7; border-radius: 8px; } 
.flexContainer { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; background: #eee; padding: 10px; border-radius: 8px; } 
.flexItem { width: 30%; margin: 10px; text-align: center; } 
.flexItem img { width: 100%; max-width: 250px; height: auto; border-radius: 8px; border: 2px solid #2980b9; transition: transform 0.3s ease; } 
.flexItem img:hover { transform: scale(1.05); } 

/* Styles the grid in order to be a 12 column grid this is done by adjusting the postions using a grid, templates and gaps. This also adds a border to hold the grid within and gridContainer and gridItem adjust background color and text and postions of the background and text */ 
.gridSection { grid-area: grid; padding: 20px; } 
.gridContainer { display: grid; grid-template-columns: repeat(12, 7.5%); gap: 5px; background: #eaeaea; padding: 10px; border-radius: 8px; overflow-x: auto; } 
.gridItem { background-color: #3498db; color: white; text-align: center; padding: 15px 0; border-radius: 5px; font-size: 14px; } 

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

/* Responsive Media Queries that adjust the webpage to the size of a smaller size in order to fit within a tablet screen  */ 
@media (max-width: 992px) { .page { grid-template-columns: 65% 30%; grid-template-areas: "floats sidebar" "flex flex" "grid grid"; } } 

/* Responsive Media Queries that aadjust the size of the whole webapges and adjust the
some classes in order to fit on mobile device screens */
@media (max-width: 600px)
{ 
.page { grid-template-columns: 100%; grid-template-areas: "floats" "sidebar" "flex" "grid"; } 
.flexContainer { flex-direction: column; align-items: center; } 
.flexItem { width: 90%; margin: 10px auto; } 
.flexItem img { max-width: 90%; } 
.floatsImage { width: 80px; } 
.sidebar { width: 100%; margin: 0; padding: 20px; box-sizing: border-box; } 
}