// Ignore all of this, scroll down until you see the next comment. // I just like my eye candy. @import url('https://fonts.googleapis.com/css?family=Montserrat:100');

html, body, h1 { padding: 0; margin: 0; font-family: 'Montserrat', sans-serif; }

#app { background: rgb(10,10,10); height: 100vh; width: 100%; margin: 0; padding: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(rgba(10,10,10,.6),rgba(0,0,0,.9)), repeating-linear-gradient(0, transparent, transparent 2px, black 3px, black 3px), url('https://images.unsplash.com/photo-1506399558188-acca6f8cbf41?ixlib=rb-0.3.5&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7118759521e3184778a3b5e010e202c6'); background-size: cover; background-position: center; z-index: 1; }

#wrapper { text-align: center; }

.sub { color: rgb(100,220,220); letter-spacing: 1em; }

// Here's the meat and potatoes.

/* Our mixin positions a copy of our text directly on our existing text, while also setting content to the appropriate text set in the data-text attribute. */ @mixin glitchCopy { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.glitch { position: relative; color: white; font-size: 4em; letter-spacing: .5em; /* Animation provies a slight random skew. Check bottom of doc for more information on how to random skew. */ animation: glitch-skew 1s infinite linear alternate-reverse;

}

/* Creates an animation with 20 steaps. For each step, it calculates a percentage for the specific step. It then generates a random clip box to be used for the random glitch effect. Also adds a very subtle skew to change the 'thickness' of the glitch./ @keyframes glitch-anim { $steps: 20; @for $i from 0 through $steps { #{percentage($i(1/$steps))} { clip: rect(random(100)+px, 9999px, random(100)+px, 0); transform: skew((random(100) / 100) + deg); } } }

// Same deal, just duplicated for ultra randomness. @keyframes glitch-anim2 { $steps: 20; @for $i from 0 through $steps { #{percentage($i*(1/$steps))} { clip: rect(random(100)+px, 9999px, random(100)+px, 0); transform: skew((random(100) / 100) + deg); } } }

// Does the same deal as before, but now only skews. Used for main text. @keyframes glitch-skew { $steps: 10; @for $i from 0 through $steps { #{percentage($i*(1/$steps))} { transform: skew((random(10) - 5) + deg); } } }