@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&family=Noto+Sans+Mono:wght@400;700&display=swap");

@import url("./bottom-bar.css");
@import url("./editor.css");
@import url("./sidebar.css");
@import url("./over-keyboard-bar.css");
@import url("./command-palette.css");

:root {
  --background: #171717;
  --background-secondary: #232323;
  --font-color: #f8f8f8;
  --font-color-secondary: #9b9b9b;
  --highlight: #ffffff41;
  --highlight-danger: #ff0000c9;
}

html,
body {
  color: var(--font-color);
  background-color: var(--background);

  display: flex;
  width: 100vw;
  height: 100vh;
  margin: 0;
  font-family: "Noto Sans", sans-serif;
}

/* button */

button {
  background-color: transparent;
  color: var(--font-color-secondary);

  padding: 4px 8px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: var(--highlight);
}

* {
  scrollbar-color: var(--background-secondary) var(--background);
}