html {
   font-size: 13pt;
   word-wrap: break-word;
}
body {
   font-family:"neue-haas-grotesk-display";
   font-feature-settings: "salt";
   background-color: black;
   margin:10rem 1.5rem 1.5rem 1.5rem;
   width: calc(50vw - 1.5rem);
}
h1 {
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   color: white;
   font-weight: 900;
   font-size: 4rem;
   letter-spacing: -0.15rem;
   margin-block-start: 0em;
   margin-block-end: -0.15em;
}
b {
   letter-spacing: -0.7rem;
}
@-moz-document url-prefix() {
 b {letter-spacing: -0.5rem;}
}
h2 {
   color: white;
   font-weight: 600;
   font-size: 2rem;
   text-transform: uppercase;
}
h3 {
   color: white;
   font-weight: 600;
   font-size 1.5rem;
   text-transform: uppercase;
}
#david {
   position: fixed;
   padding:  1.5rem 0 1rem 1.5rem;
   width: calc(50vw - 1.5rem);
   top: 0;
   left: 0;
   background-color: black;
}
#david p {
   margin: 0 0 0 0;
   padding: 0 0 0 0;
   color: white;
   font-weight: 300;
   font-size: 1.3rem;
   letter-spacing: 0.15rem;
   text-shadow: 0.21rem 0.21rem 0.3rem rgba(0,0,0,0.4);
}
p {
   color: white;
   font-weight: 300;
   font-size: 1.5rem;
}
a {
   color: white;
   text-decoration: underline;
}
@media(max-width: 1300px) {html{font-size: 11pt}}
@media(max-width: 1100px) {
   body{width: calc(75vw - 1.5rem)}
   #david {width: calc(75vw - 1.5rem)}
   }
@media(max-width: 710px) {
   html{font-size: 10pt;}
   body{width: calc(100vw - 3rem)}
   #david {width: calc(100vw - 3rem)}
}
@media(max-width: 550px) {html{font-size: 8pt;}}
@media(max-width: 480px) {html{font-size: 7pt;}}
@media(max-width: 350px) {html{font-size: 6pt;}}
@media(max-width: 310px) {html{font-size: 5pt;}}
@media(max-height: 480px) {html{font-size: 10pt;}}
@media(max-height: 320px) {html{font-size: 8pt;}}