html {
    height: 100%;
}

body {
    /*animation: glitch 1s linear infinite;*/
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    /*background-image: url('./bg_eyes.jpg');*/
    background-size: cover;
    background-position: center;
    /*border: 1px solid blue;*/
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card {
    height: 15rem;
    line-height: 9rem;
    width: 44rem;
    /*border: 1px solid red;*/
    backdrop-filter: blur(0.4rem);
    background: rgba(255,255,255,0.1);
    box-shadow: 0.6rem 0.5rem 0.5rem rgba(0,0,0,0.6);
    border-radius: 2rem;
    text-align: center;
    vertical-align: middle;
    transition: transform .2s;
    animation: move 15s infinite;
}
.card:hover{
    /*animation-play-state: paused;*/
    transform: scale(2.5);
    backdrop-filter: blur(0.7rem);
    cursor: default; 
    animation: move2 15s infinite scale(10);
}
.card h1{
    font-size: 5rem;
    /*color: rgba(255,255,255,0.5);*/
    text-shadow: 0.6rem 0.5rem 0.5rem rgba(0,0,0,0.6);
}
.card span{
  font-size: 5rem;
  text-shadow: 0.6rem 0.5rem 0.5rem rgba(0,0,0,0.6);
}
@keyframes move{
    10%, 90% {
      transform: skew(1deg) rotate(2deg) scale(0.9);
      color: rgba(0, 0, 0, 0.5);
    }
    20%, 80% {
      transform: skew(-1deg) rotate(-2deg) scale(1.0);
      color: rgba(94, 94, 94, 0.5);
    }
    30%, 70% {
      transform: skew(2deg) rotate(3deg) scale(0.9);
      color: rgba(170, 170, 170, 0.5);
    }
    40%, 60% {
      transform: skew(-2deg) rotate(-3deg) scale(1.0);
      color: rgba(255,255,255,0.5);
    }
    50% {
      transform: skew(5deg) rotate(1deg) scale(0.9);
      color: rgba(255,255,255,0.3);
    }
}@keyframes move2{
  10%, 90% {
    transform: skew(1deg) rotate(2deg) scale(1.9);
    color: rgba(0, 0, 0, 0.5);
  }
  20%, 80% {
    transform: skew(-1deg) rotate(-2deg) scale(2.0);
    color: rgba(94, 94, 94, 0.5);
  }
  30%, 70% {
    transform: skew(2deg) rotate(3deg) scale(1.9);
    color: rgba(170, 170, 170, 0.5);
  }
  40%, 60% {
    transform: skew(-2deg) rotate(-3deg) scale(2.0);
    color: rgba(255,255,255,0.5);
  }
  50% {
    transform: skew(5deg) rotate(1deg) scale(1.9);
    color: rgba(255,255,255,0.3);
  }
}
@keyframes glitch{
    2%,64%{
      transform: translate(2px,0) skew(0deg);
    }
    4%,60%{
      transform: translate(-2px,0) skew(0deg);
    }
    62%{
      transform: translate(0,0) skew(5deg); 
    }
  }
  
  div:before,
  div:after{
    content: attr(title);
    position: absolute;
    left: 0;
  }
  
  div:before{
    animation: glitchTop 1s linear infinite;
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
  }
  
  @keyframes glitchTop{
    2%,64%{
      transform: translate(2px,-2px);
    }
    4%,60%{
      transform: translate(-2px,2px);
    }
    62%{
      transform: translate(13px,-1px) skew(-13deg); 
    }
  }
  
  div:after{
    animation: glitchBotom 1.5s linear infinite;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
    -webkit-clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
  }
  
  @keyframes glitchBotom{
    2%,64%{
      transform: translate(-2px,0);
    }
    4%,60%{
      transform: translate(-2px,0);
    }
    62%{
      transform: translate(-22px,5px) skew(21deg); 
    }
  }