/* individual website variables*/
:root {
  --eucalyptus: #9ca89e;
  --sagebrush: #517470;
  --tanglewood: #C4BDB1;
  --danger: #e2afb4;
  --light: #7c827d;
  --dark: #6e756f;
}

.main-content {
  background-color: var(--eucalyptus);
}

main {
  background-color: white;
  margin: 0 auto;
}

a {
  text-decoration: none;
  color: #C4BDB1;
}

a:hover { text-decoration: none; }
a:active { text-decoration: none; }

/* navigation bar */
.nav-custom {
  background-color: var(--eucalyptus);
}

.logo {
  display: flex;
  align-self: center;
}

/* styles */
.bg-eucalyptus {
  background-color: var(--eucalyptus);
}

.bg-sagebrush {
  background-color: var(--sagebrush);
}

.bg-tanglewood {
  background-color: var(--tanglewood);
}

.text_sagebrush {
  color: var(--sagebrush);
}

.primary-link {
  color: var(--sagebrush);
}

.primary-link:hover {
  opacity: .5;
  color: var(--dark);
  text-decoration: overline;
}

.haze-overlay {
  opacity: .4;
}

.header-image {
  width: 100%;
} 

/* .profile-image {
  width: 100%;
  height: auto;
} */

.portfolio-project-cards-container {
  margin-top: 50px;
}

.about-and-experience-container {
  padding: 100px 0px 50px 0px;
}

.headerImageContent {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.mobile-logo-width {
  width: 200px;
}

/* baguetteBox styles start */
.workGallery {
  max-width: 100%;
  margin: 30px auto;
  display:  grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  grid-gap: 20px;
  justify-items: stretch;
}
/* baguetteBox styles start */


/* media queries */
@media ( max-width: 576px ) {
  .nav-custom,
  .page-footer {
    background-color: var(--tanglewood);
  }
}

@media ( max-width: 768px ) {
  .mobile-center-text {
    text-align: center;
  }
  .profile-image {
    width: 260px;
    height: auto;
    margin: 0 auto;
  }
}

@media ( min-width: 992px ) {
  .profile-image img{
    position: absolute;
    width: 90%; /*was 100% */
    transition: 0.5s;
    height: auto;
  }
  .profile-image:hover img:nth-child(4) {
    transform: translate(120px, -120px);
    opacity: 1;
  }
  .profile-image:hover img:nth-child(3) {
    transform: translate(90px, -90px);
    opacity: 0.8;
  }
  .profile-image:hover img:nth-child(2) {
    transform: translate(60px, -60px);
    opacity: 0.6;
  }
  .profile-image:hover img:nth-child(1) {
    transform: translate(30px, -30px);
    opacity: 0.4;
  }
}

/*
upcoming project image styles

.photo{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
}

.photo img{
  width: 200px;
  height: 280px;
  object-fit: cover;
  filter: grayscale(100%) contrast(120%);
  box-shadow: 10px 15px 25px 0 rgba(0,0,0,.2);
  display: block;
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
  margin-top: -10px;
}

.photo:hover img{
  box-shadow: 1px 1px 5px 0 rgba(0,0,0,.1);
}

.photo .glow-wrap{
  overflow: hidden;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  margin-top: -10px;
}

.photo .glow{
  display: block;
  position:absolute;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,.2);
  top: 0;
  filter: blur(5px);
  transform: rotate(45deg) translate(-450%, 0);
  transition: all .5s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover .glow{
  transform: rotate(45deg) translate(450%, 0);
  transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.photo:hover img,
.photo:hover .glow-wrap{
  margin-top: 0;
}

*/