@layer base, utils, components;

/* base.css */
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/base.css";

/* utils/box.css */
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/utils/box.css";

/* components */
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/badge.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/button.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/checkbox.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/dialog.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/input.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/popover.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/pre.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/progress.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/radio.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/range.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/separator.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/spinner.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/switch.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/table.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/textarea.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/tooltip.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/typography.css";
@import "https://cdn.jsdelivr.net/npm/@webtui/css@latest/dist/components/view.css";

:root {
  --font-family:
    "JetBrains Mono", monospace, Menlo, Monaco, monospace, "Symbols Nerd Font";
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
    "Courier New", monospace;
  --font-size: 14px;
  --line-height: 1.5;
}

body, html {
  /*
  width: 100vw;
   */
  height: 100vh;
  display: flex;
  flex-direction: column;
}

pre,
.wt-pre,
code {
  font-family: var(--font-mono);
}

/* Terminal Scrollbar */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--background0);
  border: 1px solid var(--background1);
}

::-webkit-scrollbar-thumb {
  background: var(--background2);
  border: 1px solid var(--background1);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--background3);
}

::-webkit-scrollbar-corner {
  background: var(--background0);
}

/* Terminal Selection */
::selection {
  background-color: var(--foreground2);
  color: var(--background0);
}

::-moz-selection {
  background-color: var(--foreground2);
  color: var(--background0);
}

a {
  color: #61afef;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.ascii-art-container {
  text-align: center;
}

@media (max-width: 768px) {
  .ascii-art-container {
    font-size: 1.5vw;
    letter-spacing: -1px;
  }
}