@media (max-width : 648px) {
    .navbar {
      padding: 10px;
      
    }
    .navbar .navlist {
      gap: 10px;
      flex-wrap: wrap;
      margin-right: auto;
      justify-content: center;
    }
    .navbar .navlist a{
      font-size: 12px;
    }

    .hero {
      flex-direction: column-reverse;
      height: auto;
      gap: 20px;
      text-align: center;
      padding: 100px 20px;
    }
    .lefthero, .righthero {
      width: 100%;
      padding: 0;
    }
    .righthero {
      display: flex;
      justify-content: center;
      margin-top: 30px;
    }
    .righthero img {
      filter: drop-shadow(0px 5px 20px rgba(152, 152, 152, 0.8));
    }
    h1 {
      font-size: 2rem;
  }
  
  .about {
    padding: 25px;
    }
    .about h2, .about p {
      flex-wrap: wrap;
      max-width: fit-content;
    }
    .skills-container {
      margin: 25px;
      padding: 25px;
    }

    .all-skills {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
    }
    .skill-logo {
      flex: 0 0 80%;
    }
    .projects-container {
      padding: 70px 30px;
      margin: 25px;
      gap: 25px;
    }

    .projects-container h2 {
      font-size: 30px;
    }
    .all-projects {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      padding: 20px 0;
    }
    .project-layout {
      flex: 0 0 95%;
      scroll-snap-align: center;
      max-width: none;
      width: 95%;
    }
    .project-title {
      margin-bottom: 10px;
    }
    
    .contact-container {
      padding: 70px 30px;
      margin: 25px;
    }
    .contact-container h2 {
      font-size: 30px;
      
    }
    .projects-container h2:hover, .skills-container h2:hover, .about h2:hover, .highlight:hover, .righthero img:hover, .contact-container h2:hover {
    transform: none !important;
    filter: none !important;
    }
    .righthero img:hover{
      filter: drop-shadow(0px 5px 20px rgba(152, 152, 152, 0.8)) !important;
    }

    .about h2 {
      color: rgba(7, 198, 140, 0.8);
      filter: drop-shadow(0, 0, 15px, rgba(4, 101, 72, 0.8));
    }

    .skills-container h2 {
      color: rgba(174, 0, 255, 0.9);
      filter: drop-shadow(0 0 15px rgba(68, 4, 97, 0.9));
    }

    .projects-container h2 {
    color: rgba(255, 55, 5, 0.9);
    filter: drop-shadow(0, 0, 15px, rgba(125, 5, 5, 0.9));
    }
    .project-description {
      text-align: left;
      line-height: 1.6;
      font-size: 13px;
      padding: 0 10px;
    }
    .contact-container {
      filter: drop-shadow(0 0 15px white);
    } 
    .contact-layout ul li a{
     font-size: 12px;
    }
    .contact-layout ul li p{
     font-size: 12px;
    }
    .contact-layout ul{
      padding: 20px; 
    }

  }