<h1 class="hero-title" id="backfont">404</h1>

@import url(https://fonts.googleapis.com/css?family=Russo+One&display=swap);
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900);
@import url(https://fonts.googleapis.com/css?family=Anton|Fredoka+One&display=swap);

body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-color: #4285F4;
  background-image: url(https://abload.de/img/bg2anj85.png);
}

body {
  display: -webkit-box;
  display: flex;
  height: 100vh;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-flow: column;
}


.hero-title {
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 60vmin;
  letter-spacing: 0px;
  line-height: 0;
  opacity: .9;
  font-weight: 900;
  font-family: "Roboto", sans-serif;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 1.0);
  transition: 750ms ease-in-out;
-webkit-transform: translate(-50%, -50%) rotate(-45deg);
        transform: translate(-50%, -50%) rotate(-45deg);
  text-shadow: 2vmin 2vmin #ff4655,
               3vmin 3vmin #000000;
  background: linear-gradient(60deg, #f79533, #F36F52, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  animation: colorrr 10s infinite;
}
@keyframes colorrr {
  0% {
       filter: hue-rotate(0deg)
      }
  50% {
       filter: hue-rotate(360deg)
      }
}

const visual = document.getElementById("backfont")
const events = ['resize', 'load']

events.forEach(function(e){
	window.addEventListener(e, function(){
		const width = window.innerWidth
		const height = window.innerHeight
		const ratio = 30 / (width / height)
		visual.style.transform = "translate(-50%, -50%) rotate(-" + ratio + "deg)"
	});
});