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

  body {
    overflow-x: hidden;
  }

  .about-container {
    height: 800px;
  }

  .my-skills {
    height: 550px;
    width: 600px;
  }

  .title-skill {
    margin: 0;
  }

  .skills-list {
    gap: 50px;
  }

  .html-details,
  .css-details,
  .js-details,
  .python-details,
  .java-details,
  .php-details {
    height: 30px;
    width: 180px;
    font-size: 18px;
  }

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

  .background-bar {
    height: 14px;
    width: 180px;
  }

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

  .more-skills h4 {
    font-size: 26px;
  }

  .sides-container {
    gap: 70px;
  }

  .leftside ul li,
  .rightside ul li {
    font-size: 17px;
  }

  .my-projects {
    margin-top: 0;
  }

  footer {
    justify-content: center;
    align-items: center;
  }

  footer p{
    padding-left: 0;
  }
}