@media screen and (max-width: 1100px) {
  * {
    transition: all 1s ease-in-out;
  }

  .about-container {
    margin-top: 20px;
    gap: 50px;
    flex-wrap: wrap;
  }

  .about-container img {
    height: 350px;
    width: 350px;
  }

  .my-skills {
    height: 650px;
    width: 1000px;
  }

  .title-skill {
    margin: 20px 0 20px 0;
  }

  .skills-list {
    gap: 150px;
  }

  .html-details,
  .css-details,
  .js-details,
  .python-details,
  .java-details,
  .php-details {
    width: 300px;
    font-size: 20px;
  }

  .prog-lang-name {
    gap: 7px;
  }

  .prog-lang-name img {
    height: 30px;
    width: 30px;
  }

  .background-bar {
    height: 18px;
    width: 300px;
  }

  .html-fill-bar,
  .css-fill-bar,
  .js-fill-bar,
  .py-fill-bar,
  .java-fill-bar,
  .php-fill-bar {
    height: 18px;
  }
}