@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

:root {
  --bp-phone: 320px;
  --bp-tablet: 768px;
  --bp-desktop: 1024px;
}

  
  html {
      scroll-behavior: smooth;
  }
  
  BODY {
    background-color: #cccccc;
    background-repeat: no-repeat;
    padding: 0px;
    margin: 0px;
    font-family: "Lato", sans-serif;
  }
  
  #landing {
    display: grid; 
    grid-auto-columns: 1fr; 
    grid-template-columns: 1fr 1fr 1fr; 
    grid-template-areas: 
      "quote testimonial testimonial"; 
    align-items: center; 
    align-content: center;
    box-sizing: border-box;
    background: #eee;
    height: 95vh;
    min-height: 750px;

  }
  #quote { 
    grid-area: quote; 
    display: grid;
    font-family: "Lato", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: auto;
    align-self: center;
    text-align: center;
  }
 
   #quote h1 {
      margin: 0px;
      padding: 0px;
       font-size: 3rem;
    }
    #quote h2 {
        margin: 0px;
        padding: 0px;
        font-size: 2.8rem;
    }

    #quote p {
      margin: 1rem;
    }
    .byline {
      font-weight: 300;
      font-size: 2rem;
    }
  
  
  
  #testimonial { 
    grid-area: testimonial; 
    display: grid;
    height: 95vh;
    min-height: 750px;
    background: #371111;
    background-image: url("/img/main-background.png");
    background-size: cover;
    align-items: center;
  }
  
  #testimonial div {
    margin-left: 25%;
    margin-right: 25%;
    align-self: center;
    color: white;
    font-size: 1.25rem;
    line-height: 2rem;
    font-weight: 300;
  }
  
    .maintext {
      
    }
    
    #testimonial p.person {
      font-size: 1.5rem;
      margin: 0px;
      padding: 0px;
      line-height: 1rem;
    }
    
    .howtolink a {
      color: white;
      font-weight: 700;
      text-decoration: none;
      font-size: 1.75rem;
      line-height: 1rem !important;
    }
  
  footer {
    padding-top: 1.2rem;
    padding-bottom: 1.2rem;
    text-align: center;
    font-size: .75rem;
  }

@media only screen and (max-width: 1375px) {
  #quote {
    font-size: 1.75rem;
  }
  #testimonial div {
    font-size: 1.5rem;
    margin-left: 10vw;
    margin-right: 10vw;
  }
  #testimonial p.person {
    font-size: 1.2rem;
  }
  
  #quote p .byline {
    font-size: 1rem;
  }
  
  .howtolink a {
    font-size: 1.5rem;
    margin-top: 1rem;
  }

}
@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 
and (-webkit-device-pixel-ratio : 3), 
@media only screen 
and (device-width : 375px) 
and (device-height : 812px) 

 {

  body {
    font-size: 16px;
  }
  
  #landing {
    display: block; 
    height: auto;
    font-size: 1em;

  }
  
  #quote {
    display: block;
    box-sizing: border-box;
    height: 40vh;
    width: 1vw !important;
    min-width: 1vw !important;
    align-items: center; 
    align-content: center;
  }
  
  #testimonial {
    height: auto;
    font-size: 1.5em;
    min-height: 60vh;
    clear: both;
  }
  
  
  #quote, #testimonial div {
    font-size: 1.5rem;
    line-height: normal;
    margin-left: 10vw;
    margin-right: 10vw;
    box-sizing: border-box;
  }
  
  #quote p {
    margin: 0px;
    padding: 1rem;
    font-size: 1.5rem;
    line-height: normal;
  }
  
  #quote p:nth-child(1) {
    padding-top: 10vh;
  }
  
  #quote p .byline {
    margin: 2rem;
  }
  
  #testimonial p.person {
    font-size: 1rem;
  }

  .howtolink {
    margin-top: 1rem;
  }
  
  .howtolink a {
    font-size: 1rem;
  }
  
  footer {
    display: block;
    background-color: #eee;
    clear: both;
    font-size: 1rem;
  }
  
  
}