.body-custom {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: min-content;
  overflow: visible;
  gap: 20px;
  padding: 30px 0px;
  max-width: 1140px;
  margin: auto;

  & .perfil {
    border: 1px solid;
    height: min-content;
    width: min-content;
    overflow: hidden;
    position: sticky;
    top: 20px;
    padding: 30px;
    background-color: var(--white);
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 30px;

    & img {
      width: 270px;
      height: 270px;
      object-fit: cover;
      border-radius: 15px;
    }

    & h2 {
      font-size: 25px;
      font-weight: 800;
      text-transform: uppercase;
      text-align: center;
    }

    & p {
      font-size: 15px;
      font-weight: 500;
      text-transform: uppercase;
      text-align: center;
    }

    & .sociais {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      background-color: var(--black);
      padding: 10px;
      border-radius: 15px;
      gap: 15px;

      & a {
        color: var(--white);
        font-size: 19px;
        transition: 0.4s ease-in-out all;
      }

      & a:hover {
        color: var(--yellow);
      }
    }
  }
  & .developer-data {
    height: min-content;
    width: min-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    flex: 1 0 0px;
    padding: 0 30px;

    & .title-custom {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: flex-start;
      flex-direction: column;

      & h1,
      & h2 {
        color: var(--white);
        text-transform: uppercase;
        font-weight: 900;
        position: relative;
        display: block;
        padding-bottom: 10px;
        text-align: left;
        word-wrap: break-word;

        & .top-title {
          color: var(--white);
          font-size: 60px;
          position: relative;
          display: block;
          padding-bottom: 10px;
        }

        & .bottom-title {
          color: var(--black-grey);
          font-size: 40px;
          position: relative;
          display: block;
        }
      }

      & p {
        color: var(--white-silver);
        font-size: 15px;
        font-weight: 500;
      }
    }

    & .works-info {
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 50px 20px;
      gap: 40px;
      width: 100%;

      & .box {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;

        & p:nth-child(1) {
          font-size: 60px;
          font-weight: 700;
          color: var(--white);
        }

        & p:nth-child(2),
        & p:nth-child(3) {
          color: var(--white-silver);
          font-weight: 500;
          font-size: 18px;
          text-transform: uppercase;
        }
      }
    }

    & .projects {
      position: relative;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      flex-direction: column;
      width: 100%;
      gap: 30px;
      padding: 30px;

      & .projects-list {
        position: relative;
        display: block;
        width: 100%;

        & a {
          position: relative;
          display: flex;
          width: 100%;
          align-items: center;
          justify-content: flex-start;
          flex-direction: row;
          border-radius: 15px;
          transition: 0.4s ease-in-out all;
          gap: 20px;

          & img {
            width: 100px;
            height: 100px;
            overflow: hidden;
            position: relative;
            display: block;
            object-fit: cover;
            border-radius: 15px;
            transition: width 0.1s ease-in-out;
            will-change: transform;
            flex-shrink: 0;
          }

          & .text {
            position: relative;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            flex-direction: column;
            gap: 10px;
            flex: 1;

            & h3 {
              font-size: 19px;
              text-transform: uppercase;
              color: var(--white);
              font-weight: 800;
              word-break: break-word;
            }

            & p {
              font-size: 14px;
              text-transform: uppercase;
              color: var(--white-silver);
              font-weight: 500;
            }
          }
        }

        & a:hover {
          background-color: rgba(255, 255, 255, 0.1);

          & img {
            transform: scale(1.01);
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          }
        }
      }
    }

    & .skills {
      position: relative;
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      flex-direction: column;
      gap: 25px;
      width: 100%;
      color: var(--white);
      padding: 30px;

      & .inf-progress {
        position: relative;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        gap: 10px;

        & h4 {
          font-size: 14px;
          text-transform: uppercase;
          font-weight: 600;
          position: relative;
          display: block;
          word-wrap: break-word;
        }

        & .progress-bar-skill {
          height: 10px;
          background-color: var(--white-silver);
          border-radius: 15px;
          flex: 1;
          position: relative;
          display: block;

          & svg {
            position: absolute;
            top: 50%;
            left: var(--w);
            display: block;
            font-size: 20px;
            transform: translateY(-50%) translateX(-100%);
            border-radius: 50%;
            width: 20px;
            height: 20px;
            padding: 7px;
            background-color: var(--i);
            color: var(--x);
            z-index: 100;
            object-fit: cover;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
          }
        }

        & .progress-bar-skill::after {
          content: "";
          position: absolute;
          width: 0%;
          height: 100%;
          background-color: var(--i);
          border-radius: 15px;
          transition: 2s ease-in-out all;
          transition-delay: var(--t);
        }

        & .progress-bar-skill.active-skills::after {
          width: var(--w);
        }
      }
    }

    & .list-urls{
      padding: 30px;
      position: relative;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      width: 100%;

      & ul{
        position: relative;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;
        width: 100%;
        gap: 10px;

        & li a{
          position: relative;
          display: flex;
          justify-content: center;
          align-items: center;
          gap: 10px;
          color: var(--yellow);
          font-size: 12px;
          font-weight: 600;
          text-transform: uppercase;
          transition: 0.4s ease-in-out all;

          & svg{
            color: var(--white-silver);
            font-size: 19px;
          }
        }

        & li a:hover{
          color: var(--red);
        }
      }
    }
  }
}

.active-scroll {
  left: -30px;
  opacity: 0;
  transition: 0.4s all;
}

@media only screen and (max-width: 980px) {
  .body-custom {
    flex-wrap: wrap;
    align-items: center;

    & .perfil {
      position: relative;
      top: 0px !important;
    }

    & .developer-data {
      & .title-custom {
        text-align: center !important;
        width: 100% !important;
        & h1,
        & h2 {
          width: 100% !important;
          text-align: center !important;
          & .top-title {
            font-size: 50px;
          }

          & .bottom-title {
            font-size: 30px;
          }
        }
      }
    }

    & .works-info {
      flex-wrap: wrap;
      justify-content: center !important;
    }
  }
}

@media only screen and (max-width: 700px) {
  .body-custom {
    & .developer-data {
      & .title-custom {
        & h1,
        h2 {
          & .top-title {
            font-size: 40px;
          }

          & .bottom-title {
            font-size: 30px;
          }
        }
      }
    }
  }
}

@media only screen and (max-width: 500px) {
  .body-custom {
    & .developer-data {
      & .title-custom {
        & h1 {
          word-break: break-word;
          & .top-title {
            font-size: 40px;
          }

          & .bottom-title {
            font-size: 30px;
          }
        }
      }
    }
  }
}