/* Globally */

@font-face {
  font-family: "Poppins";
  src: url("/assets/Fonts/WOFF/Poppins-Light.woff") format("woff"),
    url("/assets/Fonts/TTF/Poppins-Light.ttf") format("ttf");
  font-weight: 300;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/Fonts/WOFF/Poppins-Regular.woff") format("woff"),
    url("/assets/Fonts/TTF/Poppins-Regular.ttf") format("ttf");
  font-weight: 400;
}

@font-face {
  font-family: "Poppins";
  src: url("/assets/Fonts/WOFF/Poppins-Medium.woff") format("woff"),
    url("/assets/Fonts/TTF/Poppins-Medium.ttf") format("ttf");
  font-weight: 500;
}

* {
  font-family: "Poppins", sans-serif;
  transition: all 0.2s;
}

body {
  background-color: #fafafa;
  margin: 0px;
  color: #333533;
  overflow-x: clip ;
  
}

a {
  text-decoration: none;
}

h2 {
  font-weight: 400;
}

h6 {
  margin: 0;
}

ul {
  list-style: none;
  padding: 0px;
}

h5 {
  margin-bottom: 5px;
  color: #a0a0a0;
  font-weight: 500;
  font-size: 18px;
}

/* Container */

.header,
.container {
  display: flex;
  justify-content: center;
  padding: 45px 0px;
  /* need to be fix */
}

/* Header */

.header {
  background-color: #333533;
  height: 376px;
  align-items: center;
  background: linear-gradient(
    180deg,
    rgb(80, 15, 145) 0%,
    rgb(84, 78, 84) 100%
  );
}

.header .title {
  margin: 0px 50px;
  /* transition: all 0.7s ease-in-out; */
}

@keyframes scaletitle {
  0% {
    font-size: 32px;
  }
}
@keyframes scaleposition {
  0% {
    font-size: 10px;
  }
}

.header .title h1 {
  font-size: 56px;
  margin: 0px;
  line-height: 1;
  animation: scaletitle 0.6s ease-in-out;
  /* transition: all 0.7s ease-in-out; */
}

.header .position {
  color: #fafafa;
  animation: scaleposition 0.6s ease-in-out;
  transition: all 0.7s ease-in-out;
  /* &:hover {
    color: #ffd100;
  } */
  font-size: 32px;
  margin: 40px 0px;
}

.header .position i {
  transition: none;
}

.header .position:hover {
  color: #ffd100;
}

@keyframes float {
  0% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
  50% {
    box-shadow: 0 25px 15px 0px rgba(0, 0, 0, 0.2);
    transform: translatey(-20px);
  }
  100% {
    box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
    transform: translatey(0px);
  }
}

.header .position i,
.header .title h1,
.button,
.button i {
  color: #ffd100;
}

.button {
  border: 1px solid #ffd100;
  border-radius: 4px;
  padding: 8px 24px;
}

.button:hover,
.button:hover i {
  background-color: #ffd100;
  color: #333533;
}

.button i {
  margin-right: 6px;
}

.lang i {
  color: #fafafa;
}

.lang {
  color: #fafafa;
  border: 1px solid #fafafa;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
  opacity: 0.7;
  align-self: flex-start;
}

.lang:hover {
  opacity: 1;
}

.lang i {
  margin-right: 4px;
}

.header img {
  width: 290px;
  height: 290px;
  border: 5px #ffd100 solid;
  border-radius: 50%;
  box-shadow: 0 5px 15px 0px rgba(0, 0, 0, 0.6);
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;
}

/* Nav Bar */

.mobile-nav {
  display: none;
}

.container nav {
  width: 250px;
  font-size: 24px;
}

.container nav ul li {
  cursor: pointer;
}

.container nav ul li .marker {
  width: 48px;
  height: 48px;
  line-height: 48px;
  border: 1px solid #333533;
  border-radius: 50%;
  display: inline-block;
  text-align: center;
  vertical-align: middle;
  margin-right: 12px;
}

