@import url("styles.css");

/* ===== SKILLS =====*/
.skills__container {
    row-gap: 2rem;
    text-align: center;
  }
  .skills__subtitle {
    margin-bottom: var(--mb-2);
  }
  .skills__text {
    margin-bottom: var(--mb-4);
    text-indent: 2rem; /* Adjust the size of the tab */
    font-size: 1rem;  /* Adjust text size */
    color: var(--text-color);  /* Use your theme's text color */
    line-height: 1.6;  /* Improve readability */
    text-align: justify; /* Align text nicely */
  }
  .skills__data {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    font-weight: var(--font-semi);
    padding: 0.5rem 1rem;
    margin-bottom: var(--mb-4);
    border-radius: 0.5rem;
    box-shadow: 0px 4px 25px rgba(14, 36, 49, 0.15);
  }
  .skills__icon {
    font-size: 2rem;
    margin-right: var(--mb-2);
    color: var(--first-color);
  }
  .skills__names {
    display: flex;
    align-items: center;
  }
  .skills__bar {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--first-color);
    height: 0.25rem;
    border-radius: 0.5rem;
    z-index: var(--z-back);
  }
  .skills__html {
    width: 75%;
  }
  .skills__css {
    width: 65%;
  }
  .skills__js {
    width: 65%;
  }
  .skills__ux {
    width: 55%;
  }
  .skills__img {
    border-radius: 0.5rem;
  }