@media only screen and (max-width: 885px) {
  
  :root {
    --small-font: 0.65rem;
    --normal-font: 0.9rem;
    --medium-font: 1.225rem;
    --biggest-font: 1.7rem;
    --font-regular: 300;
    --font-semi-bold: 500;
    --header-height: 2.5rem;
   
  }
  .header {
    padding: 2.3rem 3rem;
    width: 100%;
  }
  
  .nav-list {
    display: none;
  }
  .menu-closemenu {
    display: grid;
    place-items: center;
  }
  .menu {
    display: block;
  }

  .home-container,
  .about-container {
    flex-direction: column;
    row-gap: 5rem;
    text-align: center;
  }
  .home-content,
  .home-image,
  .about-content,
  .about-image {
    width: 100%;
  }
  .social-links-container,
  .about-content {
    justify-content: center;
  }
  .skill-container {
    gap: 9rem;
  }
  .skill-content {
    width: 60%;
  }
  .skills-list {
    width: 40%;
  }
  /* footer media */
  .footer {
    display: grid;
    grid-template-areas:
      "one two "
      "three three";
  }
}

/* BREAKPOINT ----375------ */

@media only screen and (max-width: 577px) {
  :root {
    --normal-font: 0.8rem;
    --biggest-font: 1.5rem;
    --small-font: 0.5rem;
    --medium-font: 1.125rem;
    --font-regular: 300;
    --font-medium: 400;
    --font-semi-bold: 500;
    --header-height: 2rem;
  }
  body {
    overflow-x: hidden;
    /* width: 100vw; */
  }
  .grid {
    gap: 1.5rem;
  }
  section {
    padding: 3.5rem 0;
  }

  .gap-2 {
    gap: 1.25rem;
  }
  .button {
    padding: 0.8rem 1.8rem;
  }
  .header {
    padding: 1.5rem 3rem;
    width: 100%;
  }
 
  .close {
    right: 2rem;
  }
  .home-container {
    padding: 1rem;
  }
  .about-container{
    padding: 0;
  }
  .about {
    padding: 2rem;
  }

  .skill {
    padding-inline: 2rem;
  }
  .skill-container {
    gap: 4rem;
  }

  .contact-form {
    width: 100%;
    padding: 0 2rem;
  }
  .contact-group {
    grid-template-areas:
      "name "
      "email";
  }

  .footer {
    grid-template-areas:
      "one "
      "two "
      "three";
    row-gap: 1rem;
    padding: 1rem 0;
    /* width: 10rem; */
  }

  .footer-items p {
    margin-top: 1rem;
  }
}

/* bigger screen ---above--1460--- */
@media only screen and (min-width: 1460px) {
  :root {
    --normal-font: 1.2rem;
    --biggest-font: 3.25rem;
    --small-font: 1rem;
    --medium-font: 2rem;
    --header-height: 4rem;
  }

  
}

@media only screen and (min-width: 886px) {

  .about-content {
    order: 1;
  }
  .contact-form {
    width: 60%;
  }
}