/*
layout page for flexbox and grid code etc
*/


/* tutorial about how to do multiple columns within one row
https://dev.to/drews256/ridiculously-easy-row-and-column-layouts-with-flexbox-1k01 */

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  flex: 1;
}

/* the projects page */

.project1trailmix .row .column {
  justify-content: center;
}

.project2fairview .row .column {
  justify-content: center;
}

.project3twitch .row .column {
  justify-content: center;
}

.project4mounresc .row .column {
  justify-content: center;
}

.project5cliq .row .column {
  justify-content: center;
}


/* breakpoints */
/* if screen is smaller than xyz , then adjust accordingly */
/* when screen size is of mobile resolution then */
@media screen and (max-width: 40em) {
  .row {
    flex-direction: column;
  }

  footer {
    flex-direction: column;
  }

}

/*

1920 1440 350px

*/