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/1_forgotpassword.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: auto;
  padding: 2em;
  background-color: rgba(255,255,255,.3);
  background-color: rgba(0,0,0,.6);
}

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

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

.domain { color: #FC6025 }
.ahref { color: #FC6025 }
.ahref span::before { 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;
  }
}
@media (min-width: 1600px) {
  div.text {
    font-size: 32px;
  }
}