* {box-sizing: border-box;}
:root {
  --blu: rgb(0,36,100);
  --wht: rgb(128, 128, 128);
  --gry:rgba(250,250,252,.5);
  --gry-dk:rgba(230,230,232,1);
  --ylw: rgba(255,255,0,.25);
}
body {font-family:sans-serif;background-color:var(--gry);height:100%;}
h1{font-size: 1.85em;font-style:italic;font-weight:200;color:white;text-align:center;}
h2{font-size: .9em;font-weight:300;text-align:center;}
h3{text-align:center;color:var(--blu);}
p{font-size:1em;line-height:1.5;margin:auto;}
p.small{font-size:.8em;border:1px solid var(--blu);border-radius:8px;margin: 2em 1em 0 1em;padding:1em;}
.light{color:white;}
.dark{color:var(--blu);}
img {display:block;width:90%;height:auto;}
.hdg{display:flex;flex-flow:row nowrap;background-color:var(--blu);padding:2%;}
.main {
  display:flex;
  flex-flow:row nowrap;
  justify-content:center;
  background-color: transparent;
  color:var(--blu);
  padding: 20px 0;
  float: left;
  width: 100%;
}
.centerfield{display:flex;flex-flow:row wrap;justify-content:space-around;width:85%;margin:auto;}
.left{display:flex;flex-flow:column nowrap;background-color: var(--gry-dk);border:2px solid var(--blu);border-radius:8px;float: left;width:50%;margin:auto 0;}
.middle{background-color: transparent;padding: 2%;float:left;width:50%;}
.right{background-color: transparent;float: left;width: 50%;margin:0}
.ctr{text-align:center;}
.button{background-color: var(--blu);
  border: none;
  color: white;
  padding: .25em 1em;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.5em;
  font-family:sans-serif;
  margin: 0;
  cursor: pointer;
  border-radius:12px}
#mission{text-align:center;width:85%;font-size:.95em;}
#mission-stmts{display:flex;flex-flow:row wrap;justify-content:space-evenly;width:60%;margin:2em auto;}
.mission-stmt{margin:.5em;}
.links a{font-size:140%;text-align:center;margin:.5em;}
#logo{width:80%;margin-left:.5em;}
#volunteer{font-size:.75em;padding:1em;}
#donate{font-size:.75em;padding:1em}
#qrcode{width:65%;margin-left:2em;padding-top:0;padding-left:1em;}
#donations{display:flex;flex-flow:row wrap;justify-content:center;color:var(--blu);font-size:.9em;text-align:center;width:85%; padding:2em 0 0 0;margin:auto;}
#phone{color:white;width:50%;}
#email{color:white;width:50%;}
#news{font-size:110%;background:var(--ylw);border:4px solid var(--blu);border-radius:8px;padding:1em;margin:1em 2em;}
footer {
  display:flex;
  flex-flow:row nowrap;
  color:white;
  background-color: var(--blu);
  font-weight:600;
  font-size:.85em;
  text-align: center;
  align-items: center;
  height:6em;
  width:100%;
  padding:1em;
}
footer a{color:white;}
@media screen and (min-width:480px){
  p.small{font-size:.8em;border:1px solid var(--blu);border-radius:8px;margin: 2em 2em 0 2em;padding:1em;}
  #qrcode{width:60%;margin-left:3em;padding-left:1em;}
  #news{margin:1em 3em;}
 }
@media screen and (min-width:680px){
  .left{width:42%;margin-left:2em;}
  #volunteer,#donate{margin:1em 4em;}
  #qrcode{width:53%;}
  #news{margin:1em 4em;}
}
@media screen and (min-width:768px){
  h1{font-size:2em;}
  h2{font-size:1.2em;}
  .button{width:75%;}
  #mission{font-size:1em;}
  #logo{width:60%;margin-left:2.5em;}
  #volunteer,#donate{margin:1em 4em;}
  #qrcode{width:50%;margin-left:6em;padding-left:2em;}
  #donations{font-size:.95em;}
  #news{width:60%;margin:1em auto;}
  footer{font-size:1em;}
}
@media screen and (min-width:1024px){
  h1{font-size:2.2em;}
  .centerfield{width:75%;}
  .left{width:40%;margin:auto 0 auto 4em;}
  #mission{width:70%;}
  #logo{width:50%;margin-left:8em;}
  #qrcode{width:40%;padding-left:1em;}
  #donations{width:70%;padding-bottom:1em;}
  #news{width:40%;}
}
@media screen and (min-width: 1280px){
  p.small{font-size:.7em;width:60%;}
  .centerfield{width:60%;}
  .left{width:35%;margin:auto 0 auto 6em;}
  #mission{width:60%;font-size:1.3em;}
  #logo{width:40%;margin-left:14em;}
  #qrcode{width:45%;}
  #volunteer,#donate{margin:1em 3em;}
  #donations{font-size:1.2em;width:60%;}
  #news{width:30%;}
  #news p{text-align:center;}
}
@media screen and (min-width:1352px){
  #logo{margin-left:16em;}
  #qrcode{width:40%;padding-left:2em;}
  #news{width:25%;}
}
@media screen and (min-width:1620px){
  .button{width:60%;}
  #logo{margin-left:20em;}
  #volunteer,#donate{margin:1em 2em;width:85%;}
  #qrcode{width:35%;padding-left:3em;}
  #news{width:20%;}
}