:root {
  --clr: #006194;
}
/*Notes for Contact Form:
Much of the styling on this page is for just the signup demo video.
Kevin Powell prefers "PT Sans Narrow", sans-serif; */

* {box-sizing: border-box;}


body {
  padding: 0;
  margin: 0;
  /* min-height: 100vh; */
  /* display: grid; */
  /* place-items: center; */
  /* Compare the above to display: flex: justify content, align items, etc. */
  font-family: 'Montserrat', sans-serif;
  font-size: 1.125rem;
}

/******************************************************************************
---------- ZOMBIE FLEX --------------------------------------------------------
******************************************************************************/
.zombie-header {
  /* padding: none; */
  display: flex;
  /* flex-direction: column; */
  list-style: none;
  width: 100%;
  /* flex-direction: row; */
  /* justify-content gets overridden by flex-grow */
  justify-content: space-between;
  /* padding: 1em; */
  line-height: 50px;
  justify-content: center;
  align-items: center;
  /* align-items: stretch; this is the default*/
  /* align-items: flex-end; */
  /* justify content also has flex-start, flex-end, and center, also space-between & space-around */
  /* values of f-d: row, column & reverse options for each  */
  /* row goes east, r-r goes west, column goes south, c-r goes north */
  /* flex-direction: row-reverse; */
  /* default is flex-start; flex-end goes opposite side of whatever flex-direction */

}


/* The reason this isn't responsive is because it does not use media queries or a hamburger menu. */
.logo {
  padding-top: 1em;
   border: 4px solid #000;
/*  background: #eee;
  border-radius: 50%; */
  align-self: stretch;
}

.zombie-header li {
  flex-grow: 8;
  text-align: center;
  border: 1px solid #000;

    /* border: 1px solid #000; */
}

.zombie-header li:nth-child(3) {
  flex-grow: 1;
  text-align: center;
  /* flex-shrink: 5; */
  /* border: 1px solid #000; */
}

.zombie-header li a {
  text-decoration: none;

}


/* THINKER PROJECT 2 HTML */
.zombie-header-split {
  display: flex;
  list-style: none;
  /* width: 100%; */
  line-height: 50px;
  flex-grow: 1;
  align-items: center;
  justify-content: flex-start;
}

.zombie-header-split li:nth-child(1),
.zombie-header-split li:nth-child(2),
.zombie-header-split li:nth-child(4),
.zombie-header-split li:nth-child(5) {
  /* flex-grow: 8; */
  padding: .5em;
  /* align-items: flex-end; */
  text-align: center;
  /* border: 1px solid #000; */
    /* border: 1px solid #000; */
  flex-basis: 15%;
  min-width: 100px;
  flex-shrink: 0;
}

.zombie-header-split li a {
  text-decoration: none;

}

.logo-right {
  /* padding-top: 1em; */
  padding: 1em 2em 0 2em;
  border: 2px solid black;
  border-radius: 100%;
  align-self: stretch;
  /* flex-basis: auto; */
  order: 1;
  margin-left: auto;
  /* flex-grow: 1; */
  /* background: pink;
  /* RGB 254 127 156 */
  /* fill: rgb(254,127,156);
  filter: brightness(.5);
  opacity: none; */
}

/*
Hint
Let's
add
our
new
setting
to
our
action
order:

1.
Turn on the crossbow

2. Aim it if neccesary

3.
Line them up along the red Justify Laser (justify-content)

4. Align them along the blue Alignment Lasers (align-items)

5. Take care of any one-off alignments with the new align-self setting.
 */

/* ul {
  background: limegreen;
  height: 50px;
  /* align also has flex-start, flex-end, stretch and center */
  /* align-items: flex-start; */
  /* margin: none; */
  /* padding: 0; */
  /* padding: 20px; */
  /* align-self has all the same values as the align items */
    /* align-self: flex-start; */
/* } */

/* .zombie-header li:nth-of-type(2){
  align-self: flex-end;
  background: red;
} */


/* .zombie-header li:nth-of-type(3){
  flex-grow: 2;
  justify-content: center;
  align-self: flex-end;
} */
/*
.zombie-header li:nth-of-type(4){
  align-self: flex-end;
}

.zombie-header li:nth-of-type(5){
  align-self: flex-end;
} */

header {
  width: 80%;
  margin: 0 auto;
}






/* https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility
This code highlights tabbed options with bold font. */
a:hover, input:hover, button:hover, select:hover,
a:focus, input:focus, button:focus, select:focus {
  font-weight: bold;
}

/* header, */
main, footer,
.header-section,
.return-home-section {
  width: 45%;
  margin: 0 auto;
}

/* -------------------------------------- */
/* SAMPLING WITH DIVS IN FLEXBOX */
/* ------------------------------------- */
.flex-box {
  display: flex;
  flex-direction: row;
  /* border: 1px solid black; */
  height: 50%;
  width: 60%;
  min-height: 550px;
  max-height: 750px;
  margin: 0 auto;
  flex-wrap: wrap;
}

