body {
  position: relative;
  max-width: 80%;
  width: auto;
  height: 1800px;
  background: #1f1e1e;
  margin: 0 !important;
}
.container {
  position: relative;
  /* max-width: 80%; */
  width: 90rem;
  height: 118.75rem;
  background: #1f1e1e;
  margin: auto;
}
.about-me {
  display: flex;
  flex-direction: row;
}

#my-info {
  display: inline-block;
  min-width: 560px;
  min-height: 490px;
  max-width: 560px;
  max-height: 490px;
  left: 145px;
  top: 683px;
  margin: 49px 15px -8px 145px;
  background: linear-gradient(85.97deg, #654ea3 -93.14%, #eaafc8 83.77%);
  opacity: 0.15;
}

#my-image {
  min-width: 560px;
  min-height: 490px;
  max-width: 560px;
  max-height: 490px;
  left: 1295px;
  top: 193px;
  margin: 49px 145px -20px 15px;
  transform: matrix(-1, 0, 0, 1, 0, 0);
}

.hi {
  position: absolute;
  width: 92px;
  height: 48px;
  left: 195px;
  top: 220px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 30px;
  line-height: 48px;
  color: #f3f3f3;
}

.my-name {
  position: absolute;
  width: 330px;
  height: 59px;
  left: 195px;
  top: 261px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 38px;
  line-height: 59px;
  color: #f3f3f3;
}

.my-intro {
  position: absolute;
  width: 470px;
  height: 132px;
  left: 195px;
  top: 337px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 23px;
  line-height: 33px;
  color: #f3f3f3;
  opacity: 0.6;
}

.location {
  position: absolute;
  width: 551px;
  height: 33px;
  left: 195px;
  top: 489px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 33px;
  color: #f3f3f3;
  opacity: 0.8;
}

.email {
  position: absolute;
  width: 500px;
  height: 33px;
  left: 192px;
  top: 529px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 24px;
  line-height: 33px;
  color: #f3f3f3;
  opacity: 0.8;
}

.logo {
  width: 64px;
  height: 46px;
  left: 146px;
  top: 31px;
  margin: 31px 307px 0px 146px;
  font-family: 'Cinzel Decorative', cursive;
  font-style: normal;
  font-weight: bold;
  font-size: 34px;
  line-height: 46px;
  color: #f3f3f3;
}

.navbar {
  display: flex;
  flex-direction: row;
}

.nav-links {
  display: flex;
  width: 60px;
  height: 30px;
  left: 824px;
  top: 61px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 30px;
  color: #ffffff;
  opacity: 0.8;
}

.home {
  /* position: absolute; */
  min-width: 68px;
  height: 30px;
  left: 800px;
  top: 31px;
  margin: 31px 26px 4px 285px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 30px;
  /* identical to box height */
  color: #f3f3f3;
  opacity: 0.6;
}

.about {
  /* position: absolute; */
  min-width: 68px;
  height: 30px;
  left: 936px;
  top: 31px;
  margin: 31px 26px 4px 26px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 30px;
  /* identical to box height */
  color: #f3f3f3;
  opacity: 0.6;
}

.navbar-projects {
  /* position: absolute; */
  min-width: 78px;
  height: 30px;
  left: 936px;
  top: 31px;
  margin: 31px 26px 0px 26px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 30px;
  /* identical to box height */
  color: #f3f3f3;
  opacity: 0.6;
}

.resume {
  /* position: absolute; */
  min-width: 78px;
  height: 30px;
  left: 1050px;
  top: 31px;
  margin: 31px 208px 4px 26px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 22px;
  line-height: 30px;
  color: #f3f3f3;
  opacity: 0.6;
}

.home:hover,
.about:hover,
.resume:hover,
.navbar-projects:hover {
  opacity: 0.8;
  cursor: pointer;
}

.hr-line {
  margin: 4px 39px 45.5px 0px;
  width: 50%;
  border-color: transparent;
}

