@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: #191d21;
  --color: #d3d3d3;
  --muted: #6c757d;
  --lightning: #fada5e;
  --nostr: #8d45dd;
  --black: #000;
  --white: #fff;
  --bg-success: #149e613d;
  --fg-success: #35df8d;
  --bg-error: #f5395e3d;
  --fg-error: #ff7386;
  --bg-btn: #ebebeb;
  --fg-btn: #0a0a0a;
}

@layer base {
  body {
    background-color: var(--background);
    color: var(--color);
    font-family: Roboto, -apple-system, Helvetica Neue, Helvetica, Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
  }

  #content {
    min-height: 85svh;
  }

  @media (min-width: 768px) {
    #content {
      min-height: 90svh;
    }
  }

  button {
    background-color: var(--bg-btn);
    color: var(--fg-btn);
    border-radius: 28px;
    outline: 0;
    min-height: 2rem;
    padding: 0 1rem;
  }

  button:hover {
    filter: brightness(130%) drop-shadow(0 0 0.3em var(--bg-btn));
  }
}