.fb-1 {
  /* margin: 13px; */
  /* margin-right: 0; */
  width: 100%;
  /* border: 1px solid black; */
  background: pink;
  flex-basis: 50%;
  min-height: 10px;
  flex-grow: 1;
  order: 4;
}

.fb-2 {
  /* margin: 13px; */
  /* margin-right: 0; */
  width: 100%;
  /* border: 1px solid black; */
  background: green;
  flex-basis: 50%;
  flex-grow: 4;
  min-height: 30%;
  order: 2;
}

.fb-3 {
  /* margin: 13px; */
  width: 100%;
  /* border: 1px solid black; */
  background: blue;
  flex-basis: 50%;
  flex-grow: 5;
  flex-shrink: 2;
  order: 3;
}

.fb-4 {
  /* margin: 13px; */
  width: 100%;
  /* border: 1px solid black; */
  background: red;
  flex-grow: 1;
  flex-shrink: 2;
  flex-basis: 20%;
  min-height: 10%;
  order: 1;
}

/* THIS PRACTICE PROBABLY JUST LACKS MEDIA QUERIES */
.flex-box-column {
  display: flex;
  /* flex-direction: row; */
  /* border: 1px solid black; */
  /* border: 1px solid black; */
  height: 50%;
  width: 60%;
  /* min-height: 550px;
  max-height: 400px; */
  /* min-height: 550px; */
  /* max-height: 750px; */
  margin: 20px auto 0;
  flex-wrap: wrap;
  align-items: space-between;
  align-content: space-between;
  justify-content: space-between;
}

.fb-5 {
  /* margin: 13px; */
  /* margin-right: 0; */
  width: 200px;
  height: 200px;
  /* border: 1px solid black; */
  background: grey;
  flex-basis: 25%;
  min-width: 100px;
  /* min-height: 10px; */
  /* flex-grow: 1; */
  /* order: 4; */
}

.fb-6 {
  /* margin: 13px; */
  /* margin-right: 0; */
  width: 200px;
  height: 200px;
  /* border: 1px solid black; */
  background: yellow;
  flex-basis: 25%;
  min-width: 100px;

  /* flex-grow: 1; */
  /* min-height: 30%; */
  /* order: 2; */
}

.fb-7 {
  /* margin: 13px; */
  width: 200px;
  height: 200px;
  /* border: 1px solid black; */
  background: orange;
  flex-basis: 25%;
  min-width: 100px;

  /* align-self: flex-end; */
  /* flex-grow: 1; */
  /* flex-shrink: 2; */
  /* order: 3; */
}

.fb-8 {
  /* margin: 13px; */
  width: 200px;
  height: 200px;
  /* border: 1px solid black; */
  background: purple;
  /* flex-grow: 1; */
  /* flex-shrink: 2; */
  flex-basis: 25%;
  min-width: 100px;
  /* align-self: flex-end; */
  /* min-height: 10%; */
  /* order: 1; */
}

/* .test-wrapper {
    display: grid;
    place-items: center;
} */


/* I want to make this 2 x 3 flex */

.flex-box-2by3 {
  background: pink;
  height: 400px;
  width: 50%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  min-width: 600px;
  /* align-content: space-between; */
}

.fb-9 {
  width: 200px;
  height: 200px;
  background: red;
  min-width: 100px;
  flex-basis: auto;
  min-width: 33.3%;
}

.fb-10 {
  width: 200px;
  height: 200px;
  background: purple;
  min-width: 100px;
  flex-basis: auto;
  min-width: 33.3%;
}

.fb-11 {
  width: 200px;
  height: 200px;
  background: red;
  min-width: 100px;
  flex-basis: auto;
  min-width: 33.3%;
}

.fb-12 {
  width: 200px;
  height: 200px;
  background: purple;
  min-width: 100px;
  flex-basis: auto;
  min-width: 33.3%;
}

.fb-13 {
  width: 200px;
  height: 200px;
  background: green;
  min-width: 100px;
  flex-basis: auto;
  min-width: 33.3%;
}

.fb-14 {
  width: 200px;
  height: 200px;
  background: blue;
  min-width: 100px;
  flex-basis: auto;
  min-width: 33.3%;
}


/* Here I want to align wrapped content and see how it works */
.flex-align-content {
  width: 250px;
  height: 250px;
  background: green;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-content: space-evenly;
  /* align-content: stretch; */
  justify-content: space-evenly;
}

.fb-15 {
  width: 100px;
  height: 100px;
  background: lightgrey;
}

.fb-16 {
  width: 100px;
  height: 100px;
  background: grey;
}

.fb-17 {
  width: 100px;
  height: 100px;
  background: black;
}

.fb-18 {
  width: 100px;
  height: 100px;
  background: brown;
  display: flex;
}



/*------*/
/* HOME */
/*------*/


/*------*/
/* PORTFOLIO */
/*------*/
.portfolio-photo {
  width: 90%;
  margin: 0 5%;
}


/*------*/
/* ABOUT */
/*------*/


/*------*/
/* BLOG */
/*------*/


/*------*/
/* CONTACT */
/*------*/