/** Global **/
body {
  font-size: 10px; /* set to 10px for easier rem conversion */
}
h1, h2, .greetings, .intro--thanks {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  margin-bottom: 1.5rem;
  display: block;
}

h2, .intro--thanks {
  line-height: 1.25;
}

p, li {
  font-family: 'Merriweather', serif;
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
  padding: 0;
}

a {
  font-family: 'Montserrat', sans-serif;
  text-decoration: underline;
  color: #000;
  cursor: pointer;
}

a:hover,
a:focus {
  text-decoration: none;
}

.section {
  padding-bottom: 3.0rem;
}

main .section {
  padding-top: 3.0rem;
  border-bottom: #707070 .1rem solid;
}

/** Intro section **/
.intro {
  text-align: center;
  padding: 5.0rem 1.5rem 3.0rem;
}

.intro .greetings {
  font-size: 12.5rem;
  line-height: .75;
}

.intro nav ul {
  padding: 3.0rem 0;
  line-height: 2;
  max-width: 100%;
}

.intro nav ul a {
  font-size: 1.8rem;
  white-space: nowrap;
}

/** Sticky Navigation **/
.sticky-nav ul {
  margin-bottom: 0;
  border-bottom: .1rem solid #707070;
}

.sticky-nav ul li {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  margin: .8rem 0;
  padding: 0;
  float: left;
  width: 50%;
}

.sticky-nav ul li a {
  color: #474747;
  text-decoration: none;
}

.sticky-nav ul li a:hover,
.sticky-nav ul li a:focus {
  text-decoration: underline;
}

.sticky-nav ul li a.active {
  font-weight: 800;
}

.sticky-nav.affix {
  top: 0;
  background-color: #fff;
  z-index: 1;
  width: 100%;
}

.anchor-target::before {
  content:"";
  display:block;
  height: 12.5rem;
  margin:-12.5rem 0 0;
}

/** About section **/
.about .image {
  margin-bottom: 1.5rem;
  text-align: center;
}

.about a:hover,
.about a:focus {
  text-decoration: none;
}

.about .modal .modal-header h2 {
  margin-bottom: 0;
  font-size: 2.5rem;
  padding-right: 2.5rem;
}

.about .modal .modal-header .close {
  position: absolute;
  top: 1.0rem;
  right: 1.5rem;
  opacity: 1;
  font-size: 4.4rem;
}

.about .modal .modal-body {
  padding: 0;
  max-height: calc(100vh - 130px);
    overflow-y: auto;
    overflow-x: hidden;
}

.about .modal .modal-body img {
  margin: 0 auto;
  display: block;
}

.about .modal .modal-body p {
  padding: 1.5rem;
}

/** Projects section **/
.projects .img,
.projects .text {
  padding: 0;
}

.projects .img {
  margin-top: 1.5rem;
  text-align: center;
}

.projects h2,
.projects h3 {
  margin: 0 0 .8rem;
}

.projects h2 {
  font-size: 5.0rem;
}

.projects .project-item {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
    }

.projects .project-item .minor-note {
  font-size: 1.6rem;
  display: block;
}

.projects .project-item li {
  padding: 0;
  margin-bottom: 0;
  font-size: 1.5rem;
  font-family: 'Montserrat', sans-serif;
}

.projects .project-item li span {
  font-family: 'Merriweather', serif;
}

.projects .divider {
  color: #707070;
  font-size: 5.0rem;
  text-align: center;
}

.skills ul,
.projects ul {
  margin: 0;
}

.skills li {
  padding: 0;
  font-size: 2.0rem;
}

/** Tablet up styles **/
@media screen and (min-width: 768px){
  .intro {
    padding: 10vh 0;
  }

  .intro .greetings, .intro h1{
    line-height: 85%;
  }

  .intro .greetings {
    font-size: 20.0rem;
  }

  .intro h1,
  .intro--thanks {
    font-size: 5.0rem;
  }

  .sticky-nav ul li {
    padding-right: 3.0rem;
    margin: 1.5rem 0;
    float: none;
    width: auto;
  }

  .anchor-target::before {
    height: 10rem;
    margin:-8.5rem 0 0;
  }

  .about .modal .modal-dialog {
    width: 75%;
  }

  .projects .img {
    padding-left: 1.5rem;
    margin-top: 0;
  }

  .projects .divider {
      text-align: left;
  }
}

/** Desktop up styles **/
@media screen and (min-width: 992px){
  /* .intro {
    height: 100vh;
  } */
}