/* =================================
  Import normalize.css
==================================== */
@import url('http://necolas.github.io/normalize.css/3.0.2/normalize.css');
/* @import url('https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'); */

/* =================================
  Imported Fonts
==================================== */
@font-face {
  font-family: 'CelticHand';
  src: url('fonts/CelticHand.ttf');
}

/* *********************************************
  Base Element Styles
==================================== */

* {
	box-sizing: border-box;
}

h1 {
	font-family: CelticHand, Garamond, serif;
	font-size: 1.6em;
  /* color: FloralWhite; */
  /* text-shadow: .1em .1em .1em #04387B; */
  /* background: rgba(255, 255, 255, .3); */
  color: #04387B;
  text-shadow: .05em .05em .05em FloralWhite;
}

h2 {
	font-family: CelticHand, Garamond, serif;
	font-size: 1.3em;
  /* color: FloralWhite;
  text-shadow: .1em .1em .1em #04387B; */
  color: #04387B;
  text-shadow: .05em .05em .05em FloralWhite;
}

p {
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  font-weight: bold;
  line-height: 1.5em;
  /* color: FloralWhite;
  text-shadow: .1em .1em .1em #04387B; */
  color: #04387B;
  text-shadow: .05em .05em .05em FloralWhite;
}

a {
  color: FloralWhite;
  font-weight: bold;
  text-decoration: none;
}

a:hover,
a:focus {
  color: #FDB47D;
  padding-bottom: .25em;
  border-bottom: 3px solid #FDB47D;
}

img {
  color: FloralWhite;
}

/* =================================
  Base Layout Styles
==================================== */

/* ---- Navigation ----
	-	menus, nav bars*/

/* This corrects a problem with Chrome adding extra margin and padding. */
menu,
ul.main-nav {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

#name {
  display: inline-block;
  font-family: Helvetica, sans-serif;
  font-size: 1em;
  margin-left: .5em;
  text-shadow: none;
}

#name a:hover,
#name a:focus {
	color: #FDB47D;
  padding-bottom: .25em;
  border-bottom: 3px solid #FDB47D;
}

menu {
  display: inline-block;
  position: absolute;
  top: 1.2em;
  right: 1em;
  text-align: right;
}

.main-nav {
  display: none;
  color: FloralWhite;
  list-style-type: none;
  position: absolute;
  right: 0;
  padding: .5em;
  box-shadow: -10px 10px 10px -5px #877E7F;
}

.main-nav li {
  padding: .5em;
  padding-right: 0;
}

/* Highlight active menu item */
#index    #li-index    a,
#projects #li-projects a,
#about    #li-about    a,
#contact  #li-contact  a {
  color: #FDB47D;
}

#hamburger_menu {
  margin-bottom: .5em;
}

#hamburger_menu span {
  display: block;
  background: FloralWhite;
  width: 20px;
  height: 2px;
  margin: .2em 0;
}

menu:hover .main-nav,
menu:focus .main-nav {
  display: block;
}

/* ---- Layout Containers ----
	-	header, footer, content divs	*/
header {
  color: FloralWhite;
	padding: .5em;
}

#index    header {
  background: #04387B;
}

#about    header,
#contact  header {
  background: linear-gradient(#04387B, #9FC3F7);
}

#projects header {
  background: linear-gradient(#04387B, #FBE5E8);
}

main {
  background: url('../img/Ohio-River-Sunset-Faded.jpg') 10%;
  background-color: FloralWhite;
  background-size: cover;
}

/* Only the index page has the banner */
#index    main {
  min-height: calc(100vh - 228px);  /* banner + header + footer */
}

#projects main,
#about    main,
#contact  main {
  min-height: calc(100vh - 118px);  /* header + footer */
}

footer {
  background: linear-gradient(to top, #2380D1, #424443);
	color: FloralWhite;
	padding: 1em;
	text-align: center;
}

footer p {
  color: FloralWhite;
  font-size: .9em;
  font-weight: normal;
  line-height: 0;
  text-shadow: none;
}

.col {
  float: left;
  padding: .5em 1em;
}

#index    .primary,
#projects .primary {
  width: 100%;
}

#index    .primary {
  text-align: center;
}

#about    .primary {
  display: none;
}

.secondary {
  padding: 0 1.5em;
}

.secondary p,
.secondary ul {
  font-size: .9em;
}

.secondary ul {
  color: #04387B;
  font-weight: bold;
}

.secondary a {
  color: #04387B;
}

