<header class="header">
	<h1 class="glitched">Glitch</h1>
</header>
<a class="inspiration-button" href="http://www.theverge.com/a/luka-artificial-intelligence-memorial-roman-mazurenko-bot" target="_blank">Inspiration</a>

$background-color: #F9F8F8;
$headline-color: #222222;
*{
	box-sizing: border-box;
}
body{
	font-family: 'Raleway', sans-serif;
	background: $background-color;
}
header.header{
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	transform: translateY(-50%);
	h1{
		font-size: 8rem;
		color: $headline-color;
		text-align: center;
		margin-top: 0;
		text-transform: uppercase;
		font-weight: 900;
	}
}
.glitch-window{
	position: absolute;
	top: 0;
	left: -2px;
	width: 100%;
	color: $headline-color;
	text-shadow: 2px 0 $background-color, -1px 0 yellow, -2px 0 green;
	overflow: hidden;
	animation: crt-me 2500ms infinite linear alternate-reverse;
	// background: red;
}

//Animation Keyframes
@keyframes crt-me {
	 0% {
        clip: rect(31px, 9999px, 94px, 0)
    }
    10% {
        clip: rect(112px, 9999px, 76px, 0)
    }
    20% {
        clip: rect(85px, 9999px, 77px, 0)
    }
    30% {
        clip: rect(27px, 9999px, 97px, 0)
    }
    40% {
        clip: rect(64px, 9999px, 98px, 0)
    }
    50% {
        clip: rect(61px, 9999px, 85px, 0)
    }
    60% {
        clip: rect(99px, 9999px, 114px, 0)
    }
    70% {
        clip: rect(34px, 9999px, 115px, 0)
    }
    80% {
        clip: rect(98px, 9999px, 129px, 0)
    }
    90% {
        clip: rect(43px, 9999px, 96px, 0)
    }
    100% {
        clip: rect(82px, 9999px, 64px, 0)
    }
    
}



//Inspiration Button
.inspiration-button{
	font-family: Helvetica, sans-serif;
	position: fixed;
	display: inline-block;
	z-index: 100;
	bottom: 1rem;
	left: 50%;
	transform: translate(-50%, 0%);
	color: white;
	text-decoration: none;
	padding: 0.75rem 1rem;
	border-radius: 80px;
	background: linear-gradient(270deg,#1e80dc,#c61590);
	//From Instagram...thanks
	transition: transform 250ms ease;
	&:hover, &:focus, &:active{
		transform: translate(-50%, -10%);

	}
}

$("header").append("<div class='glitch-window'></div>");
//fill div with clone of real header
$( "h1.glitched" ).clone().appendTo( ".glitch-window" );