/* HTML/CSS W2 Project
* Work in pairs
* Mark up your content with semantic html
* Lay out your page using flexbox and grid
* Test your work with Devtools.
* You can get pictures and choose custom size in the download at
* https://www.pexels.com/ 
* If you want to use a different font, get them from
* https://fonts.google.com/
*/

/* Testing your work 
== check your CSS
* uses grid
* uses flexbox
* uses at least one media query

== check your HTML
* uses semantic HTML
* has a Lighthouse Access score of 100 <-- 
* works on desktop and mobile
* works when you size the text up by 200%

== check your design
* follows the example
* you can choose your own colours and fonts if you like
* write your names at the bottom
* take a screenshot at laptop and Moto G4 device sizes in Devtools
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
  font: 100% "Poppins", "Montserrat", sans-serif;
  line-height: 1.5em;
  display: block;
  background-color: rgb(179, 199, 158);
}

.site-header {
  text-align: center;
  width: 100%;
  margin: 20px auto;
}

li {
  margin: 10px 0;
}

img {
  max-width: 120px;
  height: auto;
  margin: 20px;
}

.media-object {
  display: flex;
  align-items: center;
}

.flex-item {
  display: inline-block;
  background-color: rgb(227, 236, 212);
  width: 30%;
  min-width: 300px;
  margin: 4vw;
  padding: 1vw;
}

.flex-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}


footer {
  text-align: center;
  margin: 20px auto;
  font-size: 0.8em;
}

@media (max-width: 640px) {
  body {
    font-size: 1em;
  }

  .media-object img {
    max-width: 100px;
    height: auto;
    margin: 10px;
    
  }

  .flex-item {
    display: block;
    width: 80%;
    margin: 10px;
 }
 /* Styles for when the device is in Landscape Orientation */
   @media screen and (orientation: landscape) {
     .flex-item {
       display: inline-block;
     }
    }
}

@media (min-width: 641px) and (max-width: 1024px) {
  body {
    font-size: 0.9em;
  }
}

@media (min-width: 1025px) {
  body {
    font-size: 0.7em;
  }
}