@font-face{font-family:Open Sans;src:url(/longreads/fonts/OpenSans-Variable.woff2) format("woff2"),url(/longreads/fonts/OpenSans-Variable.woff) format("woff");font-weight:400;font-display:swap}@font-face{font-family:Open Sans;src:url(/longreads/fonts/Open-Italic-Sans-Variable.woff2) format("woff2"),url(/longreads/fonts/Open-Italic-Sans-Variable.woff) format("woff");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:Roboto Mono;src:url(/longreads/fonts/RobotoMono-Regular.woff2) format("woff2"),url(/longreads/fonts/RobotoMono-Regular.woff) format("woff");font-style:normal;font-display:swap}:root{--main-bg-color: #222;--main-text-color: #fcfcfc;--unix-color: #8ae234;--font-sans: "Open Sans", Helvetica, Arial, sans-serif;--font-mono: "Roboto Mono", Consolas, monaco, monospace}body{margin:0;padding:0;color:var(--main-text-color);font-size:16px;line-height:1.2;background:var(--main-bg-color)}.container{max-width:920px;margin:0 auto}.jumbotron{padding:1%;max-width:800px;margin:0 auto;height:690px}.jumbotron header{background-image:url(/longreads/images/it-mensen/monitor.png);background-repeat:no-repeat;background-position:center;background-size:contain;height:400px;display:flex;justify-content:center;align-items:center}.jumbotron header h1{font-family:var(--font-sans);flex:0 0 120px;margin-bottom:120px}@media screen and (max-width:700px){body{padding:2%}.jumbotron{padding:0;height:800px}.jumbotron header{height:430px;background-position:unset;background-size:contain}.jumbotron header h1{margin-top:10px;font-size:1.8rem;font-size:clamp(1.5rem,5vw,1.8rem)}}.jumbotron h2{color:var(--unix-color);font-family:var(--font-mono);padding:.5% 0 .5% 1.5%;font-size:2rem;font-size:clamp(1.7rem,5vw,2rem);text-indent:-.5em;margin:20px 0 3%}.jumbotron .intro{color:var(--unix-color);font-family:var(--font-mono)}.jumbotron .intro p{margin:10px 0 0 10px;display:inline-block;font-size:1.3rem;font-size:clamp(1rem,5vw,1.3rem)}.jumbotron .intro p span.blink{animation:blink 1.2s infinite;font-weight:700}::selection{background:#000}:focus{outline:2px dotted var(--unix-color)}article{max-width:700px;margin:3% auto 0}article p{font-family:var(--font-sans);font-size:1.2rem;font-size:clamp(1rem,5vw,1.2rem);line-height:1.4}article h3{font-family:var(--font-mono);font-size:1.4rem;font-size:clamp(1.2rem,5vw,1.6rem);color:var(--unix-color);line-height:1.5;margin:30px 0 0}.credits{font-family:var(--font-mono);margin:3% 0}@keyframes type{0%{width:0}}@keyframes type2{0%{width:0}50%{width:0}to{width:100}}@keyframes blink{to{opacity:0}}.glitch{position:relative;color:#fff;font-size:2em;letter-spacing:.3em;animation:glitch-skew 1s infinite linear alternate-reverse}.glitch:before{content:attr(data-text);position:absolute;top:0;width:100%;height:100%;left:2px;text-shadow:-2px 0 #ff00c1;clip:rect(44px,450px,56px,0);animation:glitch-anim 5s infinite linear alternate-reverse}.glitch:after{content:attr(data-text);position:absolute;top:0;width:100%;height:100%;left:-2px;text-shadow:-2px 0 #00fff9,2px 2px #ff00c1;animation:glitch-anim2 1s infinite linear alternate-reverse}@keyframes glitch-anim{0%{clip:rect(41px,9999px,99px,0);transform:skew(.12deg)}5%{clip:rect(69px,9999px,43px,0);transform:skew(.22deg)}10%{clip:rect(85px,9999px,48px,0);transform:skew(.26deg)}15%{clip:rect(77px,9999px,20px,0);transform:skew(.38deg)}20%{clip:rect(37px,9999px,51px,0);transform:skew(.23deg)}25%{clip:rect(44px,9999px,49px,0);transform:skew(.29deg)}30%{clip:rect(3px,9999px,82px,0);transform:skew(.41deg)}35%{clip:rect(39px,9999px,61px,0);transform:skew(.27deg)}40%{clip:rect(62px,9999px,3px,0);transform:skew(.91deg)}45%{clip:rect(73px,9999px,52px,0);transform:skew(.63deg)}50%{clip:rect(18px,9999px,98px,0);transform:skew(.82deg)}55%{clip:rect(79px,9999px,29px,0);transform:skew(.86deg)}60%{clip:rect(84px,9999px,57px,0);transform:skew(.28deg)}65%{clip:rect(15px,9999px,40px,0);transform:skew(.26deg)}70%{clip:rect(82px,9999px,93px,0);transform:skew(.47deg)}75%{clip:rect(24px,9999px,7px,0);transform:skew(.16deg)}80%{clip:rect(51px,9999px,50px,0);transform:skew(.18deg)}85%{clip:rect(47px,9999px,14px,0);transform:skew(.54deg)}90%{clip:rect(87px,9999px,82px,0);transform:skew(.66deg)}95%{clip:rect(61px,9999px,80px,0);transform:skew(.14deg)}to{clip:rect(35px,9999px,83px,0);transform:skew(.13deg)}}@keyframes glitch-anim2{0%{clip:rect(20px,9999px,10px,0);transform:skew(.28deg)}5%{clip:rect(56px,9999px,20px,0);transform:skew(.92deg)}10%{clip:rect(97px,9999px,45px,0);transform:skew(.29deg)}15%{clip:rect(14px,9999px,28px,0);transform:skew(.59deg)}20%{clip:rect(73px,9999px,29px,0);transform:skew(.36deg)}25%{clip:rect(5px,9999px,34px,0);transform:skew(.62deg)}30%{clip:rect(100px,9999px,51px,0);transform:skew(.53deg)}35%{clip:rect(52px,9999px,85px,0);transform:skew(.66deg)}40%{clip:rect(96px,9999px,1px,0);transform:skew(.5deg)}45%{clip:rect(7px,9999px,96px,0);transform:skew(.83deg)}50%{clip:rect(55px,9999px,4px,0);transform:skew(.56deg)}55%{clip:rect(48px,9999px,31px,0);transform:skew(.04deg)}60%{clip:rect(32px,9999px,17px,0);transform:skew(.85deg)}65%{clip:rect(89px,9999px,55px,0);transform:skew(.06deg)}70%{clip:rect(36px,9999px,67px,0);transform:skew(.04deg)}75%{clip:rect(71px,9999px,54px,0);transform:skew(.34deg)}80%{clip:rect(44px,9999px,5px,0);transform:skew(.57deg)}85%{clip:rect(25px,9999px,27px,0);transform:skew(.59deg)}90%{clip:rect(70px,9999px,49px,0);transform:skew(.95deg)}95%{clip:rect(70px,9999px,5px,0);transform:skew(.03deg)}to{clip:rect(61px,9999px,98px,0);transform:skew(.35deg)}}@keyframes glitch-skew{0%{transform:skew(-3deg)}10%{transform:skew(2deg)}20%{transform:skew(-1deg)}30%{transform:skew(-2deg)}40%{transform:skew(-1deg)}50%{transform:skew(5deg)}60%{transform:skew(-4deg)}70%{transform:skew(0)}80%{transform:skew(3deg)}90%{transform:skew(5deg)}to{transform:skew(2deg)}}