<div class="hero">
  <div class="inner-text">
    <p class="p1">404:</p>
    <p class="p2">Error</p>
  </div>
</div>

html, body {
  height: 100%;
}

body {
  font-family: 'Roboto';
  text-align: center;
  color: #f5f5f5;
  animation:fadeIn 1s ease-in;
}

.hero {
  background: url('https://howtomakefilm.com/wp-content/uploads/2018/06/How-to-Write-a-Movie-Script-3.jpg') no-repeat center;
  background-size: cover;
  background-color: rgba(0,0,0,0.50);
  background-blend-mode: multiply;
  height: 100%;
  width: 100%;
}

.inner-text {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10vmin;
  @media only screen and (min-width: 320px) {
    padding-left: 15px;
    padding-right: 15px; 
  }
  @media only screen and (min-width: 400px) {
    padding-left: 40px;
    padding-right: 40px; 
  }
  @media only screen and (min-width: 680px) {
    font-size: 75px;
  }
  @media only screen and (min-width: 950px) {
    font-size: 100px;
  }
}

.p1 {
  display: inline-block;
  font-size: 1em;
  font-weight: 900;
  marign: 0;
  line-height: 1;
  @media only screen and (max-width: 465px) {
    display: block;
    position: absolute;
    top: -25%;
    left: 50%;
    transform: translateX(-50%);
  }
}

.p2 {
  display: inline-block;
  font-size: 1em;
  font-weight: 100;
  marign: 0;
  line-height: 1;
  color: #20b2aa;
  @media only screen and (max-width: 465px) {
    position: relative;
    top: 0.6em;
  }
}

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

$(function() {
  $(".p2").typed({
    strings: ["Page not found", "try again", "nothin' here"],
    typeSpeed: 50,
    backSpeed: 10,
    backDelay: 2000,
    showCursor: true,
    loop: true
  });
});

$('.hero-down').mousedown(function() {
  TweenMax.fromTo('.btn-react', 0.25, {
    opacity: 0,
    scale: 0
  }, {
    opacity: 0.25,
    scale: 1,
    onComplete: function() {
      TweenMax.to('.btn-react', 0.25, {
        opacity: 0,
        scale: 0
      });
    }
  });
});

// smooth scroll to div
$('a[href*=#]:not([href=#])').click(function() {
  if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
    var target = $(this.hash);
    target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
    if (target.length) {
      $('html,body').animate({
        scrollTop: target.offset().top
      }, 1000);
      return false;
    }
  }
});