#main__skills {
  background-color: var(--color-yellow);
}

.skill__container {
  margin-bottom: 3rem;
}

.skill__box {
  display: flex;
  margin: 20px 0;
  color: var(--color-light-white);
  background-color: var(--color-light-grey);
}

.skill__title {
  color: var(--color-white);
}

.skill__container i {
  color: var(--color-dark-pink);
}

.skill__container>p>span {
  color: var(--color-dark-pink);
  font-weight: var(--weight-bold);
}

.skill__left {
  flex-basis: 60%;
  background-color: var(--color-dark-grey);
  padding: 20px 40px;
}

.skill {
  margin: 2rem 0;
}

.skill__description {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 0;
}

.skill__bar {
  width: 100%;
  height: 20px;
  border-radius: 12px;
  background-color: var(--color-grey);
}

.skill__value {
  width: 0%;
  height: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg,
      var(--color-orange),
      var(--color-pink) 70%,
      var(--color-dark-pink));
  transition: all 1.5s ease-in;
}

.skill__right {
  flex-basis: 40%;
}

.skill__right h3 {
  color: var(--color-white);
}

.tools {
  background-color: var(--color-grey);
}

.tools,
.etc {
  padding: 20px;
}

@media screen and (max-width: 768px) {
  .skill__container>p {
    padding: 5px;
  }
  .skill__box {
    flex-direction: column;
    margin: 15px;
  }
}