<a href="#">
 <svg height="0.8em" width="0.8em" viewBox="0 0 2 1" preserveAspectRatio="none">
  <polyline
        fill="none" 
        stroke="#777777" 
        stroke-width="0.1" 
        points="0.9,0.1 0.1,0.5 0.9,0.9" 
  />
</svg> Home
</a>
<div class="background-wrapper">
	<h1 id="visual">404</h1>
</div>
<p>The page you’re looking for does not exist.</p>

@import url('https://fonts.googleapis.com/css?family=Eczar:800');
@import url('https://fonts.googleapis.com/css?family=Poppins:600');


body {
	font-family: "Poppins";
	height: 100vh;
	background: #121212;
	padding: 1em;
	overflow: hidden;
}

.background-wrapper {
	position: relative;
	width: 100%;
	height: 100%;
	user-select: none;
	h1 {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%) rotate(-45deg);
		font-family: "Eczar";
		font-size: 60vmax;
		color: #282828;
		letter-spacing: 0.025em;
		margin: 0;
		transition: 750ms ease-in-out;
	}
}

a {
	border: 2px solid #555;
	padding: 0.5em 0.8em;
	position: fixed;
	z-index: 1;
	color: #555;
	text-decoration: none;
	display: flex;
	align-items: center;
	transition: 150ms;
	svg > polyline {
		transition: 150ms;
	}
	&:hover {
		color: #333;
		background: #dadada;
		border-color:transparent;
		svg > polyline {
			stroke: #000;
		}
		+ .background-wrapper > h1 {
			color: #dadada;
		}
	}
}

p {
	color: #dadada;
	font-size: calc(1em + 3vmin);
	position: fixed;
	bottom: 1rem;
	right: 1.5rem;
	margin: 0;
	text-align: right;
	text-shadow: -1px -1px 0 #121212, 1px 1px 0 #121212, -1px 1px 0 #121212, 1px -1px 0 #121212;
	@media screen and (min-width: 340px) {
		width: 70%;
	}
	@media screen and (min-width: 560px) {
		width: 50%;
	}
	@media screen and (min-width: 940px) {
		width: 30%;
	}
	@media screen and (min-width: 1300px) {
		width: 25%;
	}}

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

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