@media screen and (min-width: 480px) and (max-width: 900px) {
    /* Nav */
  
    .nav-container {
      width: 600px;
      gap: 60px;
    }
  
    .nav-container a {
      font-size: 100%;
    }
  
    /* Head */
  
    .name-chara {
      flex-direction: column;
    }
  
    .name {
      width: 60%;
      height: 60%;
      left: -90px;
      top: 80px;
      margin: 150px 10px 10px 0;
    }
  
    .head-h1-regards,
    .head-h1-name {
      font-size: 300%;
    }
  
    .head-h3 {
      font-size: 200%;
    }
  
    .head-parag {
      font-size: 170%;
      margin-bottom: 25px;
    }
  
    .resume {
      padding: 10px;
      font-size: 140%;
    }
  
    .github,
    .ig {
      height: 30px;
    }
  
    .email {
      height: 40px;
      margin-bottom: -3px;
    }
  
    .gab {
      height: 410px;
      transform: translateX(180px);
    }
  
    /* About */
  
    .about-section {
      flex-direction: column;
      align-items: center;
    }
  
    .profile-bg {
      height: 250px;
      width: 250px;
    }
  
    .gab-pfp {
      height: 250px;
    }
  
    .about-text {
      width: 100%;
      display: flex;
      flex-direction: column;
    }
  
    .about-title {
      font-size: 300%;
      margin-top: 30px;
      align-self: center;
      width: 50%;
    }
  
    .about-paragraph {
      font-size: 140%;
      text-align: center;
      align-self: center;
      width: 80%;
    }
  
    /* Projects */
  
    .projects-title {
      font-size: 300%;
      width: 100%;
      padding: 20px;
    }
  
    .projects {
      padding: 10px;
      display: flex;
      width: 100%;
      flex-direction: column;
      align-items: center;
    }
  
    .card {
      display: flex;
      flex-direction: row;
      width: 92%;
      height: 200px;
      margin-top: 30px;
      margin-bottom: 10px;
    }
  
    .card5 {
      margin-bottom: 25px;
    }
  
    .img-project {
      position: relative;
      height: 200px;
      top: -5.5px;
      border-radius: 8px 0 0 8px;
    }
  
    .card-text {
      display: flex;
      flex-direction: column;
      height: 100%;
      padding: 15px 5px 0 5px;
    }
  
    .card-text h3 {
      margin: 0;
      font-size: 200%;
    }
  
    .card-text p {
      font-size: 19px;
      height: 75px;
      margin: 5px 0;
    }

    .card-btn {
      height: max-content;
      width: max-content;
      padding: 5px 10px;
      margin-top: 10px;
      text-align: center;
    }

    .card-btn a {
      font-size: 120% ;
    }
  }