html, body {
  height: 100%;
  margin: 5%;
  background: #445;
  font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300; /* Light weight */
  color: #fff;

}
ul { padding-left:2em;}
.wrapper {
  display: flex;
  align-items: center;     /* vertical center */
  justify-content: center; /* optional: horizontal center */
}

.transp {
background-color: transparent ;

}
em { opacity:0.7; }
p, h1 {
max-width:30em;
padding-top:1em;
}
a { color: #FFC; }
a:visited { color: #FFC; }
a { text-decoration: none; border-bottom:1px dotted; }

.title {
text-align: center;
padding:0;
font-size:2em;
margin:0;
padding:0;
  }

.subtitle {
text-align: center;
padding:0;
font-size:1em;
margin: 0;
  }


.footer { margin-top:10em; color: white; font-size: 1em; opacity: 0.7; text-align:left;}

.fampic {
  position: absolute;
  top: 0;
  left: 0;
  opacity:0.2;
  pointer-events: none; /* clicks pass through */
  width:100%;
  mix-blend-mode: overlay;

  /* fade out last 30% */
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%
  );

  /* Safari / WebKit */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,1) 0%,
    rgba(0,0,0,1) 70%,
    rgba(0,0,0,0) 100%
  );


}