* {
  box-sizing: border-box;
}
html{
  font-size: 20px;

}
html,
body {
  background-color: #000000;
  color: #cfcfcf;
  margin: 0;
  font-family: lato;
  /*background-image: linear-gradient(#000103 30%, #000103, #212121, #212121, #000103);*/
  overflow-x: hidden;
  scroll-behavior: smooth;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}
header {
  background-color: #000103;
  height: 90vh;
  margin-bottom: 10vh;
  width: 100vw;
  gap: 10px;
  padding: 25px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}
header .slider {
  margin-bottom: -300px;
}
header .slider img {
  z-index: 1;
  filter: blur(5px);
}
header .slider::after {
  display: block;
  position: absolute;
  content: " ";
  height: 100px;
  width: 100%;
  background-image: linear-gradient(transparent, #000103 50%, #000103);
  margin-top: -100px;
  z-index: 2;
}
header .profile {
  z-index: 200;
}
header .profile img {
  border-radius: 50%;
  width: 300px;
  height: 300px;
  border: 4px solid #363636;
}
header h1 {
  font-family: lato;
  font-weight: 400;
  background-image: linear-gradient(#303f46, #303f46);
  background-size: 90% 2px;
  background-repeat: no-repeat;
  background-position: center bottom 5px;
  padding: 0 40px 10px 40px;
  z-index: 200;
}
header h1 em {
  font-size: smaller;
  color: #455a64;
}
header h1 em::after {
  content: ".";
  color: #707070;
}
header h1 + h2 {
  border-top: 1px solid #303f46;
  border-bottom: 1px solid #303f46;
  z-index: 200;
}
header h2 {
  margin: 0;
  padding: 5px;
  font-size: 1.2rem;
  font-family: lato;
  font-weight: 400;
}
nav {
  display: flex;
  justify-content: center;
  gap: 10px;
  z-index: 200;
}
nav a {
  color: inherit;
  font-size: 0.8rem;
  text-decoration: none;
  border-bottom: 1px solid #303f46;
  padding: 0 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
nav a::first-letter {
  font-size: 1.1rem;
  color: orange;
}
nav a:hover {
  font-size: 1.1rem;
  transform: scale(1.1);
  transition: 0.5s;
  color: orange;
}
body main {
  max-width: 1080px;
  margin: 0 auto;
  padding: 15px;
  padding-top: 25px;
  background-color: transparent; /* let body’s black background show */
}
body main h2 {
  background-image: linear-gradient(90deg, #000000, transparent);
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 400px 2px;
  text-indent: 10px;
  font-weight: 400;
  padding-bottom: 5px;
  text-transform: capitalize;
  padding-top: 50px;
  margin-top: 50px;
  border-bottom: 2px solid #707070; /* gray line */
  margin-bottom: 10px;              /* spacing under the line */
  padding-bottom: 5px;              /* space between text and line */
  color: #ffffff;      
}
body main h2 + p {      
  margin-top: 5px;
  margin-left: 5px;
  text-align: justify;
  color: #ffffff; 
}
body main h2::first-letter {
  color: orange;       /* white text */
}
footer {
  display: flex;
  flex-direction: column;
  align-content: center;
  align-items: center;
  justify-content: center;
  justify-items: center;
  margin: 0 auto;
  padding: 15px;
  padding-top: 25px;
  background-color: #000103;
  color: #455b66;
}
footer .main-footer {
  display: flex;
  padding-bottom: 50px;
  margin-bottom: 10px;
}
footer .footer-section {
  min-width: 300px;
  flex-basis: 300px;
  flex-shrink: 0;
}
footer .footer-section img.foot {
  max-width: 128px;
  max-height: 128px;
  border-radius: 50%;
  margin-top: 10px;
}
footer a {
  color: inherit;
  text-decoration: none;
  display: block;
  margin: 5px 10px;
}
footer p {
  margin: 0;
}
footer .social-network {
  min-height: 30px;
  background-repeat: no-repeat;
  padding-inline-start: 35px;
  background-size: 26px 26px;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="%23ffcc00" d="M21,10V6h-3V3h-4v3h-4V3H6v3H3v4h3v4H3v4h3v3h4v-3h4v3h4v-3h3v-4h-3v-4H21z M14,14h-4v-4h4V14z"></path></svg>');
}
footer .social-network.linked-in {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="%23ffcc00" d="M21,3H3v18h18V3z M9,17H6.477v-7H9V17z M7.694,8.717c-0.771,0-1.286-0.514-1.286-1.2s0.514-1.2,1.371-1.2 c0.771,0,1.286,0.514,1.286,1.2S8.551,8.717,7.694,8.717z M18,17h-2.442v-3.826c0-1.058-0.651-1.302-0.895-1.302 s-1.058,0.163-1.058,1.302c0,0.163,0,3.826,0,3.826h-2.523v-7h2.523v0.977C13.93,10.407,14.581,10,15.802,10 C17.023,10,18,10.977,18,13.174V17z"></path></svg>');
}
footer .social-network.twitter {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="%23ffcc00" d="M21,3H3v18h18V3z M17.05,9.514c0,0.086,0,0.171,0,0.343c0,3.257-2.486,7.029-7.029,7.029c-1.371,0-2.657-0.429-3.771-1.114 c0.171,0,0.429,0,0.6,0c1.114,0,2.229-0.429,3.086-1.029c-1.114,0-1.971-0.771-2.314-1.714c0.171,0,0.343,0.086,0.429,0.086 c0.257,0,0.429,0,0.686-0.086c-1.114-0.257-1.971-1.2-1.971-2.4c0.343,0.171,0.686,0.257,1.114,0.343 c-0.686-0.6-1.114-1.286-1.114-2.143c0-0.429,0.086-0.857,0.343-1.2c1.2,1.457,3,2.486,5.057,2.571c0-0.171-0.086-0.343-0.086-0.6 c0-1.371,1.114-2.486,2.486-2.486c0.686,0,1.371,0.257,1.8,0.771c0.6-0.086,1.114-0.343,1.543-0.6 c-0.171,0.6-0.6,1.029-1.114,1.371c0.514-0.086,0.943-0.171,1.457-0.429C17.907,8.743,17.479,9.171,17.05,9.514z"></path></svg>');
}
footer .social-network.instagram {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="%23ffcc00" d="M3 3L3 21L21 21L21 3L3 3 z M18 5C18.552 5 19 5.448 19 6C19 6.552 18.552 7 18 7C17.448 7 17 6.552 17 6C17 5.448 17.448 5 18 5 z M12 7C14.761 7 17 9.239 17 12C17 14.761 14.761 17 12 17C9.239 17 7 14.761 7 12C7 9.239 9.239 7 12 7 z M12 9 A 3 3 0 0 0 9 12 A 3 3 0 0 0 12 15 A 3 3 0 0 0 15 12 A 3 3 0 0 0 12 9 z"></path></svg>');
}
footer .social-network.github {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.02569437026978 2.03078460693359 19.9743056297302 19.5692157745361"><path fill="%23ffcc00" d="M10.9,2.1c-4.6,0.5-8.3,4.2-8.8,8.7c-0.6,5,2.5,9.3,6.9,10.7v-2.3c0,0-0.4,0.1-0.9,0.1c-1.4,0-2-1.2-2.1-1.9 c-0.1-0.4-0.3-0.7-0.6-1C5.1,16.3,5,16.3,5,16.2C5,16,5.3,16,5.4,16c0.6,0,1.1,0.7,1.3,1c0.5,0.8,1.1,1,1.4,1c0.4,0,0.7-0.1,0.9-0.2 c0.1-0.7,0.4-1.4,1-1.8c-2.3-0.5-4-1.8-4-4c0-1.1,0.5-2.2,1.2-3C7.1,8.8,7,8.3,7,7.6C7,7.2,7,6.6,7.3,6c0,0,1.4,0,2.8,1.3 C10.6,7.1,11.3,7,12,7s1.4,0.1,2,0.3C15.3,6,16.8,6,16.8,6C17,6.6,17,7.2,17,7.6c0,0.8-0.1,1.2-0.2,1.4c0.7,0.8,1.2,1.8,1.2,3 c0,2.2-1.7,3.5-4,4c0.6,0.5,1,1.4,1,2.3v3.3c4.1-1.3,7-5.1,7-9.5C22,6.1,16.9,1.4,10.9,2.1z"></path></svg>');
}
footer .social-network.facebook {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 3 18 18"><path fill="%23ffcc00"  d="M21,3H3v18h9.621v-6.961h-2.343v-2.725h2.343V9.309c0-2.324,1.421-3.591,3.495-3.591c0.699-0.002,1.397,0.034,2.092,0.105 v2.43h-1.428c-1.13,0-1.35,0.534-1.35,1.322v1.735h2.7l-0.351,2.725h-2.365V21H21V3z"></path></svg>');
}
footer .social-network.telegram {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.001953125 3.12109375 19.962890625 17.875"><path fill="%23ffcc00" d="M19.976562 3.1210938L19.611328 3.2695312C19.611328 3.2695312 6.6375504 8.5740484 2.6132812 10.267578L2.0019531 10.525391L2.0019531 12.779297L6.9472656 14.755859L8.6796875 19.996094L10.251953 20.005859L12.955078 17.720703L16.355469 20.996094L18.808594 20.996094L21.964844 3.875L19.976562 3.1210938 z M19.646484 5.4179688L17.146484 18.980469L13.044922 15.029297L10.224609 17.410156L11 14.375L17.28125 8L17.082031 7.7988281C17.082031 7.7988281 10.706702 11.473998 8.0019531 13.023438L4.5371094 11.638672C9.0770415 9.7455758 18.697943 5.8058761 19.646484 5.4179688 z"></path></svg>');
}
footer .social-network.email {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2 2 20 20"><path fill="%23ffcc00" d="M12 2C6.4886661 2 2 6.4886661 2 12C2 17.511334 6.4886661 22 12 22L17 22L17 20L12 20C7.5693339 20 4 16.430666 4 12C4 7.5693339 7.5693339 4 12 4C16.430666 4 20 7.5693339 20 12L20 13.5C20 14.340812 19.340812 15 18.5 15C17.659188 15 17 14.340812 17 13.5L17 12C17 9.2504209 14.749579 7 12 7C9.2504209 7 7 9.2504209 7 12C7 14.749579 9.2504209 17 12 17C13.413556 17 14.687859 16.398875 15.599609 15.447266C16.230695 16.380863 17.297708 17 18.5 17C20.421188 17 22 15.421188 22 13.5L22 12C22 6.4886661 17.511334 2 12 2 z M12 9C13.668699 9 15 10.331301 15 12C15 13.668699 13.668699 15 12 15C10.331301 15 9 13.668699 9 12C9 10.331301 10.331301 9 12 9 z"></path></svg>');
}
footer .social-network.phone {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 2 18 20"><path fill="%23ffcc00" d="M3 2L3 18L7 18L7 15L5 15L5 4L15 4L15 2L3 2 z M9 6L9 22L21 22L21 6L9 6 z M11 8L19 8L19 19L11 19L11 8 z"></path></svg>');
}
footer .first-sec {
  padding-top: 10px;
}
footer .sub-footer {
  width: 100%;
  border-top: 1px solid #28353b;
  color: #28353b;
  text-align: center;
  display: flex;
  justify-content: center;
  font-size: 0.8rem;
  background-color: #212121;
  padding: 5px;
}
footer .sub-footer-2 {
  display: flex;
  justify-content: center;
  padding: 15px;
}
footer .tech {
  background-color: transparent;
  width: 16px;
  height: 16px;
  margin: 0 2px;
  background-repeat: no-repeat;
  opacity: 0.5;
  background-position: center center;
  background-size: contain;
}
footer .tech:hover {
  opacity: 1;
  transform: rotateY(180deg) scale(1.2);
  transition: 1s;
  transform-origin: center center;
}
footer .tech.resume {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="4 2 16 20"><path fill="%23263238" d="M20,2H4v20h16V2z M9.5,5C10.328,5,11,5.672,11,6.5C11,7.328,10.328,8,9.5,8S8,7.328,8,6.5C8,5.672,8.672,5,9.5,5z M7,10.25 C7,9.419,8.666,9,9.5,9S12,9.419,12,10.25V11H7V10.25z M17,19H7v-2h10V19z M17,15H7v-2h10V15z M17,7h-3V5h3V7z M17,11h-3V9h3V11z"></path></svg>');
}
footer .tech.html-5 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.99900007247925 2 18.0000004768372 20"><path  fill="%23263238" d="M20.999,2h-18l2,18l7,2l7-2L20.999,2z M16.825,8.083H9.169l0.182,2.179h7.29l-0.547,6.439l-4.093,1.302l-0.04-0.013L7.914,16.7l-0.221-2.624h1.982l0.087,1.019l2.261,0.498l2.221-0.499l0.236-2.755H7.544L7.007,6h9.996L16.825,8.083z"></path></svg>');
}
footer .tech.css-3 {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="3 2 18 20"><path fill="%23263238" d="M3 2L5 20L11.992188 22L19 20L21 2Z M16.726563 10.347656L16.34375 16.589844L12.027344 18L7.710938 16.589844L7.546875 13.605469L9.734375 13.605469L9.789063 14.960938L12.027344 15.722656L14.269531 14.960938L14.433594 12.519531L9.625 12.519531L9.515625 10.347656L14.539063 10.347656L14.703125 8.175781L7.164063 8.175781L7 6.007813L17 6.007813Z"></path></svg>');
}
footer .tech.developer {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="2.5859375 1 18.828125 22"><path fill="%23263238" d="M5 1L5 5.7578125L6.7578125 4L17.242188 4L19 5.7578125L19 1L5 1 z M7.2929688 6.2929688L2.5859375 11L7.2929688 15.707031L8.7070312 14.292969L5.4140625 11L8.7070312 7.7070312L7.2929688 6.2929688 z M16.707031 6.2929688L15.292969 7.7070312L18.585938 11L15.292969 14.292969L16.707031 15.707031L21.414062 11L16.707031 6.2929688 z M5 16.242188L5 23L19 23L19 16.242188L17.242188 18L6.7578125 18L5 16.242188 z M12 18.875C12.622 18.875 13.125 19.378 13.125 20C13.125 20.622 12.622 21.125 12 21.125C11.378 21.125 10.875 20.622 10.875 20C10.875 19.378 11.378 18.875 12 18.875 z"></path></svg>');
}
footer h2 a {
  border-bottom: 1px solid #363636;
  margin: 0;
  margin-bottom: 5px;
}
footer h3 {
  font-size: 1rem;
  margin: 5px;
  border-bottom: 1px solid #363636;
  margin-bottom: 15px;
  padding: 5px;
}
footer .tags a {
  margin: 0 5px 0 0;
  font-size: 0.7rem;
  display: inline-block;
}
footer .tags a::first-letter {
  color: currentColor ;
}
footer .useful-link {
  background-repeat: no-repeat;
  padding-inline-start: 30px;
  background-size: 24px 24px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2 2 26 26'%3E%3Cpath fill='%23263238' d='M22 2C20.4 2 18.9 2.6 17.8 3.8L15.8 5.8C14.6 6.9 14 8.4 14 10c0 1.3.4 2.5 1.1 3.5l-1.6 1.6C12.5 14.4 11.3 14 10 14c-1.6 0-3.1.6-4.2 1.8L3.8 17.8C2.6 18.9 2 20.4 2 22c0 1.6.6 3.1 1.8 4.2C5 27.4 6.4 28 8 28c1.6 0 3.1-.6 4.2-1.8l2-2c1.1-1.1 1.8-2.6 1.8-4.2 0-.6-.1-1.1-.2-1.6l-1.8 1.8c-.1 1-.5 2-1.2 2.7l-2 2c-1.6 1.6-4.1 1.6-5.7 0-1.6-1.6-1.6-4.1 0-5.7l2-2c.8-.8 1.8-1.2 2.8-1.2.7 0 1.4.2 2 .6L9.3 19.3a1 1 0 1 0 1.4 1.4l10-10a1 1 0 0 0-1.4-1.4l-2.7 2.7c-.9-1.5-.7-3.5.6-4.8l2-2c.8-.8 1.8-1.2 2.8-1.2s2 .4 2.8 1.2c1.6 1.6 1.6 4.1 0 5.7L22.8 12.8c-.7.7-1.6 1.1-2.6 1.2l-1.8 1.8c.5.1 1 .2 1.6.2 1.6 0 3.1-.6 4.2-1.8l2-2c1.1-1.1 1.8-2.6 1.8-4.2 0-1.6-.6-3.1-1.8-4.2C25.1 2.6 23.6 2 22 2z'/%3E%3C/svg%3E");
}

.res-edu-item {
  margin-bottom: 20px;
  margin-left: 15px;
}
.res-edu-item svg {
  width: 16px;
  height: 16px;
}
.res-edu-item svg path {
  fill: #707070;
}
.res-edu-item h3 {
  color: #f58900;
}
.skil-control {
  margin-bottom: 20px;
  margin-left: 15px;
}
.skil-control svg {
  width: 16px;
  height: 16px;
}
.skil-control svg path {
  fill: #707070;
}
.skil-control h3 {
  color: #f58900;
}
.skil-control h4 {
  color: #a0a0a0;
  flex-basis: 70px;
  white-space: nowrap;
  display: table-cell;
  padding: 5px;
}
.skil-control .skill-list {
  margin: 5px 10px;
  overflow-x: auto;
}
.skil-control .skill-item {
  gap: 10px;
  align-content: center;
  flex-wrap: wrap;
  display: flex;
  display: table-row;
}
.skil-control .skill-rate {
  min-width: 250px;
  max-width: 250px;
  background-color: #000000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.skil-control .skill-rate span {
  background-color: #43a047;
  padding: 2px  5px;
  color: #000000;
  white-space: nowrap;
  font-size: small;
}
article {
  margin-bottom: 20px;
  margin-left: 15px;
}
article h3 {
  color: #f58900;
}
article h3:has(+ol) {
  margin-top: 5px;
}
article h3:has(+ol) + ol {
  margin-top: 5px;
}
article h3:has(+ul) {
  margin-top: 5px;
}
article h3:has(+ul) + ul {
  margin-top: 5px;
}