html, body, div.wrapper { height: 100%; }
body, a, img, div, span { position: relative; }

body {
 margin: 0;
 padding: 20px;
 box-sizing: border-box;
 background-color: #fff;
 line-height: 1.6;
 font: 18px arial;
 text-align: center 
}

body::before {
 content: '';
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 background-image: url('/images/flowing-lines.jpg');
 background-size: cover; 
 background-repat: no-repeat;
}

div.wrapper {
 display: flex;
 align-items: flex-start;
 margin: 0 auto;
 max-width: 90%;
}

div.textbkg {
  margin: 12% auto;
  padding: 2.5em;
  background-color: #FC602533;
  background: linear-gradient(to bottom left, #FC602533, #FC602522);
  box-shadow: -1px 2px 4px #FC602566;
  border-radius: 1em;
}

div.text {
  font-size: 2vw;
  color: #F7F7F7
}

div.text + .text {
  margin-top: 1.5em;
}

div.subtext {
  font-size: 1.5vw;
  color: #C7C7C7
}

div.text + .subtext {
  margin-top: 1em;
}

div.subsubtext {
  font-size: 1vw;
  color: #C7C7C7
}

div.text + .subsubtext {
  margin-top: 1em;
}

pre.msgs {
  font-size: 1em;
  padding: 2em;
  background-color: #fff;
  text-align: left;
}

.domain { color: #FC6025 }
.ahref { color: #FC6025 }
.ahref span::before { content: '@' }

.todomain { font-style: italic }
.todomain::before, .todomain::after { content: '"' }

/*@supports (display: flex) {
  div.textbkg {
    transform: translateY(-50%);
  }
}
@media (max-height: 600px) {
  div.textbkg {
    transform: translateY(-25%);
  }
}*/
@media (max-width: 900px) {
  div.text {
    font-size: 18px;
  }
  div.subtext {
    font-size: 9px;
  }
}
@media (min-width: 1600px) {
  div.text {
    font-size: 32px;
  }
  div.subtext {
    font-size: 16px;
  }
}