/* Emily Gorgees ITWP 1050 This
module’s homework assignment requires you to incorporate various element selectors,
transform, transitions, animations, an external CSS file, and then successfully validate
your work */ 

/* Default styles for larger screens */
body {
    font-size: 18px;
  }
  
  h1 {
    font-size: 32px;
  }
/*  a media query with a breakpoint for h1 and body */ 

@media (max-width: 800px){
    h1{
        font-size: 14px;
    }
    body {
        font-size: 14px;
    }
}

/* media query with a breakpoint that changes the background color when the viewport is 600px or less */
@media (max-width: 600px)
{
    body {
        background-color: plum;
    }
}

/* modifying the images with responsive images */
img {
    max-width: 30%;
    height: auto;
}

/* responsive design for my new responsive section (it's near the footer :) ) */
@media (min-width: 600px) {
    .container {
      display: flex;
      flex-direction: row;
      justify-content: center;
      flex-wrap: wrap;
      background: plum;
      padding: 0.25rem;
    }
  
    .item {
      background: plum;
      max-width: 30%;
      margin: 0.25rem;
      border-radius: 8px;
      object-fit: cover;
    }
    .item p {
        font-size: 1rem;
    }
    .item img {
        height: 100px;
        width: 350px;
        object-fit: cover;
        border-radius: 5px;
    }
}