.mywork {
  display: flex;
  align-items: center;
  width: 1440px;
}

.hr-mywork {
  min-width: 505px;
  height: 3px;
  border-color: #f3f3f3;
  background-color: #f3f3f3;
  position: left;
  margin: 82px 7px 21px 146px;
}

.title-mywork {
  margin: 70px 160px 11.5px 7px;
  min-width: 140px;
  min-height: 48px;
  left: 665px;
  top: 823px;
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 25px;
  line-height: 48px;
  color: #f3f3f3;
}



.fab {
  font-size: 32px;
  color: #f3f3f3;
}

.fab:hover {
  cursor: pointer;
}

.fa-linkedin {
  margin: 77px 8.55px 13.5px 200px;
}

.fa-behance-square {
  margin: 77px 8.55px 13.5px 8.55px;
}

.fa-dribbble-square {
  margin: 77px 0px 13.5px 8.55px;
}

.footer {
  width: 1440px;
  height: 111px;
  left: 0px;
  margin: auto;
  background: linear-gradient(
    244.16deg,
    #c6ffdd 0%,
    #515151 0%,
    #515151 88.01%
  );
  opacity: 0.2;
  transform: matrix(1, 0, 0, -1, 0, 0);
}

.fa-map-marker-alt {
  margin-right: 19.88px;
}

.fa-envelope {
  margin-right: 18px;
}

.navbar-href-css {
  text-decoration: none;
}

.projects {
  display: grid;
  grid-template-columns: 560px 560px;
  grid-template-rows: 490px 490px;
  column-gap: 30px;
  row-gap: 35px;
  margin: 11.5px 145px 0px 145px;
}

