/* General Styles */
:root {
  --prime-accent-color: #0d6efd;
  --sec-accent-color: #4a6072;
  --dark-icon-bg-color: #212529;
  --light-bg-color: #f8f9fa; /* #f4ecd7 */
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  padding-top: 56px; /* For fixed navbar */
}


/* Hero Section */
.hero-section {
  height: 100vh;
  background-color: var(--light-bg-color);
  display: flex;
  -itemscenterheight: auto;
}
.highlight {
  color: var(--prime-accent-color);
  overflow-wrap: normal;
    &:hover {
      transition: 0.3s;
      transform: scale(1.01) translate(-50%, -50%);
      text-shadow:
      0.5px 0.5px 0 #1d6eff, 0.5px 1px 0 #1d6eff, 0.5px 1.5px 0 #1d6eff, 0.5px 2px 0 #0d6efd,
      0.5px 2.5px 0 #1d6eff, 0.5px 3px 0 #1d6eff, 0.5px 3.5px 0 #1d6eff, 0.5px 4px 0 #0d6efd,
      0.5px 6.5px 10px black, 2.5px 6.5px 25px #1d6eff;
    }
}
img.profile-img {
  max-width: 400px;
  border-radius: 1rem;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  &:hover {
    zoom: 105%;
  }
}


/* Section Styles */
section {
  padding: 80px 0;
}
.section-title {
  text-align: center;
  margin-bottom: 50px;
  
  h2 {
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 15px;
  }
}
.underline {
  height: 4px;
  width: 70px;
  background-color: var(--prime-accent-color);
  margin: 0 auto;
}


/* Skills Section */
.skill-item {
  position: relative;
  margin-top: 10px;
  margin-bottom: 20px;
  touch-action: manipulation;
  transition: all 0.2s ease-in-out;
  height: auto;
  min-height: 120px;
  &:hover {
    transform: scale(1.02); /*v0: translateY(-5px);*/
  }
  .progress-seq {
    touch-action: manipulation;
    .progress-name {
      transition: all 0.2s ease-in-out;
    }
    &:hover{
      span {
        font-size: 1.05rem;
      }
      .progress {
        height: 15px;
      }
    }
  }
}
div.lang-icon {
  display: flex;
  position: absolute;
  right: 10px;
  top: 0;
  margin-top: 0;
  transition: all 0.3s ease-in-out;
  img {
    height: 15px;
    &:hover {
      height: 16px;
    }
  }
  i {
    &.fa-html5 { color: #ff5900; }
    &.fa-css { color: rebeccapurple; }
    &.fa-js { color: gold; }
    &.fa-java { color: #135faa; }
    &.fa-php { color: purple; }
    &.fa-markdown { color: #426eff; }
  }
  scale: 3.0;
  &:hover {
    scale: 3.5;
  }
}
span.skill-item-name {
  font-size: 1.2rem;
  font-weight: 700;
  > span {
    font-size: initial;
    font-weight: initial;
    font-style: italic;
  }
}
.progress {
  height: 15px;
  border-radius: 15px;
  transition: all 0.3s ease-in-out;
}
.progress-bar {
  background-color: var(--prime-accent-color);
}
.skill-meter {
  background-color: royalblue;
}
.interest-meter {
  background-color: turquoise/*darkcyan*/;
}
.skill-card {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  text-wrap: pretty;
  overflow: hidden;
  touch-action: manipulation;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  height: 100%;
  transition: transform 0.3s ease;
  i {
    font-size: 2rem;
    color: var(--prime-accent-color);
    margin-bottom: 15px;
  }
  &:hover, &:focus {
    transform: translateY(-5px);
  }
}


/* Project Cards */
.project-card {
  height: 100%;
  transition: transform 0.3s ease;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  &:hover {
    transform: translateY(-10px);
  }
}


/* Contact Section */
section#contact {
  min-height: 80vh;
}
.contact-info {
  i {
    font-size: 1.5rem;
    color: var(--prime-accent-color);
  }
  a {
    text-decoration: none;
    text-decoration-color: #333;
  }
}
.social-links {
  display: flex;
  gap: 15px;
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 50px;
  background-color: var(--prime-accent-color);
  color: white;
  border-radius: 1.5rem;
  font-size: 1.5rem;
  text-decoration-line: none;
  transition: all 0.3s ease;
  &:hover {
    background-color: var(--dark-icon-bg-color);
    transform: translateY(-5px);
  }
}


/* Responsive Adjustments */
@media (max-width: 768px) {
  .navbar-toggler {
    margin-right: 10px;
  }
  body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
  }
  div.lang-icon {
    position: relative;
    margin-left: 0;
    justify-content: center;
    right: auto;
    left: auto;
    margin-top: 5px;
    margin-bottom: 10px;
  }
  .hero-section {
    text-align: center;
    padding: 100px 0;
    height: auto;
  }
  .profile-img {
    margin-top: 30px;
    max-width: 200px;
  }
  .section-title h2 {
    font-size: 2rem;
  }
}