.secondary a:hover,
.secondary a:focus {
  border-bottom: 3px solid #04387B;
}

.tertiary {
  display: none;
  margin: 0;
  padding: 0;
}

.abilities {
  text-shadow: .05em .05em .05em FloralWhite;
}
/* Page Elements */
.banner {
  background: linear-gradient(#04387B, #877E7F);
  height: 110px;
  padding-bottom: 10px;
  text-align: center;
  vertical-align: middle;
}

.pic {
  display: block;
  margin: auto;
  border: 3px solid #FDB47D;
  border-radius: 50%;
  height: 100px;
}

.pic2 {
  display: none;
}

.socialMedia a:hover,
.socialMedia a:focus {
  border-bottom: 0;
}

.socialMedia img {
  vertical-align: middle;
  height: 25px;
  margin: .25em;
}

#twitter {
  height: 45px;
}

#email {
  height: 40px;
}


/* =================================
  Media Queries
==================================== */

/* ******************** Medium Screens ******************** */
@media ( min-width: 500px ) {

  /* Base Elements */
  main h1 {
  	font-size: 2em;
  }

  main p {
    font-size: 1.3em;
  }

  /* Navigation */
  #name {
    font-size: 1.1em;
    margin-left: .5em;
  }

  .main-nav {
    display: inline-block;
    position: relative;
    padding: .5em;
    box-shadow: none;
  }

  .main-nav li {
    font-size: .9em;
    padding: 0 .5em;
    text-transform: uppercase;
  }

  #name,
  menu,
  .main-nav,
  .main-nav li {
    display: inline-block;
    vertical-align: middle;
  }

  #hamburger_menu {
    display: none;
  }

  /* Layout Containers */

  /* Only the index page has the banner */
  #index    main {
    min-height: calc(100vh - 301px);  /* banner + header + footer */
  }

  #projects main,
  #about    main,
  #contact  main {
    min-height: calc(100vh - 121px);  /* header + footer */
  }

  #index footer {
    background: linear-gradient(to top, #2380D1, #FDB47D);
  }

  #about footer,
  #contact footer {
    background: linear-gradient(to top, #2380D1, #C9B7A3);
  }

  .col {
    display: inline-block;
    padding-top: 1.5em;
  }

  #about    .primary {
    display: inline-block;
    text-align: center;
    width: 40%;
    padding-top: 3em;
  }

  #about    .primary,
  #contact  .primary {
    width: 40%;
    padding-top: 2em;
  }

  #about    .secondary,
  #contact  .secondary {
    width: 60%;
    padding-top: 2em;
  }

  .tertiary {
    display: none;
  }

  /* Page Elements */
  .banner {
    height: 180px;
    padding: 20px;
  }

  .pic {
    height: 140px;
  }

  .pic2 {
    display: inline;
    width: 80%;
    margin-bottom: .5em;
    border: 10px solid #04387B;
    border-radius: 10%;
  }

  .socialMedia img {
    height: 30px;
    margin: .25em;
  }

  #twitter {
    height: 50px;
  }

  #email {
    height: 45px;
  }

}

/* ******************** Larger Screens ******************** */
@media ( min-width: 1000px ) {

  /* Base Elements */
  main h1 {
  	font-size: 2.5em;
  }

  main p {
    font-size: 1.8em;
  }

  /* Navigation */
  #name {
    font-size: 1.25em;
  }

  .main-nav li {
    font-size: 1em;
    padding: 0 1em;
    text-transform: uppercase;
  }

  /* Layout Containers */

  /* Only the index page has the banner */
  #index    main {
    min-height: calc(100vh - 327px);  /* banner + header + footer */
  }

  #projects main,
  #about    main,
  #contact  main {
    min-height: calc(100vh - 127px);  /* header + footer */
  }

  .col {
    padding-top: 1em;
  }

  #about .primary {
    width: 30%;
  }

  #about .secondary {
    width: 50%;
  }

  #about .tertiary {
    width: 20%;
  }

  #contact .primary,
  #contact .secondary {
    padding-top: 1em;
  }

  /* Page Elements */
  .banner {
    height: 200px;
    padding: 25px;
  }

  .pic {
    height: 150px;
  }

  .socialMedia img {
    height: 40px;
    margin: .25em;
  }

  #twitter {
    height: 60px;
  }

  #email {
    height: 55px;
  }

}

/* ---- Float clearfix ---- */

.clearfix::after {
  content: " ";
  display: table;
  clear: both;
}