/* https://www.w3schools.com/howto/howto_css_images_side_by_side.asp */
/*
ways to order flex elements
https://webdesign.tutsplus.com/tutorials/a-few-different-css-methods-for-column-ordering--cms-27079
*/
/* layout testing */
/* body {background-color: wheat}
html {background-color: brown}

.row {
    background-color: red
}

.column {
    background-color: indigo
}

.column-2 {
    background-color: green
}

.intro-row,
.row-images {
    background-color: bisque
}

body {background-color: yellow;}

.page-content {
    background-color: darkgoldenrod
} */


/*SMALL SCREENS UPWARDS*/
body {
  max-width: 960px;
  margin: auto;
  margin-bottom: 5rem;
  margin-top: 2rem
}

* {
  box-sizing: border-box;
  font-family: "Lucida Console", Monaco, monospace;
}

/* nav#menu.navs {
  margin-top: 2em
} */

.sections-menu {margin-top: 2rem}

section#people {margin-bottom: 2rem}

/* unvisited link */
a:link {
  /* color: red; */
  /* underline is thinner and further away */
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.1em;
  /* text-decoration: none; */
}

/* visited link */
a:visited {
  color: purple;
}

/* mouse over link */
a:hover {
  color: darkblue;
  text-decoration-thickness: .15em;
}

/* selected link */
a:active {
  color: lightblue;
}

.navs a {
  display: block
}

.row,
.intro-row,
.row-images {
  display: flex;
  flex-direction: column-reverse;
  margin-left: 1em;
  margin-right: 1em;
  padding: 0 4px
}

.page-content {
  margin-left: 1em;
  margin-right: 1em;
}

img#home-page-monster {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding-top: 1em;
}

img.page-image {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  padding-top: 1em;
}

.column,
.column-home-images {
  flex: 20%;
  padding: 5px;
}

.p_g, .project_lists_no_page {color: grey}
.project_list_item {margin-bottom: 0.5em}
.related-projects, .selected-projects {margin-top: 1em}
.article-title {margin-bottom: 0.5rem}
.article-dates {margin-top: 0.5rem}

@media screen and (max-width: 499px) {
  .navs a {
    margin-bottom: 0.3em
  }
}

@media screen and (min-width: 500px) {

  /* The navbar container */
  .navs {
    overflow: hidden;
  }

  /* On screens that are more than 500px, make the menu links line up side by side */
  /* Navbar links */
  .navs a {
    float: left;
    display: inline-block;
    padding-right: 1em;
  }
}

/*MEDIUM SCREENS*/
@media screen and (min-width: 1000px) {

  /* Put monster next to text*/
  .intro-row,
  .row-images {
    flex-direction: row
  }

  .intro-content-column {
    padding-right: 1em
  }

  img#home-page-monster {
    padding: 0;
    max-width: 70%;
  }
  section#introduction {margin-top: 2rem}
}

/*WIDE SCREENS*/
@media screen and (min-width: 1500px) {
  /* body {
        margin-left: 20%;
        margin-right: 10%;
        background-color: yellow;
    } */
}

/*
.project-description,
.project-summary {
    max-width: 660px;
}

.project-summary {
    border: dotted
}
*/
.grid-row {
  display: flex;
  flex-wrap: wrap;
  /* padding: 0 4px; */
  margin-left: 1em;
  margin-right: 1em;
}

/* Create four equal columns that sits next to each other */
/* .grid-column {
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
} */
/* Create three equal columns that sits next to each other */
.grid-column {
  flex: 33.3%;
  max-width: 33.3%;
  padding: 0 4px;
}

.grid-column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .grid-column {
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .grid-column {
    flex: 100%;
    max-width: 100%;
  }
}