/* Universal Box-Sizing Reset */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-size: 17px;
  scroll-padding-top: 4em;
}
body {
  line-height: 1.6;
  margin: 0;
  background-color: #25334a;
  color: #444;
  padding: 0 1.5em 1.5em 1.5em;
  position: relative;
}
article {
  padding-top: .5em;
  border-bottom: 1px solid #bcbcbc;
  margin-bottom: .8em;
}
section {
  padding-top: .5em;
}
.main {
  width: 1000px;
  max-width: 100%;
  padding: 0;
  font-family: "fira sans", sans-serif;
  background-color: #f4f4f4;
}
.lower {
  width: 850px;
  max-width: 100%;
  padding: 0 1.5em;
}
/* Font for name.png: Archivo (Black) (900 weight) - available on Google Fonts - color: #122c56 */
img.name {
  width: 600px;
  max-width: 100%;
  height: auto;
  padding: 1.5em 1.5em 0 1.5em;
}
.summary {
  font-style: italic;
  padding: .5em 1em 0 1em;
  font-size: 1.025rem;
  padding-bottom: 1em;
  border-bottom: 1px solid #bcbcbc;
}
.section-header {
  font-family: Catamaran, sans-serif;
  /*font-family: Archivo, sans-serif;*/
  color: #122c56;
  margin: 0;
  padding-bottom: .05em;
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.4;
  font-optical-sizing: auto;
}
nav {
  height: 4em;
  position: sticky;
  top: 0;
  width: 1000px;
  max-width: 100%;
  z-index: 10;
  margin-top: .5em;
}
.nav {
  padding: 1em;
  margin-bottom: .5em;
  font-family: "fira sans", sans-serif;
  background-color: #f4f4f4;
  border-bottom: .5em solid #25334a;
  font-weight: 500;
  word-spacing: .45em;
}
.subheader {
  margin: 0;
  padding: .3em 0;
  font-size: 1.2rem;
  font-weight: 700;
}
.subheader.experience, .subheader.education, .subheader.details {
  padding-bottom: .1em;
}
.job-title {
  margin: 0;
  padding: .2em 0;
  font-size: 1.05rem;
  font-weight: 500;
}
.dates {
  margin: 0;
  font-size: .95rem;
  letter-spacing: .1em;
  color: #656565;
}
ul.bullet-description {
  list-style-position: outside;
  margin: 0;
  padding: .75em 0 1em 2em;
}
.description {
  margin: 0;
  padding: .6em 0 1.2em 0;
}
.contact-links {
  padding: 0 0 0 1.5em;
}
a:link {
  color: #9d4517;
}
.contact-links a:link {
  padding-right: .25em;
}
a:hover, a:visited, .contact-links a:hover, .contact-links a:visited, .highlighter:hover {
  color: #077814
}
.icon {
  font-size: 1.3em;
  vertical-align: text-bottom;
  padding: 0 .5em 0 .2em;
  opacity: .7;
}
#experience-details {
  display: none;
}
.contact-link {
  white-space: nowrap;
  display: inline-block;
}
.icon-link {
  display: inline-block;
  text-decoration: none;
}
.highlight {
  background-color: #fefe20;
  cursor: pointer;
}
.highlighter {
  cursor: pointer;
  text-decoration: underline;
}

/* Videos: */

video {
  max-width: 100%;
  height: auto;
}
.videos {
  padding: 1em 0;
}

@media only screen and (max-width: 480px) {


  body {
    padding: 1em;
  }
  .lower {
    padding: 0 .25em;
   }
  .contact-link {
    margin-top: .5em;
    display: block;
  }
  
 .summary {
    padding: 0;
  }
  .bullet-description {
    padding-left: 0;
  }
  
 
}

@media only screen and (max-width: 800px) {

  .contact-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0 .5em;
    line-height: 2.4;
  }
  img.name {
    text-align: center;
    padding: 1em 1em 0 1em;
  }

  .lower.lower-videos {
    padding: 0;
  }

}

/* Apply smooth scrolling only if the user hasn't requested reduced motion */
@media screen and (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}