:root {
  --shake: 2px;
  --shake-angle: 2deg;
}

body {
  background-color: #1c1a1a;
  overflow: hidden;
}

.layer {
  display: grid;
  place-items: center;
  height: 100dvh;
}

.logo {
  width: 50vh;

  filter: blur(40px) contrast(0);
  transition: 300ms filter;
}

.logo:hover {
  cursor: pointer;

  filter: blur(0px);
  transition: 300ms filter;

  animation: shaking 200ms infinite;
}

@keyframes shaking {
  0% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(var(--shake), var(--shake)) rotate(var(--shake-angle));
  }
  50% {
    transform: translate(0, 0) rotate(0eg);
  }
  75% {
    transform: translate(calc(var(--shake) * -1), var(--shake))
      rotate(calc(var(--shake-angle) * -1));
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}