body{
     background-image: url(/PICTURES/static\ gif.gif);
     cursor: pointer;
     line-height: 1.5;
    }
.container {
    display:grid;
    gap: 10px;
    max-width: 1200px;
    margin: auto;
    position: relative;
    grid-template-rows: repeat(2, 1fr);
    justify-content: center;
    grid-template-areas: 
        "poster"
        "juno";
}

.item1 {
    grid-area: poster;
    max-height: 50px;
}

.item2 {
    grid-area: juno;
    max-height: 150px;
}

 .center {
     display: flex;
     width: 100vw;
     height: 100vh;
     background: 
         color (black) ;
         image= linear-gradient(
         rgba(0, 0, 0, 0.55), 
         rgba(0, 0, 0, 0.55)
         ), url(https://s32.postimg.org/jp6u2kyf9/image.jpg);
         repeat no-repeat;
         position: center;
         size: cover;
    }

.center-text {
     margin: auto;
     font-family: 'Source Sans Pro', sans-serif;
     font-size: 80px;
     text-transform: uppercase;
    }

 .glitch {
     position: relative;
     color: white;
     mix-blend-mode: lighten;
     &:before,
     &:after {
         content: attr(data-text);
         position: absolute;
         top: 0;
         width: 100%;
         background: black;
         clip: rect(0, 0, 0, 0);
            }
            
        &:before {
             left: -1px;
             text-shadow: 1px 0 rgba(red,0.7);
            }

        &:after {
             left: 1px;
             text-shadow: -1px 0 rgba(blue,0.7);
            }

         &:hover {
             &:before {
             text-shadow: 4px 0 rgba(red,0.7);
             animation: glitch-loop-1 0.8s infinite ease-in-out alternate-reverse;
             }
             &:after {
             text-shadow: -5px 0 rgba(blue,0.7);
             animation: glitch-loop-2 0.8s infinite ease-in-out alternate-reverse;
             }
            }
            }

     @keyframes glitch-loop-1 {
        0% { clip: rect(36px, 9999px, 9px, 0) }
        25% { clip: rect(25px, 9999px, 99px, 0) }
        50% { clip: rect(50px, 9999px, 102px, 0) }
        75% { clip: rect(30px, 9999px, 92px, 0) }
        100% { clip: rect(91px, 9999px, 98px, 0) }
        }
     @keyframes glitch-loop-2 {
        0% { top: -1px; left: 1px; clip: rect(65px, 9999px, 119px, 0) }
        25% { top: -6px; left: 4px; clip: rect(79px, 9999px, 19px, 0) }
        50% { top: -3px; left: 2px; clip: rect(68px, 9999px, 11px, 0) }
        75% { top: 0px; left: -4px; clip: rect(95px, 9999px, 53px, 0) }
        100% { top: -1px; left: -1px; clip: rect(31px, 9999px, 149px, 0) }
        }