.container nav ul li.active .marker,
.container nav ul li:hover .marker {
  background-color: #333533;
  color: #ffd100;
  font-size: 22px;
}

.container nav li.active {
  font-weight: 500;
}

.container nav ul li:not(:last-child)::after {
  content: "";
  display: block;
  height: 48px;
  border-left: 1px dashed #333533;
  margin: 16px 0px 16px 25px;
}

/* Section */

.sections {
  width: 700px;
  border-left: 1px solid #333533;
  padding-left: 50px;
}

.width-section {
  width: 880px;
}

.contact {
  display: flex;
}

.contact div {
  width: 50%;
}

.contact p {
  margin-top: 0;
}

.contact p i {
  margin-left: 10px;
  font-size: 16px;
  color: #a0a0a0;
  cursor: pointer;
}

.contact p i:hover {
  color: #333533;
}

.socials li {
  display: inline-block;
  margin-right: 32px;
}

.socials li a span {
  display: inline-block;
  width: 56px;
  height: 56px;
}

.socials li span.linkedin {
  background-image: url("../Icons/Social/linkedin.png");
}

.socials li:hover span.linkedin {
  background-image: url("../Icons/Social/linkedin-hover.png");
}

.socials li span.twitter {
  background-image: url("../Icons/Social/twitter.png");
}

.socials li:hover span.twitter {
  background-image: url("../Icons/Social/twitter-hover.png");
}

.socials li span.stackoverflow {
  background-image: url("../Icons/Social/stackoverflow.png");
}

.socials li:hover span.stackoverflow {
  background-image: url("../Icons/Social/stackoverflow-hover.png");
}

.socials li span.whatsapp {
  background-image: url("../Icons/Social/whatsapp.png");
}

.socials li:hover span.whatsapp {
  background-image: url("../Icons/Social/whatsapp-hover.png");
}

.socials li span.telegram {
  background-image: url("../Icons/Social/telegram.png");
}

.socials li:hover span.telegram {
  background-image: url("../Icons/Social/telegram-hover.png");
}

.socials li span.github {
  background-image: url("../Icons/Social/github.png");
}

.socials li:hover span.github {
  background-image: url("../Icons/Social/github-hover.png");
}

.Skills li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #333533;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 10px 24px;
}

/* .Skills li span {
  display: flex;
  align-items: center;
} */

.Skills li img {
  vertical-align: middle;
  margin-right: 7px;
}

.Skills .title {
  font-weight: 500;
}

.Skills li i {
  padding: 10px 12px;
  border-left: 1px solid #a0a0a0;
}

.Skills .tech {
  width: 150px;
  height: 36px;
}

.other-skills li {
  border: 1px solid #a0a0a0;
  border-radius: 24px;
  display: inline-block;
  padding: 8px 29px;
  margin: 0px 16px 18px 0px;
}

.project {
  border: 1px solid #a0a0a0;
  border-radius: 8px;
  padding: 11px;
  width: 26%;
  display: flex;
  flex-direction: column;
}

.project .title {
  font-weight: 500;
  font-size: 20px;
  margin-top: 12px;
}

.project .description {
  font-size: 13px;
}

.width-section .tech {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}

.width-section .tech ul li {
  display: inline-block;
}

.width-section .tech ul li img {
  width: 25px;
}

.projects {
  display: flex;
  flex-wrap: wrap;
}

.project {
  margin-bottom: 36px;
}

.project:not(:last-child) {
  margin-right: 20px;
}

.project .buttons {
  display: flex;
}

.project .buttons a {
  width: 50%;
  color: #333533;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  border: 1px solid transparent;
}

.project .buttons a:last-child,
.project .buttons a:hover:first-child {
  border: 1px solid #333533;
}

.project .buttons a:last-child {
  margin-left: 4px;
}

.project .buttons a:hover:last-child {
  color: #fafafa;
  background-color: #333533;
}

.project .buttons a i {
  margin-right: 5px;
}