$font-family: Roboto;

html, body {
  height: 100%;
  width: 100%;
  background: #222;
  color: #fff;
  font-family: $font-family;
}

body {
  font-size: 10px;
} 
 
h1 {
  position: relative;
  font-weight: 700;
  font-size: 3em;
  margin-bottom: .25em;
  text-shadow: -.2em -.2em 0 0 #222, -.4em -.4em 0 0 #fff;
  &:before {
    content: attr(data);
    position: absolute;
    left: -.03em;
    top: .03em;
    color: #ccc;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADCAYAAABWKLW/AAAAHElEQVQIW2NkgIL/+wv+M4LYYIbjBEZGGAMkCADMhwsxY6rQqAAAAABJRU5ErkJggg==);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.wrap {
  position: relative;
  width: 75em;
  height: 100%;
  margin: 0 auto;
}

.text-wrap {
  font-size: 3em;
  position: absolute;
  top: 0;
  left: 0;
  background: #222;
  height: 100%;
  width: 100%; 
  overflow: hidden;
} 

.float {
	position: absolute;
}

.fadeOut {
	opacity: 0;
}