* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/******** Wrapper ********/

#wrapper {
  font-family: Jura, sans-serif;
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  background: rgba(200, 228, 226,.65);
}

main {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}

label,
input,
button {
  display: block;
}

section {
  margin: 3em 0;
  padding: 5em 10em;
}

/******** Header Container ********/
.header-container {
  position: sticky;
  top: 0;
  width: 100%;
  max-height: 6em;
  padding: 1em 3em;
  margin-bottom: 6em;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: .33em rgba(131, 194, 191,.45) solid;
  background: #fff;
  z-index: 100;

  transition: all ease 2s;
}

#site-title {
  font-size: .5em;
  color: rgba(131, 194, 191,1);
}

.line {
  display: block;
}

/******** Nav ********/
nav ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

li {
  list-style: none;
  margin: .25em .75em;
  border: .125em rgba(131, 194, 191,1) solid;
}

nav li {
  width: 5.25em;
  border-radius: .25em 1.25em;
  text-align: center;
}

a {
  display: inline-block;
  text-decoration: none;
  color: rgba(131, 194, 191,1);
  padding: .75em 0;
}

nav li:hover {
  background: rgba(131, 194, 191,.33);
}

nav a:hover {
  color: #fff;
}

/******** Projects ********/
.project-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 95%;
  padding: 2em;
  margin: 2em auto;
}

section:nth-child(2n) {
  align-self: center;
  width: 100vw; /*Why does this create an X-scroll at 100vw?!?!?!?!*/
  max-width: 100%;
  background: rgba(131, 194, 191,1);
}

body {
  overflow-x: hidden; /*This is here to prevent horizontal scroll from above issue*/
}

.project-block {
  position: relative;
  height: 12em;
  width: 9em;
  margin: 2em;
  border: .20em solid #BABABA;
  border-radius: 33% 33% 0 0;
  overflow: hidden;
}

.project-block > img {
  height: 12em;
  opacity: 33%;
}

.project-block:hover::after {
  position: absolute;
  top: 5em;
  height: 25%;
  width: 100%;
  background: rgba(0,0,0,.6);
  opacity: .65;
  content: "Project 1";
  color: #fff;
  text-align: center;
}


/******** Form ********/
input,
textarea {
  width: 100%;
  height: 2.5em;
  padding: 0.5em;
  font-size: 1.33em;
  margin: 0.5em 0;
  border: .125em rgba(131, 194, 191,1) solid;
  border-radius: 0.33em;
}

textarea {
  height: 15em;
}

label {
  font-size: 1.33em;
  border-radius: 0.33em;
}

button {
  height: 3em;
  width: 12em;
  padding: .5em;
  margin: 0 auto;
  border-radius: 0.33em;
  background: rgba(131, 194, 191,1);
}


input:focus,
textarea:focus {
  background: #F8FBB5;
}

/******** Footer ********/

footer {
  width: 95%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 5em 0;
  border-top: .125em solid #f2f2f2;
  padding: 3em 0;
}

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: 15em;
  text-align: center;
}

.block>a {
  padding: 0.75em;
}

footer li {
  border: none;
  height: 2.25em;
  width: 2.25em;
}

li img {
  width: 100%;
  height: 100%;
}

footer li>a {
  padding: .1em;
}

footer ul {
  display: flex;
  justify-content: center;
  align-items: center;
}

.email {
  color: rgba(217,024,006,1);
  border: .125em rgba(217,024,006,1) solid;
}

.email:hover {
  background: #fff;
}

/********** Type ************/

h2 {
  font-size: 4em;
  margin-bottom: .25em;
}

h3 {
  font-size: 2em;
  margin-bottom: 1.5em;
}

.about-me p {
  display: inline; /*allows for bg color to be split*/
  font-family: monospace;
  background-color: #fff;
  font-size: 1.35em;
  line-height: 1.6em;
  margin-bottom: 2em;
}

.about-me {
  max-width: 80em;
}

.project-container {
  max-width: 50em;
}

/********* Nav scroll ************/

.shrink {
  height: 2em;
  width: 100%;
}

.shrink header {
  visibility: hidden;
}

.shrink  a:hover {
  font-weight: bold;
  height: auto;
  width: auto;
}

.shrink li{
  border: none;
}

.shrink li:hover {
  background: none;
}

.shrink .nav-link:hover {
  background: none;
  color: #0D767B;
}


@media (max-width: 760px) {
    body { line-height: 1.4;
    }

    main > h2,
    main > h2 p {
      text-align: center;
    }

    section {
      margin: 1em 0;
      padding: 2em;
    }

    footer {
      flex-flow: column;
      justify-content: center;
      align-items: center;
    }

    .block {
      margin-bottom: 1.5em;
    }

    .block:nth-child(2n) {
      order: 1;
    }
}

@media (max-width: 400px) {
    main > h2,
    main > h2 p {
      padding: 0 .75em;
    }

    .header-container {
      width: 100%;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
    }

    .shrink {
      background: #fff;
      height: auto;
    }

    .shrink nav li {
      border: .125em solid rgba(131, 194, 191,1);
      transition: all ease-in 1s;
    }

    header {
      display: none;
    }

    nav,
    ul {
      width: 100%;
      border: none;
    }

    nav ul>li {
      width: 100%;
      padding: 0;
      border-radius: 0;
      border: .125em solid #f2f2f2;
    }

    li>a {
      display: block;
      width: 100%;
      padding: 0 2em;
      margin: 0;
    }
}