.project1 {
  width: 560px;
  height: 490px;
  left: 145px;
  top: 1382px;
  background: linear-gradient(
    70.58deg,
    rgba(37, 162, 160, 0.6),
    rgba(75, 208, 206, 0.6)
  ),
    url('./images/refer.market/0.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.project1:hover {
  background-image: url('./images/refer.market/0.jpg');
  -webkit-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
  cursor: pointer;
}

.project2 {
  width: 560px;
  height: 490px;
  left: 735px;
  top: 1382px;
  background: linear-gradient(
      94.91deg,
      rgba(161, 92, 215, 0.6) -113.33%,
      rgba(158, 173, 244, 0.6) 131.05%
    ),
    url('./images/olive/0.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.project2:hover {
  background-image: url('./images/olive/0.jpg');
  -webkit-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
  cursor: pointer;
}

.project3 {
  width: 560px;
  height: 490px;
  left: 145px;
  top: 1382px;
  background: linear-gradient(
      70.58deg,
      rgba(255, 195, 160, 0.6),
      rgba(255, 187, 164, 0.6),
      rgba(253, 159, 176, 0.6)
    ),
    url('./images/perfect-property/1.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.project3:hover {
  background-image: url('./images/perfect-property/1.jpg');
  -webkit-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
  cursor: pointer;
}

.project4 {
  width: 560px;
  height: 490px;
  left: 145px;
  top: 1902px;
  background: linear-gradient(
      94.91deg,
      rgba(116, 235, 213, 0.6) -113.33%,
      rgba(140, 160, 255, 0.6) 191.35%
    ),
    url('./images/learning-app/1.jpg');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.project4:hover {
  background-image: url('./images/learning-app/1.jpg');
  -webkit-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
  cursor: pointer;
}

.project5 {
  width: 560px;
  height: 490px;
  left: 735px;
  top: 1902px;
  background: linear-gradient(
      244.16deg,
      rgba(255, 189, 89, 0.6) 0%,
      rgba(254, 238, 152, 0.6) 0%,
      rgba(255, 206, 111, 0.6) 88.01%
    ),
    url('./images/makan/cover-photo.png');
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.project6 {
  width: 560px;
  height: 490px;
  left: 735px;
  top: 1902px;
  background: linear-gradient(
      244.16deg,
      rgba(255, 189, 89, 0.6) 0%,
      rgba(254, 238, 152, 0.6) 0%,
      rgba(255, 206, 111, 0.6) 88.01%
    );
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.project5:hover {
  /* background-image: url('./images/makan/cover-photo.png'); */
  -webkit-transition: background-image 2s ease-in-out;
  transition: background-image 2s ease-in-out;
  cursor: pointer;
}

.project-name {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: bolder;
  font-size: 23px;
  color: #1f1e1e;
}

.project-subname {
  font-family: 'Lato', sans-serif;
  font-style: normal;
  font-weight: lighter;
  font-size: 20px;
  color: black;
}

.project1-title-background {
  background: linear-gradient(
    70.58deg,
    rgba(37, 162, 160, 1),
    rgba(75, 208, 206, 1)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  min-height: 100px;
}

.project2-title-background {
  background: linear-gradient(
    94.91deg,
    rgba(161, 92, 215, 1) -113.33%,
    rgba(158, 173, 244, 1) 131.05%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  min-height: 100px;
}

.project3-title-background {
  background: linear-gradient(
    70.58deg,
    rgba(255, 195, 160, 1),
    rgba(255, 187, 164, 1),
    rgba(253, 159, 176, 1)
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  min-height: 100px;
}

.project4-title-background {
  background: linear-gradient(
    94.91deg,
    rgba(116, 235, 213, 1) -113.33%,
    rgba(140, 160, 255, 1) 191.35%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  min-height: 100px;
}

.project5-title-background {
  background: linear-gradient(
    244.16deg,
    rgba(255, 189, 89, 1) 0%,
    rgba(254, 238, 152, 1) 0%,
    rgba(255, 206, 111, 1) 88.01%
  );
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 560px;
  min-height: 100px;
}

.navbar-href-css {
  text-decoration: none;
  color: #f3f3f3;
}

@media only screen and (min-width: 769px) and (max-width: 1450px) {
  body {
    position: relative;
    max-width: 80%;
    width: auto;
    height: 1800px;
    background: #1f1e1e;
    margin: 0 !important;
  }

  .footer {
    width: 1440px;
    height: 111px;
    left: 0px;
    /* top: 2157px; */
    background: linear-gradient(
      244.16deg,
      #c6ffdd 0%,
      #515151 0%,
      #515151 88.01%
    );
    opacity: 0.2;
    transform: matrix(1, 0, 0, -1, 0, 0);
  }

  .hr-mywork {
    min-width: 505px;
    height: 3px;
    border-color: #f3f3f3;
    background-color: #f3f3f3;
    position: left;
    /* margin: 82px 7px 21px 83px; */
  }

  .projects {
    display: grid;
    grid-template-columns: 560px 560px;
    grid-template-rows: 490px 490px;
    grid-template-rows: 1fr;
    column-gap: 30px;
    row-gap: 35px;
    margin: 11.5px auto;
    width: 80%;
  }

  .fa-linkedin {
    margin: 77px 8.55px 13.5px 200px;
  }

  .fa-behance-square {
    margin: 77px 8.55px 13.5px 8.55px;
  }

  .fa-dribbble-square {
    margin: 77px 0px 13.5px 8.55px;
  }

  #my-info {
    /* margin-left: 83px; */
  }

  .logo {
    /* margin-left: 80px; */
  }

  .hi {
    /* margin-left: -70px; */
  }

  .my-name {
    /* margin-left: -70px; */
  }

  .my-intro {
    /* margin-left: -70px; */
  }

  .location {
    /* margin-left: -70px; */
  }

  .email {
    /* margin-left: -70px; */
  }
}

@media only screen and (min-width: 1451px) {
  body {
    position: relative;
    max-width: 80%;
    width: auto;
    height: 1800px;
    background: #1f1e1e;
    margin: 0 auto !important;
  }
}