@media only  screen and (max-width: 1700px) {
  .message h2 {
    font-size: 22rem;
  }
}

@media only screen and (max-width: 1440px) {
    nav {
        gap: 50rem;
    }

    .nav-menu.open {
      top: 0;
      opacity: 1;
      padding: 1rem 26rem 25rem 5rem;
    }

    #about-header h1 {
        margin-left: 2rem;
    }

    #core-skills {
        max-width: 70rem;
    }

    #work-section {
        max-width: 70rem;
    }

    .work-main h2 {
        font-size: 2rem;
        line-height: 2.5rem;
        max-width: 40rem;
        margin-bottom: 5rem;
    }

    .work-image-container {
        max-width: 30rem;
        max-height: 20rem;
    }
    
    #contact {
        width: 100%;
    }

    .message h2 {
        font-size: 20rem;
        padding: 10rem 5rem;
    }
  }

  @media only screen and (max-width: 1280px) {
    nav {
        gap: 45rem;
    }
    
    #about-header h1 {
        margin-left: 2rem;
    }

    #core-skills {
        max-width: 70rem;
    }

    .message h2 {
        font-size: 15rem;
        padding: 6rem 3rem;
    }
  }

  @media only screen and (max-width: 1130px) {
    nav {
        gap: 40rem;
    }
    
    #about-header h1 {
        margin-left: 2rem;
    }

    #core-skills {
        max-width: 60rem;
    }

    #work-section {
        max-width: 70rem;
        padding: 0 2rem;
    }

    .work-main h2 {
        font-size: 1.6rem;
        max-width: 35rem;
    }

    .message h2 {
        font-size: 15rem;
        padding: 6rem 3rem;
    }
  }

  @media only screen and (max-width: 1028px) {
    nav {
        gap: 30rem;
    }

    .nav-menu.open {
      top: 0;
      opacity: 1;
      padding: 4rem 16rem 29rem 1rem;
    }

    .nav-menu li {
      font-size: 5rem;
    }
    
    .cv-button {
        font-size: .6rem;
    }

    .more {
        font-size: .6rem;
    }

    #about-header h1 {
        font-size: 3rem;
        line-height: 3.5rem;
    }

    .answer {
        line-height: 1.7rem;
        font-size: .8rem;
        padding: 0 1rem;
    }

    .experience {
        padding: 0 1rem;
    }

    #work-section {
        padding: 0 2rem;
    }

    .work-main h2 {
        font-size: 1.5rem;
        line-height: 1.6rem;
        max-width: 30rem;
        margin-bottom: 3rem;
    }

    .work-main p {
        font-size: .7rem;
        margin: 0;
        line-height: 1rem;
    }

    .work-image-container {
        max-width: 25rem;
        max-height: 15rem;
    }

    .message p {
        font-size: .9rem;
    }

    .form-title {
        font-size: .68rem;
    }
  }

  @media only screen and (max-width: 980px) {
    .header-hr {
        width: 150%;
    }
    
    #core-skills {
        max-width: 100%;
    }

    .work-details {
      gap: 7rem;
    }

    .work-image-container {
      max-width: 23rem;
      max-height: 12rem;
    }
    
    .message h2 {
        font-size: 12rem;
        padding: 6rem 3rem;
    }

    #message-form { 
        width: 50rem;
    }
  }

  
  @media only screen and (max-width: 900px) {
    nav {
      gap: 25rem;
    }

    .answer {
        padding: 0 2rem;
        line-height: 1.5rem;
    }

    .experience {
        padding: 0 2rem;
    }

    .experience h2{
        font-size: 2.5rem;
        margin-bottom: 1rem
    } 
     
    .xp-section {
        display: flex;
        gap: 1rem;
    }
     
    .xp-container { 
        padding: 0 .8rem;
    }

    .xp-container p {
        font-size: .7rem;
        line-height: 1.3rem;
        margin-bottom: 1.5rem;
    }

    .work-details {
        gap: 10rem;
    }

    .work-main h2 {
        font-size: 1.3rem;
        max-width: 50rem;
        margin-bottom: 2rem;
    }

    .work-main p {
        font-size: .7rem;
        margin: 0;
        line-height: 1rem;
    }

    .work-image-container {
        max-width: 20rem;
        max-height: 10rem;
    }

    .message h2 {
      font-size: 11rem;
      padding: 3rem 1rem;
    }

    #message-form { 
      width: 100%;
    }
  }
  
  @media only screen and (max-width: 872px) {
    h3 {
      font-size: .88rem;
    }

    h4 {
      font-size: .78rem;
    }

    .xp-section {
      gap: .8rem;
    }

    .xp-container { 
      padding: 0 .8rem;
    }

    .xp-container p {
      font-size: .7rem;
      line-height: 1.2rem;
    }

    .work-details {
      gap: 5rem;
    }

    .nav-menu {
      pointer-events: none;
    }
    .nav-menu.open {
      pointer-events: auto;
    }
  }

  @media only screen and (max-width: 782px) {
    h3 {
      font-size: .78rem;
    }

    h4 {
      font-size: .68rem;
    }

    .xp-container p {
      font-size: .65rem;
      line-height: 1.15rem;
    }
  }

  @media only screen and (max-width: 768px) {
    nav {
      gap: 20rem;
      width: 100%;
    }

    .nav-menu {
      list-style: none;
      display: flex;
      flex-direction: column;
   }

    .nav-menu.open {
      top: 0;
      opacity: 1;
      padding: 4rem 2rem 20rem 1rem;
    }

    .nav-menu li {
      font-size: 5rem;
    }

    .cv-button {
      font-size: .5rem;
    }
    .header-hr {
      width: 120%;
    }

    .work-details {
      gap: 4rem;
    }

    .work-main h2 {
      font-size: 1.2rem;
      margin-bottom: 2rem;
    }

    .work-main p {
      font-size: .6rem;
      margin-bottom: .2rem;
    }

    .work-image-container {
      max-width: 20rem;
      max-height: 10rem;
    }
  }

  @media only screen and (max-width: 721px) {
    .xp-section {
      display: flex;
      flex-direction: column;
    }

    h3 {
      font-size: 1rem;
    }

    h4 {
      font-size: .8rem;
      margin-bottom: .3rem;
    }

    .xp-container p {
      font-size: .8rem;
      line-height: 1.3rem;
      margin-bottom: 1.5rem;
    }

    .work-heading {
      text-align: center;
    }

    #work-section {
      display: flex;
      flex-direction: column;
      width: 100%;
    }

    .work-details {
      flex-direction: column;
      align-items: center;
    }
    
    .work-main h2 {
      font-size: 1.4rem;
      line-height: 2rem;
      max-width: 25rem;
      margin-bottom: 1.7rem;
    }

    .work-main {
      order: 2;
      max-width: 30rem;
    }

    .work-main p {
     font-size: .7rem;
    }

    .work-image-container {
      order: 1;
      max-width: 29rem;
      max-height: 20rem;
    }

    .work-image {
      border-radius: .7rem;
  }

  }

  @media only screen and (max-width: 692px) {
    .message h2 {
      font-size: 8rem;
    }

    .nav{
      gap: 12rem;
    }

    .logo {
      font-size: 1.8rem;
    }

    .cv-button {
      font-size: .48rem;
    }
  }

  @media only screen and (max-width: 600px) {
    nav{
      gap: 16rem;
    }
    
    .cv-button {
      font-size: .6rem;
      margin-right: .67rem;
    }

    .header-hr {
      max-width: 100%;
    }

    .work-image-container {
      max-width: 25rem;
      max-height: 20rem;
    }

    .curtain-container {
      max-width: 25rem;
    }
  }

  @media only screen and (max-width: 556px) {
    nav {
      gap: 14rem;
      font-size: .5rem;
    }

    .logo {
      font-size: 1.8rem;
    } 

    .intro {
      max-width: 28rem;
    }

    .message h2 {
      font-size: 7rem;
    }

  }

  @media only screen and (max-width: 500px) {
    nav{
      gap: 12rem;
    }

    .intro {
      max-width: 26rem;
    }
    .message h2 {
      font-size: 8rem;
      letter-spacing: 0;
    }

  }

  @media only screen and (max-width: 430px) {
    nav{
      gap: 8rem;
    }
    .nav-menu {
      list-style: none;
      display: flex;
      flex-direction: column;
    }
    .nav-menu.open {
      top: -2%;
      opacity: 1;
      padding: 4rem 1rem 20rem 1rem;
    }
    .nav-menu li {
      font-size: 5rem;
    }
    .logo {
      font-size: 1.3rem;
    }

    .cv-button {
      padding: .4rem .6rem;
    }

    .intro {
      padding-top: 1rem;
      max-width: 22rem;
    }

    .intro h1 {
      font-size: 3rem;
      line-height: 3.5rem;
      margin-bottom: 1rem;
    }

    .intro p {
      font-size: .7rem;
    }

    #header {
      padding-bottom: 2rem;
    }

    .curtain-image {
      margin-top: 3rem;
      max-width: 40rem;
      max-height: 25rem;
    }

    

    .curtain-container {
      max-width: 20rem;
    }

    .message h2 {
      font-size: 7rem;
    }

    .form-flex {
      gap: 3rem;
    }
  }

  @media only screen and (max-width: 380px) {
    .cv-button {
      padding: .4rem .5rem;
      font-size: .6rem;
    }
    .intro {
      max-width: 20rem;
    }
    .curtain-container {
      max-width: 18rem;
    }

    .curtain-image {
      margin-top: 3rem;
      max-width: 35rem;
      max-height: 20rem;
    }
    
    .message h2 {
      font-size: 6rem;
    }

    #footer {
      padding: 2rem;
    }

    .footer-logo {
      font-size: 3rem;
    }

   .catchphrase {
      margin-bottom: 1rem;
      font-size: .6rem;
    }

    .social-links {
      margin-top: 1rem;
    }
    
    .social-links a {
      margin-right: .4rem;
      font-size: 1rem;
    }
    
    .copyright {
      font-size: .6rem;
    }
  
  }

  @media only screen and (max-width: 330px) {
    nav {
      gap: 6.5rem;
    }
    .nav-menu {
      list-style: none;
      display: flex;
      flex-direction: column;
    }
    .nav-menu.open {
      top: -2%;
      opacity: 1;
      padding: 4rem 1rem 20rem 1rem;
    }
    .nav-menu li {
      font-size: 4.5rem;
    }

    .logo {
      font-size: 1rem;
    }
    
    .cv-button {
      padding: .4rem .5rem;
      font-size: .5rem;
    }
    .intro {
      max-width: 17rem;
    }
    .curtain-container {
      max-width: 18rem;
    }

    .curtain-image {
      margin-top: 3rem;
      max-width: 35rem;
      max-height: 20rem;
    }
    
    .message h2 {
      font-size: 5rem;
    }
  }