/* Web responsive */


/* For all mobile */
@media (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
    /* header */
    .navheader-flex {
        font-size: 1.2rem;
        padding: 2.5rem;
    }
    .navheader-flex li {
        margin: 8px;
    }
    .navheader-flex ul {
        position: fixed;
        background-color: var(--bg-color);
        flex-direction: column;
        top: 86px;
        left: 10%;
        width: 80%;
        text-align: center;
        transform: translateX(120%);
        transition: transform 0.5s ease-in;
    }
    .navlink {
        color: var(--secondary-color);
        font: 700;
    }
    nav a:hover {
        color: var(--primary-color);
    }
    h1:hover {
        margin-left: 0;
    }
    a:hover {
        color: var(--primary-color);
    }

    /* upButton */
    .bottonup {
        margin-right: 5px;
        width: 30px;
        height: 30px;
    }

    /* Hamberguer */
   .menu-hamberger {
      display: block;
   }
   nav ul.show {
      transform: translateX(0);
   }

    /* aboutme */
    .moreabout {
      width: 97%;
    }
    .moreaboutContenedor h2 {
      margin-bottom: 12px;
    }
   .more-about-p {
      display: block;
      max-height: 50.5rem;
      overflow-y: auto;
    }
    .more-about-p::-webkit-scrollbar {
        display: none; 
    }
    .moreabout p {
        text-align: justify;
        line-height: 1.9; 
        margin: 0 10px 15px;
   }

   /* Skill */
   .iconskills {
      min-width: 220px;
   }
   .grid-hab {
      box-sizing: border-box;
      height: auto;
      display: flex;
      overflow-x: scroll;
      overscroll-behavior-x: contain;
      scroll-snap-type: x proximity;
      text-align: center;
      justify-content: start;
      padding: 2rem;
   }
   .grid-hab::-webkit-scrollbar {
      display: none; 
   }

   /* hero */
   .hero {
      background-image: linear-gradient(to bottom, transparent 50%, var(--primary-color)  70%, var(--primary-color)  100%), url(/imagepng/hero.jpg);
      background-size: 100%, 100rem;
      padding: 15rem 0 10rem;
   }
   .hero-grid {
      grid-template-rows: repeat(3,1fr) ;
      row-gap: 10rem;
      margin-right: 0;
   }
   .aboutme-grid {
      grid-row: 3 / 4 ;
      grid-column: 1 / span 4;
      text-align: center;
   }
   .aboutme-grid p {
      margin: 1.5rem 0;
      font-size: 1.5rem;
      padding: 0;
   }
}
@media (min-width: 320px) and (max-width: 1024px) and (orientation: landscape) {
    /* header */
    .navheader-flex {
      font-size: 1.2rem;
      padding: 2.5rem;
  }
  .navheader-flex li {
      margin: 8px;
  }
  .navheader-flex ul {
      position: fixed;
      background-color: var(--bg-color);
      flex-direction: column;
      top: 86px;
      left: 10%;
      width: 80%;
      text-align: center;
      transform: translateX(120%);
      transition: transform 0.5s ease-in;
  }
  .navlink {
      color: var(--secondary-color);
      font: 700;
  }
  nav a:hover {
      color: var(--primary-color);
  }
  h1:hover {
      margin-left: 0;
  }
  a:hover {
      color: var(--primary-color);
  }
   /* Hamberguer */
   .menu-hamberger {
      display: block;
   }
   nav ul.show {
      transform: translateX(0);
   }
   /* hero */
   .hero {
      background-image: linear-gradient(to bottom, transparent 50%, var(--primary-color)  70%, var(--primary-color)  100%), url(/imagepng/hero.jpg);
      background-size: 100%, 100rem;
      padding: 15rem 0 10rem;
   }
   .hero-grid {
      grid-template-rows: repeat(3,1fr) ;
      row-gap: 10rem;
      margin-right: 0;
   }
   .aboutme-grid {
      grid-row: 3 / 4 ;
      grid-column: 1 / span 4;
      text-align: center;
   }
   .aboutme-grid p {
      margin: 1.5rem 0;
      font-size: 1.5rem;
      padding: 0;
   }
}

/* for all tablet */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
   /* header */
   .navheader-flex {
      font-size: 1.2rem;
      padding: 2.5rem;
   }
   .navheader-flex li {
      margin: 8px;
   }
   .navheader-flex ul {
      position: fixed;
      background-color: var(--bg-color);
      flex-direction: column;
      top: 86px;
      left: 10%;
      width: 80%;
      text-align: center;
      transform: translateX(120%);
      transition: transform 0.5s ease-in;
   }
   .navlink {
      color: var(--secondary-color);
      font: 700;
   }
   nav a:hover {
      color: var(--primary-color);
   }
   h1:hover {
      margin-left: 0;
   }
   a:hover {
      color: var(--primary-color);
   }
   /* Hamberguer */
   .menu-hamberger {
      display: block;
   }
   nav ul.show {
      transform: translateX(0);
   }
/* hero */
   .hero {
      background-image: linear-gradient(to bottom, transparent 50%, var(--primary-color)  70%, var(--primary-color)  100%), url(/imagepng/hero.jpg);
      background-size: 100%, 100rem;
      padding: 15rem 0 10rem;
   }
   .hero-grid {
      grid-template-rows: repeat(3,1fr) ;
      row-gap: 10rem;
      margin-right: 0;
   }
   .aboutme-grid {
      grid-row: 3 / 4 ;
      grid-column: 1 / span 4;
      text-align: center;
   }
   .aboutme-grid p {
      margin: 1.5rem 0;
      font-size: 1.5rem;
      padding: 0;
   }
}
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
   /* header */
   .navheader-flex {
      font-size: 1.2rem;
      padding: 2.5rem;
   }
   .navheader-flex li {
      margin: 8px;
   }
   .navheader-flex ul {
      position: fixed;
      background-color: var(--bg-color);
      flex-direction: column;
      top: 86px;
      left: 10%;
      width: 80%;
      text-align: center;
      transform: translateX(120%);
      transition: transform 0.5s ease-in;
   }
   .navlink {
      color: var(--secondary-color);
      font: 700;
   }
   nav a:hover {
      color: var(--primary-color);
   }
   h1:hover {
      margin-left: 0;
   }
   a:hover {
      color: var(--primary-color);
   }
   /* Hamberguer */
   .menu-hamberger {
      display: block;
   }
   nav ul.show {
      transform: translateX(0);
   }
   .hero-grid {
      margin-right: auto;
    }
}

@media (min-width: 1921px) {
   .container {
     max-width: 1600px;
     margin: 0 auto; 
   }
   .hero {
      background-size: cover, 260rem;
      background-position: center, left;
      padding: 20rem 0;
  }
  .hero-grid {
      grid-template-columns: repeat(3, 1fr);
      margin-right: 50rem;
  }
}