@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: normal;
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: normal;
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;
}

/* Apple Computer photo from https://unsplash.com/photos/VeUSCLJrLf4
 Unsplash grants you an irrevocable, nonexclusive, worldwide copyright license to download, copy, modify, distribute, perform, and use photos from Unsplash for free, including for commercial purposes, without permission from or attributing the photographer or Unsplash.  */

 .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: -0.5em;
    margin: 20px 0 3% 0;
}

.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: bold;
}

@keyframes blink {
    to {
        opacity: .0;
    }
}

::selection {
    background: black;
}

:focus {
    outline: 2px dotted var(--unix-color);
}


article {
    max-width: 700px;
    margin: 0 auto;
    margin-top: 3%;
}

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 0;
}


.credits {
    font-family: var(--font-mono);
    margin: 3% 0;
}

/*####################################################################
######################################################################
 ############################ CSS ANIMATIONS #########################
######################################################################
###################################################################### */


@keyframes type {
    from {
        width: 0;
    }
}

@keyframes type2 {
    0% {
        width: 0;
    }

    50% {
        width: 0;
    }

    100% {
        width: 100;
    }
}

@keyframes blink {
    to {
        opacity: .0;
    }
}





/* 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. */
.glitch {
    position: relative;
    color: white;
    font-size: 2em;
    letter-spacing: 0.3em;
    /* 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;
}

.glitch::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: 2px;
    text-shadow: -2px 0 #ff00c1;
    /* Creates an initial clip for our glitch. This works in
    a typical top,right,bottom,left fashion and creates a mask
    to only show a certain part of the glitch at a time. */
    clip: rect(44px, 450px, 56px, 0);
    /* Runs our glitch-anim defined below to run in a 5s loop, infinitely,
    with an alternating animation to keep things fresh. */
    animation: glitch-anim 5s infinite linear alternate-reverse;
}

.glitch::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    left: -2px;
    text-shadow: -2px 0 #00fff9, 2px 2px #ff00c1;
    animation: glitch-anim2 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 {
    0% {
        clip: rect(41px, 9999px, 99px, 0);
        transform: skew(0.12deg);
    }

    5% {
        clip: rect(69px, 9999px, 43px, 0);
        transform: skew(0.22deg);
    }

    10% {
        clip: rect(85px, 9999px, 48px, 0);
        transform: skew(0.26deg);
    }

    15% {
        clip: rect(77px, 9999px, 20px, 0);
        transform: skew(0.38deg);
    }

    20% {
        clip: rect(37px, 9999px, 51px, 0);
        transform: skew(0.23deg);
    }

    25% {
        clip: rect(44px, 9999px, 49px, 0);
        transform: skew(0.29deg);
    }

    30% {
        clip: rect(3px, 9999px, 82px, 0);
        transform: skew(0.41deg);
    }

    35% {
        clip: rect(39px, 9999px, 61px, 0);
        transform: skew(0.27deg);
    }

    40% {
        clip: rect(62px, 9999px, 3px, 0);
        transform: skew(0.91deg);
    }

    45% {
        clip: rect(73px, 9999px, 52px, 0);
        transform: skew(0.63deg);
    }

    50% {
        clip: rect(18px, 9999px, 98px, 0);
        transform: skew(0.82deg);
    }

    55% {
        clip: rect(79px, 9999px, 29px, 0);
        transform: skew(0.86deg);
    }

    60% {
        clip: rect(84px, 9999px, 57px, 0);
        transform: skew(0.28deg);
    }

    65% {
        clip: rect(15px, 9999px, 40px, 0);
        transform: skew(0.26deg);
    }

    70% {
        clip: rect(82px, 9999px, 93px, 0);
        transform: skew(0.47deg);
    }

    75% {
        clip: rect(24px, 9999px, 7px, 0);
        transform: skew(0.16deg);
    }

    80% {
        clip: rect(51px, 9999px, 50px, 0);
        transform: skew(0.18deg);
    }

    85% {
        clip: rect(47px, 9999px, 14px, 0);
        transform: skew(0.54deg);
    }

    90% {
        clip: rect(87px, 9999px, 82px, 0);
        transform: skew(0.66deg);
    }

    95% {
        clip: rect(61px, 9999px, 80px, 0);
        transform: skew(0.14deg);
    }

    100% {
        clip: rect(35px, 9999px, 83px, 0);
        transform: skew(0.13deg);
    }
}

@keyframes glitch-anim2 {
    0% {
        clip: rect(20px, 9999px, 10px, 0);
        transform: skew(0.28deg);
    }

    5% {
        clip: rect(56px, 9999px, 20px, 0);
        transform: skew(0.92deg);
    }

    10% {
        clip: rect(97px, 9999px, 45px, 0);
        transform: skew(0.29deg);
    }

    15% {
        clip: rect(14px, 9999px, 28px, 0);
        transform: skew(0.59deg);
    }

    20% {
        clip: rect(73px, 9999px, 29px, 0);
        transform: skew(0.36deg);
    }

    25% {
        clip: rect(5px, 9999px, 34px, 0);
        transform: skew(0.62deg);
    }

    30% {
        clip: rect(100px, 9999px, 51px, 0);
        transform: skew(0.53deg);
    }

    35% {
        clip: rect(52px, 9999px, 85px, 0);
        transform: skew(0.66deg);
    }

    40% {
        clip: rect(96px, 9999px, 1px, 0);
        transform: skew(0.5deg);
    }

    45% {
        clip: rect(7px, 9999px, 96px, 0);
        transform: skew(0.83deg);
    }

    50% {
        clip: rect(55px, 9999px, 4px, 0);
        transform: skew(0.56deg);
    }

    55% {
        clip: rect(48px, 9999px, 31px, 0);
        transform: skew(0.04deg);
    }

    60% {
        clip: rect(32px, 9999px, 17px, 0);
        transform: skew(0.85deg);
    }

    65% {
        clip: rect(89px, 9999px, 55px, 0);
        transform: skew(0.06deg);
    }

    70% {
        clip: rect(36px, 9999px, 67px, 0);
        transform: skew(0.04deg);
    }

    75% {
        clip: rect(71px, 9999px, 54px, 0);
        transform: skew(0.34deg);
    }

    80% {
        clip: rect(44px, 9999px, 5px, 0);
        transform: skew(0.57deg);
    }

    85% {
        clip: rect(25px, 9999px, 27px, 0);
        transform: skew(0.59deg);
    }

    90% {
        clip: rect(70px, 9999px, 49px, 0);
        transform: skew(0.95deg);
    }

    95% {
        clip: rect(70px, 9999px, 5px, 0);
        transform: skew(0.03deg);
    }

    100% {
        clip: rect(61px, 9999px, 98px, 0);
        transform: skew(0.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(0deg);
    }

    80% {
        transform: skew(3deg);
    }

    90% {
        transform: skew(5deg);
    }

    100% {
        transform: skew(2deg);
    }
}