@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap");
* {
  margin: 0px;
  padding: 0px;
  font-family: "Inter", sans-serif;
  scroll-behavior: smooth;
}

:root {
  --primary-background: #fff;
  --secondary-background: #3c4761;
  --secondary-background-fallback: rgba(63, 71, 97, 0.9);
  --primary-color: #3c4761;
  --secondary-color: #fff;
  --grey: #f9f9f9;
  --grey-dark: #ddd;
}

.bold {
  font-weight: 400;
  font-size: 0.9rem;
  margin: 0.5rem;
}

.animation_span {
  transition: all 0.5s ease 0.3s;
  color: rgb(177, 177, 177);
  opacity: 0;
}

.fade_span {
  color: rgb(255, 255, 255);
  opacity: 1;
}

#bg {
  width: 100%;
  height: 100vh;
  transition: all cubic-bezier(0.19, 1, 0.22, 1) 0.5s;
  background-color: #fff;
}

.skill_number {
  animation: slide_number 4s;
}

@keyframes slide_number {
  0% {
    width: 0%;
  }
  100% {
    width: 96%;
  }
}
a {
  text-decoration: none;
  color: #e6e6e6;
}

.container .header {
  background-color: transparent;
  position: absolute;
  color: #ffffff;
  width: 100%;
}
.container .header .header__name_nav {
  display: flex;
  justify-content: space-around;
  font-size: 0.8rem;
}
.container .header .header__name_nav .header__name {
  padding: 2rem;
}
.container .header .header__name_nav .header__nav_links ul {
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
}
.container .header .header__name_nav .header__nav_links ul li {
  padding: 2rem;
}
.container .header .header__name_nav .header__nav_links ul li:hover {
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}
.container .header .hamberg__close {
  float: right;
  font-size: 2rem;
  padding: 2rem;
  display: none;
}
.container .header .show_hamberg {
  float: right;
  font-size: 2rem;
  padding: 2rem;
  display: none;
}
.container .header .sliding {
  animation-name: sliding;
  animation-duration: 0.1s;
}
.container .header .header__nav_links ul {
  display: block;
}
@keyframes sliding {
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}
.container .header .backSlide {
  animation-name: slidingBack;
  animation-duration: 0.1s;
}
@keyframes slidingBack {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}
.container main .main__banner__name_social_handles {
  color: #ffffff;
  background: url("../assets/bg1banner.png") no-repeat;
  background-color: black;
  background-size: cover;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.container main .main__banner__name_social_handles .banner__social_handles ul {
  display: flex;
  justify-content: center;
  list-style-type: none;
}
.container main .main__banner__name_social_handles .banner__social_handles ul li {
  margin: 1rem;
}
.container main .main__banner__name_social_handles .banner__social_handles ul li:hover {
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
}
.container main .portfolio_container {
  text-align: center;
  background-color: var(--secondary-color);
  display: flex;
  flex-direction: column;
  width: 100%;
}
.container main .portfolio_container .portfolio {
  margin-left: 5rem;
  margin-right: 5rem;
}
.container main .portfolio_container .portfolio .protfolio_title {
  padding-top: 2rem;
}
.container main .portfolio_container .portfolio .portfolio_buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 5%;
}
.container main .portfolio_container .portfolio .protfolio_btn {
  padding: 0.5rem;
  border: none;
  font-weight: 600;
  font-size: 1rem;
  background-color: transparent;
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  color: black;
  border-radius: 1rem;
  height: 22px;
}
.container main .portfolio_container .portfolio .image_gallery {
  margin-top: 3%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
.container main .portfolio_container .portfolio .image_gallery .image_gallery_items {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 345px;
  margin: 1%;
}
.container main .portfolio_container .portfolio .image_gallery .item1 {
  position: relative;
}
.container main .portfolio_container .portfolio .image_gallery .sliding_img_div {
  position: absolute;
  width: 100%;
  top: 0;
  clip: rect(0 175px 1000px 0);
}
.container main .portfolio_container .portfolio .image_gallery #sliding_img {
  width: 100%;
}
.container main .portfolio_container .portfolio .image_gallery .item2 {
  cursor: none;
}
.container main .portfolio_container .portfolio .image_gallery .magnifier {
  border: 5px solid #000;
}
.container main .portfolio_container .portfolio .image_gallery .img_magnifier {
  position: absolute;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  border: 2px solid #000;
  transition: transform 0.8s;
}
.container main .portfolio_container .portfolio .image_gallery #iem_3_img_div {
  transition: transform 0.8s;
}
.container main .portfolio_container .portfolio .image_gallery .item3 {
  position: relative;
}
.container main .portfolio_container .portfolio .image_gallery .item3:hover #iem_3_img_div {
  transform: rotateY(90deg);
  visibility: hidden;
}
.container main .portfolio_container .portfolio .image_gallery .ecommerce_backside {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: whitesmoke;
  border-radius: 0.5rem;
  color: black;
  border: 1px solid black;
  transition: transform 0.5s;
  visibility: hidden;
}
.container main .portfolio_container .portfolio .image_gallery .ecommerce_backside p {
  padding: 1rem;
}
.container main .portfolio_container .portfolio .image_gallery .item3:hover .ecommerce_backside {
  visibility: visible;
  transform: rotateY(-180deg);
}
.container main .portfolio_container .portfolio .image_gallery .item3:hover .ecommerce_backside p {
  transform: rotateY(-180deg);
}
.container main .portfolio_container .portfolio .image_gallery .item_image {
  display: flex;
  position: relative;
  overflow-x: hidden;
  overflow-y: hidden;
}
.container main .portfolio_container .portfolio .image_gallery .item_image_img {
  max-width: 100%;
  transition: transform 0.2s;
}
.container main .portfolio_container .portfolio .image_gallery #zoomed_image_magnified {
  position: absolute;
  transform: scale(1.1);
  clip-path: circle(15% at 50% 50%);
  transition: transform 0.8s;
  border: 2px solid black;
}
.container main .portfolio_container .portfolio .image_gallery .item_description {
  height: 20%;
  margin-left: 10%;
  margin: 5%;
}
.container main .portfolio_container .portfolio .image_gallery #item4_img:hover {
  animation: shake 0.1s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% {
    transform: translate(1px, 1px) rotate(0);
  }
  50% {
    transform: translate(-1px, 5px) rotate(-1deg);
  }
  100% {
    transform: translate(1px, -2px) rotate(-1deg);
  }
}
.container main .portfolio_container .portfolio .image_gallery #item5_img {
  position: relative;
}
.container main .portfolio_container .portfolio .image_gallery #overlapping_img {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.container main .portfolio_container .portfolio .image_gallery #item5_img:hover #overlapping_img {
  display: inline;
}
.container main .portfolio_container .portfolio .image_gallery .drop_effect {
  position: relative;
  width: 100%;
}
.container main .portfolio_container .portfolio .image_gallery .item_dropdown {
  position: absolute;
  background-color: whitesmoke;
  top: 0;
  height: 0%;
  width: 100%;
  overflow: hidden;
  transition: height 1s;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s ease-in-out;
}
.container main .portfolio_container .portfolio .image_gallery .item_dropdown p {
  background-color: black;
  padding: 0.5rem;
  color: white;
  border-radius: 0.5rem;
  border: 1px solid black;
  box-shadow: 2px 5px 4px #888888;
}
.container main .portfolio_container .portfolio .image_gallery .item_dropdown p:hover {
  background-color: white;
  color: black;
  border: 1px solid white;
}
.container main .portfolio_container .portfolio .image_gallery .item6:hover #drop {
  height: 99%;
}
.container main .portfolio_container .portfolio .image_gallery .item_title {
  font-size: 1.1rem;
  font-weight: 900;
  margin: 5%;
}
.container main .portfolio_container .portfolio .image_gallery .item_profession_description {
  font-size: 0.9rem;
  font-weight: 200;
  color: #bdbdbd;
  margin: 5%;
}
.container main .portfolio_container .portfolio .image_gallery .item_detail {
  margin: 5%;
}
.container main .portfolio_container .portfolio .image_gallery .item_email {
  margin: 5%;
}
.container main .portfolio_container .portfolio .image_gallery .center {
  display: flex;
  justify-content: center;
  text-align: center;
}
.container main .portfolio_container .portfolio .image_gallery .black {
  background-color: #000;
  margin-top: 5rem;
}
.container main .main__about_me {
  display: flex;
  margin-top: 3rem;
  gap: 0.5rem;
}
.container main .main__about_me .about_me__image {
  width: 100%;
}
.container main .main__about_me .about_me__image img {
  max-width: 100%;
  margin-top: 4rem;
}
.container main .main__about_me .about_me__description h2 {
  padding-top: 2rem;
}
.container main .main__about_me .about_me__description .description__content {
  margin-top: 1rem;
  padding-top: 4rem;
}
.container main .main__about_me .about_me__description .description_skill_chart {
  margin-top: 3rem;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills {
  position: relative;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills .skill {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  visibility: hidden;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_1 {
  margin-left: 1rem;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_1::before {
  content: "";
  position: absolute;
  top: 20%;
  left: 0%;
  height: 0.5rem;
  width: 100%;
  background-color: rgb(189, 189, 189);
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_1::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 0%;
  height: 0.5rem;
  width: 95%;
  background-color: #010101;
  display: var(--afterdisplay, none);
  animation: skill_1 4s;
}
@keyframes skill_1 {
  0% {
    width: 0%;
  }
  100% {
    width: 95%;
  }
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_2 {
  margin-left: 6%;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_2::before {
  content: "";
  position: absolute;
  top: 46%;
  left: 0%;
  height: 0.5rem;
  width: 100%;
  background-color: rgb(189, 189, 189);
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_2::after {
  content: "";
  position: absolute;
  top: 46%;
  left: 0%;
  height: 0.5rem;
  width: 90%;
  background-color: #000000;
  display: var(--afterdisplay, none);
  animation: skill_2 4s;
}
@keyframes skill_2 {
  0% {
    width: 0%;
  }
  100% {
    width: 90%;
  }
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_3 {
  margin-left: 0;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_3::before {
  content: "";
  position: absolute;
  top: 69%;
  left: 0%;
  height: 0.5rem;
  width: 100%;
  background-color: rgb(189, 189, 189);
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_3::after {
  content: "";
  position: absolute;
  top: 69%;
  left: 0%;
  height: 0.5rem;
  width: 85%;
  background-color: #000000;
  display: var(--afterdisplay, none);
  animation: skill_3 4s;
}
@keyframes skill_3 {
  0% {
    width: 0%;
  }
  100% {
    width: 85%;
  }
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_4 {
  margin-left: 6%;
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_4::before {
  content: "";
  position: absolute;
  top: 93%;
  left: 0%;
  height: 0.5rem;
  width: 100%;
  background-color: rgb(189, 189, 189);
}
.container main .main__about_me .about_me__description .description_skill_chart .skill_chart__skills #skill_4::after {
  content: "";
  position: absolute;
  top: 93%;
  left: 0%;
  height: 0.5rem;
  width: 80%;
  background-color: #000000;
  display: var(--afterdisplay, none);
  animation: skill_4 4s;
}
@keyframes skill_4 {
  0% {
    width: 0%;
  }
  100% {
    width: 80%;
  }
}
.container main .main__personal_details_container {
  display: flex;
  width: 100%;
  background-color: #f5f5f5;
}
.container main .main__personal_details_container .personal_details {
  text-align: center;
  position: relative;
  height: 10rem;
  width: 33%;
  padding: 3rem;
}
.container main .main__personal_details_container .personal_details::after {
  content: "";
  position: absolute;
  right: 0;
  top: 20%;
  height: 60%;
  border-right: 2px solid rgb(0, 0, 0);
}
.container main .main__personal_details_container .personal_details .icon {
  font-size: 2rem;
  color: #000000;
  margin-top: 2rem;
}
.container main .main__personal_details_container .personal_details a {
  color: #010101;
}
.container main .main__personal_details_container .personal_details .contact_info {
  margin-top: 5%;
  font-size: 1.3rem;
}
.container main .main__personal_details_container .personal_details .personal_details_info {
  font-size: 0.8rem;
}
.container main .project_sections_div {
  background-color: #f5f5f5;
  transition-timing-function: ease-in;
  transition: all;
  height: 100%;
}
.container main .project_sections_div .project_sections__heading {
  margin-top: 2rem;
  text-align: center;
}
.container main .project_sections_div .project_sections__heading h2 {
  padding: 2rem;
}
.container main .project_sections_div .project_section {
  display: flex;
  transition: 5s;
  flex-wrap: wrap;
  max-width: 100%;
  gap: 4rem;
  padding: 2rem;
  margin: 1rem;
  justify-content: center;
  margin-top: 1rem;
}
.container main .project_sections_div .project_section .project {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  max-width: 300px;
  margin: auto;
  transition: 450ms;
}
.container main .project_sections_div .project_section .project img {
  max-width: 20%;
  margin-top: 5%;
  transition: transform 2s;
}
.container main .project_sections_div .project_section .project #tesla_img {
  border-radius: 0.5rem;
}
.container main .project_sections_div .project_section .project .project_details {
  color: #000;
  font-size: 14px;
}
.container main .project_sections_div .project_section .project .project_details p {
  margin: 1rem;
}
.container main .project_sections_div .project_section .project .project_details h4 {
  padding: 1rem;
}
.container main .project_sections_div .project_section .project:hover {
  scale: 1.08;
}
.container main .gitlab_activity_div {
  text-align: center;
  background-color: white;
  padding-bottom: 2rem;
}
.container main .gitlab_activity_div .gitlab_activity_div__heading h2 {
  margin: 2rem;
  padding: 2rem;
}
.container main .gitlab_activity_div .gitlab_activity_div_body img {
  width: 60%;
  max-height: 484px;
}
.container main .main__download_resume {
  background-color: #f5f5f5;
  text-align: center;
  height: 100%;
}
.container main .main__download_resume h2 {
  padding: 2rem;
  padding: 2rem;
}
.container main .main__download_resume button {
  margin: 2rem;
  padding: 0.5rem;
  background-color: #393939;
  color: #fffdff;
  cursor: pointer;
  border-radius: 0.7rem;
  padding: 0.5rem 1rem;
  text-align: center;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 2rem;
}
.container main .main__download_resume button:hover {
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  background-color: white;
  color: black;
  background-color: #f5f5f5;
}
.container main .main__contact_div {
  text-align: center;
}
.container main .main__contact_div h2 {
  padding: 2rem;
  padding: 2rem;
}
.container main .main__contact_div .contact_form {
  margin-top: 3rem;
  display: flex;
  justify-content: center;
  width: 100%;
}
.container main .main__contact_div .contact_form form {
  width: 60%;
}
.container main .main__contact_div .contact_form .input_boxes {
  display: block;
  text-align: center;
  padding: 1rem;
  width: 90%;
  margin: 1rem;
  border-top: none;
  border-left: none;
  border-right: none;
}
.container main .main__contact_div .contact_form .input_boxes:nth-child(6) {
  padding-top: 4rem;
}
.container main .main__contact_div .contact_form button {
  margin: 2rem;
  padding: 0.5rem;
  background-color: #393939;
  color: #fffdff;
  cursor: pointer;
  border-radius: 0.7rem;
  padding: 0.5rem 1rem;
  text-align: center;
  border: 1px solid rgb(0, 0, 0);
  border-radius: 2rem;
}
.container main .main__contact_div .contact_form button:hover {
  color: #ffffff;
  font-weight: 700;
  cursor: pointer;
  background-color: white;
  color: black;
}
.container main .main__contact_div section {
  background-color: #010101;
  color: #fff;
  height: 20vh;
}
.container main .main__contact_div section p {
  padding-top: 3rem;
}

.bookmark {
  position: fixed;
  color: rgb(0, 0, 0);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 0.5rem;
  height: 2rem;
  width: 2rem;
  z-index: 10;
  font-size: 18px;
  bottom: 10px;
  right: 10px;
  display: var(--afterdisplay, none);
  transition: 0.3s ease-in-out;
  justify-content: center;
  align-items: center;
  padding: 0.1rem;
}

@media only screen and (max-width: 820px) {
  .container .main__about_me {
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 0.5rem;
  }
}
@media only screen and (max-width: 768px) {
  html {
    font-size: 80%;
  }
  .container main .main__about_me .about_me__image {
    width: 100%;
  }
  .container main .main__about_me .about_me__image img {
    margin-top: 4rem;
  }
  .container main .main__about_me .about_me__description {
    padding: 2rem;
  }
  .container main .main__about_me .about_me__description .description_skill_chart #skill_1::after {
    display: block;
  }
  .container main .main__about_me .about_me__description .description_skill_chart #skill_2::after {
    display: block;
  }
  .container main .main__about_me .about_me__description .description_skill_chart #skill_3::after {
    display: block;
  }
  .container main .main__about_me .about_me__description .description_skill_chart #skill_4::after {
    display: block;
  }
  .container main .main__personal_details_container {
    flex-direction: column;
    text-align: center;
  }
  .container main .main__personal_details_container .personal_details {
    width: 100%;
    padding: 0;
    margin-top: 2rem;
  }
  .container main .main__personal_details_container .personal_details::after {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  .container .header .header__name_nav {
    flex-direction: column;
    align-items: center;
    width: 100vw;
    display: none;
  }
  .container .header .header__name_nav .header__nav_links ul {
    flex-direction: column;
    text-align: center;
  }
  .container .header .show_hamberg {
    display: block;
    position: absolute;
  }
}
@media only screen and (max-width: 500px) {
  html {
    font-size: 70%;
  }
  .container main .gitlab_activity_div .gitlab_activity_div_body img {
    width: 100%;
  }
}
@media only screen and (max-width: 280px) {
  .container main .portfolio_container .portfolio .image_gallery #sliding_img {
    height: 8rem;
    margin-left: 2%;
  }
}/*# sourceMappingURL=style.css.map */