/* rem and em do NOT depend on html font-size in media queries! Instead, 1rem = 1em = 16px */

@media  screen and (min-width:600px) {

    html {
        font-size: 65%;
    }
    .nav-link:link,
    .nav-link:visited {
      display: flex;
      padding: 1.5rem 3rem;
      font-weight: 600;
      font-variant: small-caps;
      text-decoration: none;  
      color: #fff;
      font-size: 1.4rem;
    }
    .top-button {
      display: flex;
      width: 100%;
      height: auto;
      align-self: flex-end;
    }
    .btn {      
      padding: 1.5rem 3rem;       
      font-size: 1.4rem;
      background-color: rgb(255, 69, 00);      
    }
    .hero-container {
      width: 100%;
      margin-top: 4rem;
      height: auto;
      padding-left: 3%;
      padding-right: 3%;
      display: block;
      background-color: #fff;
    }
    .who { 
      background-image: url("../achterberg-masonry.jpg");
      background-position: center top;
      background-size: contain;
      background-repeat: no-repeat; 
      padding: 15rem 7% 8rem;
      display: block;   
    }
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
@media  screen and (min-width:800px) {
    html {
        font-size: 69%;
    }
    h1 {
      font-size: 4rem;
      letter-spacing: -1px;
      font-family: "Archivo Black";
      text-align: center;
      padding-top: 2rem;
      font-weight: 700;
      background: url("../pg.bkg.jpg");
      background-size: cover;
      background-clip: text;
    }
    h2 {
      font-size: 3rem;
      padding-bottom: 2rem;
    }
    h3 {
      font-size: 2;
      padding-bottom: 2rem;
    }
    h4 {
      font-size: 1.9rem;
      padding-bottom: 2rem;
    }
    h5 {
      font-size: 1.9rem;
      padding-bottom: 2rem;
    }
    p {
      font-size: 1.5rem;
      padding-bottom: 2rem;
    }
    
    .header-container {
        height: 400px;
        background-image: url("../pg-bkg-lg2.jpg");  
        gap: 260px;

      }
    
      .nav-link:link {
          font-size: 1.6rem;
      }
      
      .who { 
        background-image: url("../achterberg-masonry.jpg");
        background-position: center top;
        background-size: contain;
        background-repeat: no-repeat; 
        padding: 18rem 7% 8rem;
        display: block;   
      }
      .footer-link:link,
      .footer-link:visited {          
          font-size: 1.5rem;          
      }

      .contact p {
      font-size: 1.5rem;
      }
}
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
@media  screen and (min-width:1000px) {
  body {
    background-color: #000;
  }
    .container {
      width: 1000px;
      margin: 0 auto;
    }
    .btn {
        display: block;
        padding: 1.5rem 3rem;
        background-color: orangered;
        text-decoration: none;
        color: #fff;
        text-align: center;
        font-size: 2rem;
      }
             
      /* HEADER */
      .header-container {
        width: 100%;
        height: 450px;
        gap:280px;
        background-image: url("../pg-bkg-lg2.jpg");
        background-position: center top;
        background-size: cover;
        background-repeat: no-repeat;
      }
      .top-button {
        margin-top: 30px;
      }
           
      /* HERO SECTION */
      .hero-container {
        width: 100%;
        margin: 0;
        display: block;
        height: auto;
        background-color: bisque;
        padding: 3rem 0;         
      }
      
      .hero-container h1 {
        font-size: 4rem;        
        text-shadow: 1px 1px 2px rgba(231, 106, 33, 0.5);
      }
     
      .who { 
        background-image: url("../achterberg-masonry.jpg");
        background-position: center top;
        background-size: contain;
        background-repeat: no-repeat; 
        padding: 23rem 7% 8rem;
        display: block;   
      }
      .section-main {
        width: 100%;
        height: auto;
      }
      .tagline {
       padding-top: 0;
      }
      .tagline h2 {
        font: 4rem;
        line-height: 2;
      }
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
@media  screen and (min-width:1300px) {
  html {
    font-size: 69%;
}
h1 {
  font-size: 6rem;   
  padding-top: 4rem;   
}
h2 {
  font-size: 4.5rem;
  padding-bottom: 3rem;
}
h3 {
  font-size: 3.5rem;
  padding-bottom: 2rem;
}
h4 {
  font-size: 2.9rem;
  padding-bottom: 2rem;
}
h5 {
  font-size: 2.9rem;
  padding-bottom: 2rem;
}
p {
  font-size: 2.1rem;
  padding-bottom: 2rem;
}
  .container {
    width: 1300px;
    margin: 0 auto;
  }
  .btn {
      display: block;
      padding: 1.5rem 3rem;
      background-color: orangered;
      text-decoration: none;
      color: #fff;
      text-align: center;
      font-size: 2rem;
    }
           
    /* HEADER */
    .header-container {
      width: 100%;
      height: 500px;
      gap:360px;
      background-image: url("../pg-bkg-lg2.jpg");
      background-position: center top;
      background-size: cover;
      background-repeat: no-repeat;
    }
   
    /* HERO SECTION */
    .hero-container {
      width: 100%;
      display: block;
      height: auto;
      background-color: bisque;
      padding: 3rem 0;         
    }
    
    .hero-container h1 {
      font-size: 4rem;        
      text-shadow: 1px 1px 2px rgba(231, 106, 33, 0.5);
    }
    .tagline {
      display: block;
      width: 100%;         
      background-color: bisque;
    }
    .tagline h2 {
      font: 4rem;
      line-height: 2;
    }
    .m-d-1 {
      font-size: 3rem;
    }
    .aside-text p {
      font-size: 2.4rem;
    }
    .testimonials {
      padding: 5% 9%;
      padding-bottom: 10%;
      font-size: 2.4rem;
    }
    .testimonial-name {
      font-size: 1.6rem;
      padding-top: 1.1rem;
    }
    .about-us-section {
      max-width: 1300px;
      margin: 0 auto;
    }
    .who { 
      background-image: url("../achterberg-masonry.jpg");
      background-position: center top;
      background-size: contain;
      background-repeat: no-repeat; 
      padding: 29rem 7% 8rem;
      display: block;   
     
    }
    .gallery-section {
      max-width: 1300px;
      margin: 0 auto;
    }
    .footer {
      max-width: 1300px;
      margin: 0 auto;
    }
    .footer-top {     
      gap: 4rem;      
    }
    .contact {      
      gap: 25%;  
      max-width: 1300px;    
      margin: 0 auto;
    }
   .contact h2 {
    font-size: 2.1rem;
   }
}

/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
@media  screen and (min-width:1980px) {
  html {
    font-size: 74%;
}
h1 {
  font-size: 6rem;   
  padding-top: 4rem;   
}
h2 {
  font-size: 4.5rem;
  padding-bottom: 3rem;
}
h3 {
  font-size: 3.5rem;
  padding-bottom: 2rem;
}
h4 {
  font-size: 2.9rem;
  padding-bottom: 2rem;
}
h5 {
  font-size: 2.9rem;
  padding-bottom: 2rem;
}
p {
  font-size: 2.1rem;
  padding-bottom: 2rem;
}
  .container {
    width: 1300px;
    margin: 0 auto;
  }
  .btn {
      display: block;
      padding: 1.5rem 3rem;
      background-color: orangered;
      text-decoration: none;
      color: #fff;
      text-align: center;
      font-size: 2rem;
    }
           
    /* HEADER */
    .header-container {
      width: 100%;
      height: 500px;
      gap:360px;
      background-image: url("../pg-bkg-lg2.jpg");
      background-position: center top;
      background-size: cover;
      background-repeat: no-repeat;
    }
   
    /* HERO SECTION */
    .hero-container {
      width: 100%;
      display: block;
      height: auto;
      background-color: bisque;
      padding: 3rem 0;         
    }
    
    .hero-container h1 {
      font-size: 4rem;        
      text-shadow: 1px 1px 2px rgba(231, 106, 33, 0.5);
    }
    .tagline {
      display: block;
      width: 100%;         
      background-color: bisque;
    }
    .tagline h2 {
      font: 4rem;
      line-height: 2;
    }
    .m-d-1 {
      font-size: 3rem;
    }
    .aside-text p {
      font-size: 2.4rem;
    }
    .testimonials {
      padding: 5% 9%;
      padding-bottom: 10%;
      font-size: 2.4rem;
    }
    .testimonial-name {
      font-size: 1.6rem;
      padding-top: 1.1rem;
    }
    .about-us-section {
      max-width: 1300px;
      margin: 0 auto;
    }
    .who { 
      background-image: url("../achterberg-masonry.jpg");
      background-position: center top;
      background-size: contain;
      background-repeat: no-repeat; 
      padding: 29rem 7% 8rem;
      display: block;   
     
    }
    .gallery-section {
      max-width: 1700px;
      margin: 0 auto;
    }
    .footer {
      max-width: 1700px;
      margin: 0 auto;
    }
    .footer-top {     
      gap: 4rem;      
    }
    .contact {      
      gap: 25%;  
      max-width: 1700px;    
      margin: 0 auto;
    }
   .contact h2 {
    font-size: 2.1rem;
   }
}