html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: grey; }

.wrapper {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden; }

.background {
  width: 100vw;
  height: 100vh;
  background: url("../img/sky.jpg");
  background-size: cover; }

.outer-scratch, .inner-scratch {
  height: inherit; }

.outer-scratch:after, .inner-scratch:after {
  content: '';
  width: 120%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding-left: 100px;
  opacity: .08;
  background: url("../img/scratch.png") repeat center center;
  -webkit-animation: scratch 0.45s steps(1) infinite;
  animation: scratch 0.45s steps(1) infinite; }

.inner-scratch:after {
  left: 30%;
  -webkit-animation: inner-scratch 2s infinite;
  animation: inner-scratch 2s infinite; }

.grain:after {
  content: '';
  width: 110%;
  height: 110%;
  position: absolute;
  top: -5%;
  left: -5%;
  opacity: .11;
  background: url("../img/grain.jpg") repeat center center;
  -webkit-animation: grain 0.5s steps(1) infinite;
  animation: grain 0.5s steps(1) infinite; }

/*  Basic Title  */
h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  font-family: sans-serif;
  font-weight: 300;
  font-size: 1.5em;
  text-align: center;
  color: #fff;
  -webkit-animation: 3s fade;
  animation: 3s fade; }
  @media (min-width: 576px) {
    h1 {
      font-size: 2em; } }
  @media (min-width: 768px) {
    h1 {
      font-size: 3em; } }
  h1 span {
    display: inline-block;
    position: relative;
    padding: .5em 1em; }
    h1 span:before {
      display: block;
      content: '';
      width: 110%;
      margin-left: -5%;
      margin-bottom: 5%;
      border-top: 1px solid #fff;
      -webkit-animation: 2.5s draw;
      animation: 2.5s draw; }
    h1 span:after {
      display: block;
      content: '';
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      border-bottom: 1px solid #fff;
      -webkit-animation: 2.5s draw-bottom;
      animation: 2.5s draw-bottom; }

/* Film Animations */
@keyframes grain {
  0%, 100% {
    transform: translate(0, 0, 0); }
  10% {
    transform: translate(-1%, -1%); }
  20% {
    transform: translate(1%, 1%); }
  30% {
    transform: translate(-2%, -2%); }
  40% {
    transform: translate(3%, 3%); }
  50% {
    transform: translate(-3%, -3%); }
  60% {
    transform: translate(4%, 4%); }
  70% {
    transform: translate(-4%, -4%); }
  80% {
    transform: translate(2%, 2%); }
  90% {
    transform: translate(-3%, -3%); } }

@keyframes scratch {
  0%, 100% {
    transform: translateX(0);
    opacity: 0.075; }
  10% {
    transform: translateX(-1%); }
  20% {
    transform: translateX(1%); }
  30% {
    transform: translateX(-2%);
    opacity: 0.09; }
  40% {
    transform: translateX(3%); }
  50% {
    transform: translateX(-3%);
    opacity: 0.05; }
  60% {
    transform: translateX(8%); }
  70% {
    transform: translateX(-3%); }
  80% {
    transform: translateX(10%);
    opacity: 0.02; }
  90% {
    transform: translateX(-2%); } }

@keyframes inner-scratch {
  0% {
    transform: translateX(0);
    opacity: 0.08; }
  10% {
    transform: translateX(-1%); }
  20% {
    transform: translateX(1%); }
  30% {
    transform: translateX(-2%); }
  40% {
    transform: translateX(3%); }
  50% {
    transform: translateX(-3%);
    opacity: 0.06; }
  60% {
    transform: translateX(8%); }
  70% {
    transform: translateX(-3%); }
  80% {
    transform: translateX(10%);
    opacity: 0.03; }
  90% {
    transform: translateX(20%); }
  100% {
    transform: translateX(30%); } }

/* Simple Title Animation */
@keyframes draw {
  0% {
    width: 0%; }
  100% {
    width: 110%; } }

@keyframes draw-bottom {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }

@keyframes fade {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }