style.css

/* --- CSS Reset --- */
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, code,
del, dfn, em, img, q, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0px;
  padding: 0;
  border: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}


body {
  font-family: Helvetica, "Open Sans", Arial, sans-serif; 
  text-align: left;
  background: white;
  color: #002118; 
  border-top: 6px solid #002118; 

  font-weight: 400;
  font-style: normal;
  
  }

.header { 
  padding-bottom: 30px;
  padding-top: 70px;    
  padding-left: 200px;
  padding-right: 50px;     
}

.grid {
  text-align: left;
  padding-top: 10px;
  width: 90vw;
  
}

/*
@media screen and (min-width: 1500px) {
  .grid {
   margin-top:100px;
   padding-left: 100px;
   }
}

@media screen and (min-width: 1700px) {
  .grid {
   margin-top:150px;
   padding-left: 100px;
  }

}
*/

@media screen and (max-width: 800px) {
  .grid {
    transform: perspective(0em) rotateY(20deg); 
    transform: skew(0deg, -5deg);
    padding-left: 20px;
    }
  .header { 
   padding-left: 0px;
   }
}


/* --- Typography  --- */

.grid h1 {
  font-size: 52px;
  padding-bottom: 36px;
  color: #002118;  		
}


.grid p {
  line-height: 36px;
  font-size: 28px;
  padding-bottom: 0px;
}

a {
  text-decoration: none;
  color: #00acac;
}

a:hover {
  color: #ee652e;
}

.header p {
  width: 100%; 
  padding-bottom: 21px;
  margin-bottom: 21px;
  max-width: 1500px;
}