@import "tailwindcss";

@layer base {
  html {
    color-scheme: dark;
  }
  body {
    background-color: #000;
    color: #fff;
    font-family: 'Courier New', Courier, monospace;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10% { transform: translateX(-4px) skewX(-0.5deg); }
  20% { transform: translateX(4px) skewX(0.5deg); }
  30% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  50% { transform: translateX(-2px) skewX(-0.3deg); }
  60% { transform: translateX(2px); }
  70% { transform: translateX(-1px); }
  80% { transform: translateX(1px); }
  90% { transform: translateX(0); }
}

.animate-shake {
  animation: shake 0.5s ease-in-out;
}