body{
  width: 90%;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 640px) {
   body {
        background-color: #eaf6ff; 
    }
}

/* Make the <h1> on this page have a font-size of 1.5rem when the viewport width is below 500px, and 2.5rem when the viewport width is above 640px. */

h1 {
    font-size: 2rem; 
}

@media (max-width: 499px) {
    h1 {
        font-size: 1.5rem; 
    }
}

@media (min-width: 641px) {
    h1 {
        font-size: 2.5rem; 
    }
}

/* putting notes because im slightly confused and will need to reference this later */

#fixed-size-grid-items ul {
	list-style: none; 
    /* removes the bullet point style */
	display: flex;
    /* creates a flex container */
	flex-wrap: wrap;
    /* allows items to wrap to the next line */
    padding-left: 0;
    /* removes default padding */
}

#fixed-size-grid-items aside {
   width: 170px; 
   margin: 10px; 
   font-size: 0.8rem; 
}

#stretchable-grid-items ul {
    list-style: none; 
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin: 1rem -10px;
}

#stretchable-grid-items li {
    width: 100%; 
}

#stretchable-grid-items aside {
  margin: 10px;
}

 @media (min-width: 481px) {
    #stretchable-grid-items li {
        width: 50%; 
    }
 }

@media (min-width: 641px) {
    #stretchable-grid-items li {
        width: 25%; 
    }
}