/*-------------------MEDIA-QUERIES-PRO----------------------------------------------*/

@media (max-width: 371px) {

  .hero{
    margin-top: 90px;
  }
}

@media  (max-width: 420px) {

  .bio {
    width: 18.3rem;
    text-align: center;
  }

  .project-container {
    width: 17.875rem;
  }

}

@media screen and (max-width: 768px) {

  .main-header {
    font-size: 1.5rem;
  }

  nav {
    padding: 1.5rem 1rem;
  }

  nav 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;
    z-index:9999;
  }

   nav ul li {
    margin: 8px;
  }

  .burger-menu {
     display: block;
   }

   nav ul.show {
     transform: translateX(0);
   }

   .flags_item {
     width: 1.5rem;
   }


   /*HERO SECTION*/

   .hero {
    flex-direction: column;
    margin-top: 90px;
    gap: 0;
  }

  .hero img {
    width: 18rem;
  }

  .bio {
    margin-top: 2rem;
    width: 21.5rem;
  }

  /*MORE ABOUT SECTION*/

  .more-about {
   margin-top: 2rem;
   padding: 1rem 3.5rem;
 }

 /*SKILLS SECTION*/

 .icon {
     width: 20%;
     height: 20%;
   }

 /*PROJECTS SECTION*/

   .projects {
     padding: 1rem;
     margin: 0rem 2rem;
   }


  .projects-container {
    flex-direction: column;
  }

  .project-pic{
    width: 75%;
    height: 75%;
  }

  /*games SECTION*/

  .raleway-paragraph{
    margin: 1rem 0.25rem;
    font-size: 1rem;
  }

  .games-pic{
    width: 75%;
    height: 75%;
   }

   .up-arrow {
    width: 2rem;
    height: 2rem;
  }

}