html {
  scroll-behavior: smooth;
}

.gridContainer {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(7, 1fr);
  grid-template-areas:
    "sideBar first first first first first first first "
    "sideBar about about about about about about about"
    "sideBar second second second second second second second"
    "sideBar skills skills skills skills skills skills skills"
    "sideBar third third third third third third third"
    "sideBar project project project project project project project "
    "sideBar fourth fourth fourth fourth fourth fourth fourth"
    "sideBar contact contact contact contact contact contact contact";
}

#first {
  grid-area: first;
}

#second {
  grid-area: second;
}

#third {
  grid-area: third;
}

#fourth {
  grid-area: fourth;
}

#cards {
  padding: 10px;

}

.card-img-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: 0.3s ease;
  background-color: blue;
}

.card-img-overlay a:hover {
  color: orange;
}

.card-img-overlay .fa {
  padding: 10px;
}

.card-img-overlay:hover {
  opacity: 1;
}

.project-image {
  color: white;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  flex-direction: row;
  flex-wrap: nowrap;
  height: 20vh;
  width: 10vw;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
}

#sideBar {
  grid-area: sideBar;
  color: white;
  height: 100%;
  /* Full-height: remove this if you want "auto" height */
  width: 20vw;
  /* Set the width of the sidebar */
  position: fixed;
  /* Fixed Sidebar (stay in place on scroll) */
  z-index: 1;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #111;
  /* Black */
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 20px;
  padding-right: 20px;
}

.sideBarAs a {
  font-family: 'Luckiest Guy';
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-size: 1.5em;
  padding: 10px;
  color: coral;
  text-decoration: none;
}

.sideBarAs a:hover {
  color: white;
  text-emphasis: bold;
  text-decoration: underline;
  background-image: url("https://media.giphy.com/media/YWbM6nDnBo8X7WIKpl/giphy.gif");
  background-position: 0 0;
  text-transform: uppercase;
  font-family: 'Luckiest Guy';
  color: transparent;
  -webkit-font-smoothing: antialiased;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  margin: 0;
  -webkit-animation: BackgroundAnimated 15s linear infinite;
  -moz-animation: BackgroundAnimated 15s linear infinite;
  -ms-animation: BackgroundAnimated 15s linear infinite;
  -o-animation: BackgroundAnimated 15s linear infinite;
  animation: BackgroundAnimated 15s linear infinite;

  @keyframes BackgroundAnimated {
    from {
      background-position: 0 0
    }

    to {
      background-position: 100% 0
    }
  }

  @-webkit-keyframes BackgroundAnimated {
    from {
      background-position: 0 0
    }

    to {
      background-position: 100% 0
    }
  }

  @-ms-keyframes BackgroundAnimated {
    from {
      background-position: 0 0
    }

    to {
      background-position: 100% 0
    }
  }

  @-moz-keyframes BackgroundAnimated {
    from {
      background-position: 0 0
    }

    to {
      background-position: 100% 0
    }
  }
}

#profilePic {
  grid-area: profilePic;
  height: 30vh;
  border: solid white 3px;
  border-radius: 100em;
}

#aboutMe {
  grid-area: about;
  width: 70vw;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-areas:
    "bio bio info info info";
}

.info {
  grid-area: info;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.bio {
  grid-area: bio;
  color: white;
  background-color: #333654;
  background-image: url("https://www.transparenttextures.com/patterns/brushed-alum-dark.png");
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

#skills {
  grid-area: skills;
  width: 70vw;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "skill skill languages languages languages ";
}

.skill {
  grid-area: skill;
  background-color: #636363;
  background-image: url("https://www.transparenttextures.com/patterns/brushed-alum.png");
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.languages {
  grid-area: languages;
}

.languages img {
  height: 15vh;
}

#projectView {
  grid-area: project;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  grid-template-areas:
    "heading heading cardHolder cardHolder cardHolder ";

}

#projectView>.heading {
  grid-area: heading;
  color: white;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #152340;
  background-image: url("https://www.transparenttextures.com/patterns/always-grey.png");
  margin-bottom: -50px;
}

.cardHolder {
  grid-area: cardHolder;
  text-align: center;
  display: flex;
  flex-direction: column;
  padding: 5em;
  align-items: center;
}

#contact {
  grid-area: contact;
  height: 100vh;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-areas:
    "head head contacts contacts contacts ";
}

.head {
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #384d5c;
  background-image: url("https://www.transparenttextures.com/patterns/checkered-pattern.png");
}

.contacts {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-direction: column;
}

.parent1 {
  background: url("https://media.giphy.com/media/R7q64t6ia4Pks/giphy.gif") fixed no-repeat;
  background-size: cover;
  width: 80vw;
}

.parent2 {
  background: url('https://media.giphy.com/media/uPf4UPGQKlSCY/giphy.gif') fixed no-repeat;
  background-size: cover;
  width: 80vw;
}

.parent3 {
  background: url('https://media.giphy.com/media/Mfr9Bw7BKuQcU/giphy.gif') fixed no-repeat;
  background-size: cover;
  width: 80vw;
}

.parent4 {
  background: url('https://media.giphy.com/media/ujKJqkw5t87gk/giphy.gif') fixed no-repeat;
  background-size: cover;
  width: 80vw;
}

.child1 {
  padding: 471px;
  display: flex;
  flex-direction: column;
}

.child2 {
  padding: 570px;
  display: flex;
  flex-direction: column;
}

.child3 {
  padding: 570px;
  display: flex;
  flex-direction: column;
}

.child4 {
  padding: 570px;
  display: flex;
  flex-direction: column;
}

.child1 h1 {
  color: white;
}

.child1 button {
  color: white;
  background-color: transparent;
  height: 6vh;
  width: 20vw;
  position: relative;
}

.child1 a {
  transition-duration: 100s;
}

.child1 button:hover {
  border-radius: 100px;
  background: url('https://scene360.com/wp-content/uploads/2015/11/cool-animated-gif-08.gif')
}

.child1 span {
  color: coral;
}

.imageLinkIn {
  height: 10vh;
}