@media screen and (max-width:575px) {
  main>header {
    width: 100%;
    height: 50px;
  }

  main>header>.Menu-Bars {
    width: 50px;
    font-size: 2rem;
  }

  .Left-side {
    height: 100%;
    width: 50px;
  }

  #Menu>nav>ul>li {
    height: 50px;
  }

  #Menu>nav>ul>li:nth-of-type(1)>button>i {
    font-size: 2rem;
  }

  #Home,
  #About,
  #Skills,
  #Contact {
    height: calc(100% - 50px);
    width: calc(100% - 50px);
  }

  .home-content>h1 {
    font-size: 1.7rem;
    font-weight: bolder;
  }

  .home-content>p:nth-of-type(1) {
    font-size: 1.3rem;
    font-weight: bolder;
  }

  .home-content>p:nth-of-type(2)>strong {
    font-size: 19px;
    font-weight: bolder;
  }

  .about-content-1>section:nth-of-type(1)>figure {
    width: 200px !important;
    height: 200px !important;
  }

  .about-content-2>section:nth-of-type(1)>section>section>* {
    font-size: 1rem;
  }

  .about-content-2>section:nth-of-type(2)>section>section>a>* {
    font-size: 1.3rem;
  }

  .skills-content>p {
    font-size: 1rem;
  }

  .pro-4>span {
    right: -300%;
  }

  .contact-content>p {
    font-size: 1rem;
  }
}


@media screen and (min-width:576px) {
  main>header {
    width: 100%;
    height: 70px;
  }

  main>header>.Menu-Bars {
    width: 70px;
    font-size: 3rem;
  }

  .Left-side {
    height: 100%;
    width: 70px;
  }

  #Menu>nav>ul>li {
    height: 70px;
  }

  #Menu>nav>ul>li:nth-of-type(1)>button>i {
    font-size: 3rem;
  }

  #Home,
  #About,
  #Skills,
  #Contact {
    height: calc(100% - 70px);
    width: calc(100% - 70px);
  }

  .home-content>h1 {
    font-size: 3rem;
    font-weight: bolder;
  }

  .home-content>p:nth-of-type(1) {
    font-size: 2rem;
    font-weight: bolder;
  }

  .home-content>p:nth-of-type(2)>strong {
    font-size: 2rem;
    font-weight: bolder;
  }

  .about-content-1>section:nth-of-type(1)>figure {
    width: 450px;
    height: 450px;
  }
}

@media screen and (min-width:768px) {
  .home-content>h1 {
    font-size: 4.3rem;
    font-weight: bolder;
  }

  .home-content>p:nth-of-type(1) {
    font-size: 2.5rem;
    font-weight: bolder;
  }

  .home-content>p:nth-of-type(2)>strong {
    font-size: 2.5rem;
    font-weight: bolder;
  }
}

@media screen and (min-width:992px) {}

@media screen and (min-width:1200px) {}

@media screen and (min-width:1400px) {}