/* -------  General Styles ------- */

body {
  font-family: "Lato", sans-serif;
  width: 100%;
}

h2 {
  font-size: 26px;
  font-weight: 400;
  margin: 0 10px 10px 10px;
  text-align: center;
}

h3 {
  font-size: 18px;
  font-weight: 500;
}

p {
  line-height: 1.5em;
  margin: 0;
}

section {
  padding: 20px;
}

section.alternate-background {
  background-color: #00a699;
  color: #fff;
}

/* so images can fill there container*/
 img { 
  width: 100%;
}



/* ---  Groups & Items & Classes --- */

.group {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.item {
  flex: 1;
  margin: 10px;
  
}

.item-double {
  flex: 2;
}



.logo {
  font-family: "Pangolin", cursive;
  font-size: 72px;
  color: #fff;
}

/* -------  Navigation ------- */

header {
  background-color: #ff385c;
  padding: 20px 20px 0px 20px;
  /* keeps the logo centered as the width of the screen changes until media query at 768px*/
  text-align: center;
}
header nav{
  display:flex; 
  /* keeps the nav bar centered as the width of the screenn changes*/
  justify-content: center;
  
}
header nav ul{

  /* Changes the display property from its default to `flex`, the default 
     flex-direction for flex is row, so the navigation will displays in a single row*/
     display: flex;
  
  /* Removes the default padding to the left of the unordered list.*/
      padding-left: 0;
 
  /* Removes the bullet points from the list items within the unordered list.*/
     list-style: none; 
  
}


header nav ul li a {
  color: #fff;
  text-decoration: none;
  margin: 0 20px 0 0;
}

header nav ul li:last-child a {   
    /* Removes the margin to the right of the last anchor tag so that the nav appears centered. */
       margin-right: 0;
    /*padding: 0 0 0 0;*/
  }

header nav ul li a:hover {
  color: #bdbdbd;
  text-decoration: none;
}

/* -------  Search Form ------- */
form {
  border: 2px solid #ff385c;
     padding: 10px;
}

form label {
  font-weight: bold;
}

form select,
form input {
  margin-bottom: 20px;
  width: 180px;
}

form button {
  background-color: #ff385c;
  border: none;
  color: #fff;
  font-size: 24px;
  padding: 15px;
  width: 100%;
}


form  div div{
  display:flex;
 /*keeps the label and input on opposite ends of the div conatiner*/
 justify-content: space-between;
  /*border: 1px solid red;*/
}

/* -------  Footer ------- */

footer {
  background-color: #ff385c;
}

footer p {
  color: #fff;
  text-align: center;
  padding: 20px;
}







/* -------  Media Query ------- */
@media all and (min-width: 768px) {

  /* -------  General Styles ------- */
 header {

    display: flex;
    /* Pushes the items (the title and nav) to the far sides of the 

       browser with space between them. */

    justify-content: space-between;

    /* Adds 0 pixels padding top and bottom, and 30 pixels padding 

       left and right. */

    padding: 0 30px;

  }

  
  section {
    padding: 0 10%;
  }
 
  main section div div{flex-wrap:wrap;}

/* -------  Navigation ------- */

  header nav {
    /* Pushes the navigation container down by 8 pixels to make it
       present a little better visually within the space.*/
       margin-top: 8px;
 }

  /* Users cannot hover on mobile devices, so that is why you
     implement this behavior only for larger screens. */
   header nav ul li a:hover {
    /* Targets the change when a user holds the pointer over the anchor tag 
       (link) within the list items within the unordered list that 
       is within the navigation that is within the header. */
    color: #bdbdbd;
  }

/* ---  Groups & Items & Classes --- */

  .group {
    flex-direction: row;
  /* alinging items to be centered vetically*/  
     align-items: center;
  }
  
  .group-columned{
    flex-direction: column ;
  }
  
   .items-stacked{
    flex-direction: column;
   }
}