html {
  scroll-behavior: smooth;
}

body {
  padding: 0;
  margin: 0;
  color: #4F4F4F;
}

a {
  color: #21878B;
  cursor: pointer;
}

a:hover {
  text-decoration: none;
  color: #BDBDBD;
}

/* Nav Bar */

.navbar {
  font-family: Helvetica;
  font-size: 1.125em;
  letter-spacing: 0.04em;
  font-color: #4F4F4F;
}

.nav-link,
.navbar-brand, footer a {
  font-family: Helvetica;
  letter-spacing: 0.1em;
  color: #4F4F4F;
}

.navbar img{
  margin-left: .5em;
  margin-top: .5em;
}
.nav-link {
  margin-right: 1em !important;
}
.nav-link:hover {
  color: #BDBDBD;
}
.navbar-collapse {
  justify-content: flex-end;
}

/* Header */

.header {
  position: relative;
  height: 21em !important;
}


.fadeFromLeft{
  position: absolute;
  left: -500px;
}

.fadeFromRight{
  position: absolute;
  right: -500px;
}

.description {
  left: 50%;
  position: absolute;
  top: 45%;
  transform: translate(-50%, -55%);
  text-align: center;
}

/* Footer */

.page-footer{
  padding: 1.5em;
  margin-top: 2em;
  background: #D3E7E8;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}


.section-title {
  margin-bottom: 1.5em;
  display: flex;
  justify-content: center;
  text-align: center;
}

/* portfolio */

.section-container {
  margin: 1em auto;
  padding: 1em;
  position: relative;
}

.aboutMe {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 80%;
  font-size: .875px;
}
.project-title {
  display: inline-block;
  margin-top: .5em;
  margin-right: .25em;
}

.project-type {
  height: 1.5em;
}

.overlay {
  margin-bottom: 1.5em;
  padding-top: 1em;
}

.overlay img, .overlay p{
  /* position: absolute; */
  /* width: 300px; */
}

.coming-soon-projects {
  margin-bottom: 1.5em;
  padding-top: 1em;
  filter: grayscale(100%);
  opacity: 0.5;
}

/* Projects & Projet Pages*/

.projectDescription {
  margin-bottom: 1.5em;
  padding: 1em 1em;

}

.project-link, .project-name{
  text-align: center;
  display: block;

}
.mini-projects {
  padding-left: 2em;
}

.mini-projects h5{
  display: inline;
}

.mini-projects p {
  margin-bottom: 1.25em;
}
/* About me */

.aboutMe div{
  margin: 24px 24px;
}




/* Contact Me */
.contact-icons{
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.contact-icons i, .footer-icons i{
  margin: auto .5em;
}

.contact-links {
  /* width: 20em; */
  margin-bottom: 1em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


@media screen and (max-width: 680px){
  .fadeFromRight, .fadeFromLeft{
    opacity: 0.25;
  }

/* remove text from contact me co */
  .contact-links span {
    display: none;
  }
  .contact-icons{
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .contact-links {
    /* margin: 0 auto; */
    width: 2.25em;
    margin: auto 1.5em;
    display: inline;
  }

  .footer-icons{
    display: none;
  }

}