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

:root {
  --secondary-dark: rgb(37, 37, 38);
  --vsc-background: rgb(30, 30, 30);
  --button-color: rgb(113, 28, 59);
  --button-color-hover: rgba(113, 28, 59, 0.667);
  --def-border-radius: 5px;

  --vscode-editor-background: rgb(30, 30, 30);
  --vscode-editor-foreground: rgb(197, 200, 198);
  --vscode-textBlockQuote-background: rgba(255, 255, 255, 1);
}

html,
body,
#root {
  height: 100%;
  background-color: var(--vscode-editor-background);
  font-family:
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

body {
  padding: 0;
  color: var(--vscode-editor-foreground);
  padding: 0px;
  margin: 0px;
  height: 100%;
}

a:focus {
  outline: none;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in-span {
  animation: fadeIn 0.3s ease-in-out;
}