@keyframes slideInLeft {
  0% {
    transform: translateX(200%);
  }
  100% {
    transform: translateX(0);
  }
}


@media only screen and (min-width: 768px) {

/* NAV BAR STYLING */
    .menu-items {
        display: inline-block;
        align-content: center;
        font-size: .9em;
        padding: 0 20px;
    }

    nav h3 {
        padding-top: 1em;
        padding-left: .4em;
        font-size: .5em;
    }

/* OPEN MENU STYLING */
.click-menu {
  display: none;
}

.menu-open {
  }

/* INTRO STYLING */
.intro {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    /* margin: 0 100px; */
}

.intro h1 {
  margin-top: 45%;
  font-size: 3em;
}

.intro-text {
    margin-left: 5%;
    margin-right: 7%;
    z-index: 2;
}

.headshot {
    width: 400px;
    height: 400px;
    margin-top: 15%;
    margin-right: 5%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 2;
  }

.blue-box {
  animation: 1s ease-out 0s 1 slideInLeft;
  background-color: var(--blue);
  width: 400px;
  height: 400px;
  display: block;
  z-index: 1;
  position: absolute;
  margin-top: 9%;
  right: 10%;
}

/* ABOUT STYLING */
.about-container {
    display: flex;
    justify-content: center;
}

.about-img {
    max-width: 40%;
    object-fit: cover;
    min-height: 60%;
}

.button {
  margin-bottom: 10%;
}

.social-icons {
  display: flex;
  justify-content: space-evenly;
}

.social-icons i {
  padding: 0 auto;
}
 p {
   line-height: 35px;
   font-size: 1.3em;
 }

 .about-me h4 {
   font-size: 1.5em;
   line-height: 35px;
 }

/* PROJECTS STYLING */

.carousel {
  display: flex;
  justify-content: space-around;
}

.projects img {
  width: 80%;
  height: 500px;
  object-fit: cover;
  display: block;
  margin: 0 auto;
  object-position: center;
}

.projects-container h1 {
  font-size: 2.5em;
  margin-right: 5%;
}

/* CONTACT STYLING */
.contact-container {
    display: flex;
    justify-content: space-around;
    align-content: center;
    padding: 0;
}


.headshot-contact {
    display: block;
    width: 50%;
    margin-right: -50px;
    height: 650px;
    position: relative;
    object-position: bottom;
}

}   

@media only screen and (min-width: 1024px) {
  /* FONT SIZE */
  @font-face {
    font-family: Northern-Worssley;
    src: url("assets/Northern\ Worssley\ Free.ttf");
    font-size: 200%;
  }
  
  @font-face {
    font-family: Creattion;
    src: url("assets/modernline.otf");
    font-size: 200%;
  }
      
  /* IMAGE SIZE ADJUSTMENT */
  .headshot {
      height: 450px;
      width: 450px;
      margin-top: 12%;
    }
  
  .intro h1 {
      font-size: 3.6em;
  }

  .blue-box {
      width: 450px;
      height: 450px;
      margin-top: 8%;
      right: 10%;
    }
  
  .headshot-contact {
      margin-right: -120px;
      position: relative;
      object-position: center;
  }

  #insta, #facebook, #pinterest {
    display:inline;
  }

  .social-icons i {
    padding: 0 30%;
  }
  
  .about-icons {
    flex-direction: row;
  }
  
  .button {
    margin: 0;
    margin-left: -10px;
  }

    /* PROJECTS SIZE ADJUSTMENT */
  
    .projects img {
      height: 600px;
  }
  
    .projects h3 {
      font-size: 1em;
    }
    
    .projects-container h2 {
      font-size: 6em;
      margin-left: 10%;
      margin-bottom: -120px;
    }
    
    .projects-container h1 {
      font-size: 3.5em;
      transform: rotate(-3deg);
      margin-right: 10%;
      margin-top: -80px;
    }
  
  } 

  @media only screen and (min-width: 1500px) {

  nav {
    padding: 0 10%;
  }

  .intro {
    padding: 0 10%;
  }

  .about-container {
    padding: 0 10%;
  }

  .projects-container {
    padding: 0 10%;
  }

  .contact-container {
    padding: 0 10%;
  }

  .blue-box {
    width: 450px;
    height: 450px;
    margin-top: 7%;
    right: 18%;
  }

  .hamburger-menu {
    top: 0px;
    right: 10%;
  }

  }