.flex-container {
 /* This command turns the parent element into a flex container and its immediate children into flex items */ 
  display: flex;
  
 /* the command flex-flow row warp instructs the items to be horizontal in a row, and when they run out of horizontal space to drop down a row */
  flex-flow: row wrap;
  
  /* This psreads items along a main axis, and gives space that is equal on both the left and right sides. */
  justify-content: space-around;
  
  /* some elements of css touching on padding, or room around, margin, again, for spacing, and the list-style none turns a vertical bulleted list from the html section into a layout grid.  */
  padding: 4;
  margin: 3;
  list-style: none;
}

.flex-item {
  /* adding a background image of a sloth to customize it to the coffe theme The width and height specify the size of each flex item. Padding is the space around it. Line height dtermines the vertical space allocated to each line of text.  */
  background-image: url('https://codecraftworks.dev/web/PCNQ8wmnkNaqb3Y1kilC/assets/SlothCoffee.png'); 
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

/* h1 and h2 receive some color stylings */
h1 {color:blue;}
h2 {background-color: tan;}
/* images are styled with width constraints and borders */
.img4, .img5 {width: 200px; border: 5px solid gold;}
.img6 {width: 900px; border: 10px solid black;}
.style1 {color: brown; background-color: magenta; font-size: 22px; font-family: "Open Sans", Arial, sans-serif; border: 5px solid}
/* making it responsive to touch with hovering changing the border appearance, as well as hover changing the width of the picture to slightly larger, helping the viewer see it was selected */

.style1:hover {border: 8px solid}
.img1 {width: 200px; border: 3px solid black;}
.img1:hover {width:220px;}
.img2 {width: 200px; border: 3px solid black;}
.img2:hover {width:220px;}
.img3 {width: 200px; border: 3px solid black;}
.img3:hover {width:220px;}
.header { background-image: url('https://codecraftworks.dev/web/PCNQ8wmnkNaqb3Y1kilC/assets/repeats.jfif'); opacity: 50%;}

/* background color is light blue for whole body */
body {background-color: lightblue;}

/* when we hover over the container it changes to darker brown */
.container:hover {background-color:brown;}

/* This container css styles the grid layout. It breaks it into 1/3rds. The top header takes up all three thirds. While the Next row has three areas,  one for the images, one for Thoughts about Coffee, and one for Outside the store perspective. The next row is similar in formating, to the one above, just different subject matters. The footer also takes up all 3/3rds of the screen. */
.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "menu content content2"
    "menu2 content3 content4"
    "footer footer footer";
  grid-template-columns: 1fr 3fr 1fr;
  grid-template-rows: auto 1fr 1fr auto;
  gap: 10px;
  background-color: tan;
  padding: 20px;
}
/* setting the background color to yellow, and including some padding between each div*/
.container div {
  background-color: yellow;
  padding: 20px;
}

/* within the header part of the div, we are setting the text to align left. We are also setting different areas in the grid and calling them by name. */
.container div.header {
  grid-area: header;
  text-align: left;
}
.container div.menu {
  grid-area: menu;
}
.container div.content {
  grid-area: content;
}
.container div.content2 {
  grid-area: content2;
}
.container div.footer {
  grid-area: footer;
  text-align: center;  
}

/* Aside grid-area: sidebar- this streteches the sidebar element into the rows and columns without needing to have line numbers explicitly*/
aside { 
  grid-area: sidebar; 
}