<div class="screen">
<div class="screen">
<div id="display" class="display">
<div class="buffer" style="filter: url(#displacement); -webkit-filter: url(#displacement);">In the beginning, there was man. And for a time, it was <a href="#">good</a>. But humanity's so-called civil societies soon fell victim to vanity and corruption. Then man made Internet Explorer. Thus did man become the architect of his own demise.</div>
</div></div><svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="displacement" filterUnits="objectBoundingBox">
<feImage result="dmap" xlink:href="http://i.imgur.com/ZRwGP4m.png" />
<feDisplacementMap in="SourceGraphic" in2="dmap" scale="48" xChannelSelector="R" yChannelSelector="G" color-interpolation-filters="sRGB"></feDisplacementMap>
</filter></svg>@import url("//fonts.googleapis.com/css?family=VT323");
@import url("//fonts.googleapis.com/css?family=VT323");
* {margin: 0;
font-family: "VT323", monospace;
color: #8cff30;
}
body {font-size: 28px;
}
.screen {position: fixed;
width: 100%;
height: 100%;
background: linear-gradient(-10deg, #181818, #050b05);
}
.display {width: 512px;
height: 512px;
overflow-y: auto;
padding: 0;
position: relative;
top: 50vh;
left: 50vw;
transform: translate(-50%,-50%);
box-sizing: border-box;
background-image: linear-gradient(180deg, rgb(4,0,3), rgb(16,18,12));
box-shadow: inset 0 0 2vmin #0F180F, 0 0 3vmin #0F180F;
}
.display:after {
background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(12,16,3,1) 50%, rgba(0,0,0,0) 100%), url(http://media.giphy.com/media/daEjQKgKDFqxO/giphy.gif);
background-size: 100% 0.5vh, cover;
background-repeat: repeat;
content: " ";
display: block;
height: 100%;
left: 0;
opacity: 0.08;
position: absolute;
top: 0;
width: 100%;
}
.buffer {background-image: linear-gradient(0deg,#000,#010,#000);
background-size: 100% 0.8%;
box-sizing: border-box;
height: 100%;
left: -0.15em;
overflow: hidden;
padding: 0.5em;
position: relative;
top: -0.15em;
}
.buffer:after {
left: 0;
content: " ";
background-color: rgba(192,255,192,0.02);
box-shadow: 0 0 2em 0.5em rgba(0,0,0,0.4);
display: block;
height: 10vh;
position: absolute;
width: 100%;
animation: shutter 4s reverse infinite linear;
}
@keyframes shutter {
0% { top: -5em; }
100% { top: 25em; }
}
.flashing {animation: glow 0.04s infinite;
}
@keyframes glow {
0% { text-shadow: 0 0 0.1vmin #8cff30; }
50% { text-shadow: 0 0 1vmin rgba(0, 255, 0, 0); }
100% { text-shadow: 0 0 0.1vmax #8cff30; }
}