:root {
  --accent-blue: #3584e4;
  --accent-teal: #2190a4;
  --accent-green: #3a944a;
  --accent-yellow: #c88800;
  --accent-orange: #ed5b00;
  --accent-red: #e62d42;
  --accent-pink: #d56199;
  --accent-purple: #9141ac;
  --accent-slate: #6f8396;
}

:root {
  --blue-1: #99c1f1;
  --blue-2: #62a0ea;
  --blue-3: #3584e4;
  --blue-4: #1c71d8;
  --blue-5: #1a5fb4;
  --green-1: #8ff0a4;
  --green-2: #57e389;
  --green-3: #33d17a;
  --green-4: #2ec27e;
  --green-5: #26a269;
  --yellow-1: #f9f06b;
  --yellow-2: #f8e45c;
  --yellow-3: #f6d32d;
  --yellow-4: #f5c211;
  --yellow-5: #e5a50a;
  --orange-1: #ffbe6f;
  --orange-2: #ffa348;
  --orange-3: #ff7800;
  --orange-4: #e66100;
  --orange-5: #c64600;
  --red-1: #f66151;
  --red-2: #ed333b;
  --red-3: #e01b24;
  --red-4: #c01c28;
  --red-5: #a51d2d;
  --purple-1: #dc8add;
  --purple-2: #c061cb;
  --purple-3: #9141ac;
  --purple-4: #813d9c;
  --purple-5: #613583;
  --brown-1: #cdab8f;
  --brown-2: #b5835a;
  --brown-3: #986a44;
  --brown-4: #865e3c;
  --brown-5: #63452c;
  --light-1: #ffffff;
  --light-2: #ebebed;
  --light-3: #deddda;
  --light-4: #c0bfbc;
  --light-5: #9a9996;
  --dark-1: #77767b;
  --dark-2: #5e5c64;
  --dark-3: #3d3846;
  --dark-4: #241f31;
  --dark-5: #000000;
}

:root {
  --setka-1: #bfbfbf;
  --setka-2: #d9d9d9;
  --workspace-bg: #E3E3E1;
  --theme-dark: opacity(65%);
  --console-bg: rgb(228, 228, 228);
  --console-bg-2: rgb(90, 90, 90);
  --outline: #82b0de;

  --coolicon-bg: #e0e0e1;
  --coolicon-fg: brightness(0) saturate(100%) invert(35%) sepia(6%) saturate(247%) hue-rotate(202deg) brightness(94%) contrast(87%);

  --star-full: brightness(0) saturate(100%) invert(69%) sepia(77%) saturate(3924%) hue-rotate(14deg) brightness(110%) contrast(92%);
  --star-empty: brightness(0) saturate(100%) invert(79%) sepia(20%) saturate(0%) hue-rotate(292deg) brightness(108%) contrast(89%);

  --theme-invert: 0;
  --theme-brightness: 110%;

  --accent-bg-color: #3584e4;
  --accent-bg-color-hover: #4990e7;
  --accent-bg-color-active: #2a6ab8;
  --accent-fg-color: #ffffff;

  --destructive-bg-color: #e01b24;
  --destructive-fg-color: #ffffff;

  --success-bg-color: #2ec27e;
  --success-fg-color: #ffffff;

  --warning-bg-color: #e5a50a;
  --warning-fg-color: rgb(0 0 0 / 80%);

  --error-bg-color: #e01b24;
  --error-fg-color: #ffffff;

  --window-bg-color: #fafafb;
  --window-fg-color: rgb(0 0 6 / 80%);
  --window-fg-alt-color: #a7a7a9;

  --view-bg-color: #ffffff;
  --view-fg-color: rgb(0 0 6 / 80%);

  --headerbar-bg-color: #ffffff;
  --headerbar-fg-color: rgb(0 0 6 / 80%);
  --headerbar-border-color: rgb(0 0 6 / 80%);
  --headerbar-backdrop-color: #fafafb;
  --headerbar-shade-color: rgb(0 0 6 / 12%);
  --headerbar-darker-shade-color: rgb(0 0 6 / 12%);

  --sidebar-bg-color: #ebebed;
  --sidebar-fg-color: rgb(0 0 6 / 80%);
  --sidebar-backdrop-color: #f2f2f4;
  --sidebar-border-color: rgb(0 0 6 / 10%);
  --sidebar-shade-color: rgb(0 0 6 / 10%);

  --secondary-sidebar-bg-color: #f3f3f5;
  --secondary-sidebar-fg-color: rgb(0 0 6 / 80%);
  --secondary-sidebar-backdrop-color: #f6f6fa;
  --secondary-sidebar-border-color: rgb(0 0 6 / 7%);
  --secondary-sidebar-shade-color: rgb(0 0 6 / 7%);

  --card-bg-color: #ffffff;
  --card-fg-color: rgb(0 0 6 / 80%);
  --card-shade-color: rgb(0 0 6 / 7%);

  --dialog-bg-color: #fafafb;
  --dialog-fg-color: rgb(0 0 6 / 80%);

  --popover-bg-color: #ffffff;
  --popover-fg-color: rgb(0 0 6 / 80%);
  --popover-shade-color: rgb(0 0 6 / 7%);

  --thumbnail-bg-color: #ffffff;
  --thumbnail-fg-color: rgb(0 0 6 / 80%);

  --shade-color: rgb(0 0 6 / 7%);
  --scrollbar-outline-color: #ffffff;

  --button-separator: #ededee;
  --button-bg-color-hover: #dcdcde;
  --button-bg-color-active: #bebec0;
  --button-bg-color: #e6e6e7;

  --input-button-hover: #f1f1f1;
  --input-button-active: #dededf;

  --list-separator: #ededee;
  --list-bg-color-hover: #f9f9f9;
  --list-bg-color-active: #efefef;
  --list-bg-color: #ffffff;
  --list-shadow:
    0 0.5px 4px var(--card-shade-color),
    0 0.5px 4px var(--card-shade-color),
    0 0.5px 4px var(--card-shade-color),
    0 -0px 1px var(--card-shade-color);
  --list-button-bg-color: #ebebeb;
  --list-button-bg-color-hover: #e1e1e2;
  --list-button-bg-color-active: #c2c2c3;

  --banner-bg-color: #d4d4d7;
  --banner-button-bg-color: #c3c3c6;
  --banner-button-bg-color-hover: #bbbbbe;
  --banner-button-bg-color-active: #a1a1a5;
  --button-flat-bg-color-hover: #ebebeb;
  --button-flat-bg-color-active: #d0d0d1;
  --button-flat-bg-color-hover-alt: #ececed;
  --button-flat-bg-color-active-alt: #dadadc;
  --button-flat-bg-color: #ffffff;

  --destructive-bg-color: #f2d5d5;
  --destructive-bg-color-hover: #efc8c9;
  --destructive-bg-color-active: #e7a3a3;
  --destructive-filter: brightness(0) saturate(100%) invert(25%) sepia(45%) saturate(3206%) hue-rotate(334deg) brightness(85%) contrast(111%);

  --list-element-fg: #ffffff;
  --list-element-bg: #e0e0e1;
  --list-element-bg-hover: #d1d1d2;
  --list-element-bg-active: #d1d1d2;
  --list-element-shadow:
    0 0.5px 2px var(--card-shade-color),
    0 1.5px 3px var(--card-shade-color),
    0 2.5px 4px var(--card-shade-color);
  --list-button-bg-color: #ebebeb;

  --destructive-list-button-fg: #c91a1a;
  --destructive-list-button-bg-hover: #fdf7f7;
  --destructive-list-button-bg-active: #faebeb;

  --logo-bg: #f6f5f4;
  --logo-shadow:
    0 0.5px 3px var(--card-shade-color),
    0 0.5px 2px var(--card-shade-color),
    0 0.5px 2px var(--card-shade-color),
    0 1px 1px var(--card-shade-color),
    0 1px 1px var(--card-shade-color),
    0 1px 1px var(--card-shade-color),
    0 -0px 1px var(--card-shade-color);
}

[data-theme="dark"] {
  --setka-1: #2a2a2e;
  --setka-2: #1f1f23;
  --workspace-bg: #202022;
  --theme-dark: brightness(75%);
  --console-bg: rgb(24, 24, 24);
  --console-bg-2: rgb(8, 8, 8);
  --outline: #5a82b7;

  --coolicon-bg: #525255;
  --coolicon-fg: brightness(0) saturate(100%) invert(80%) sepia(7%) saturate(26%) hue-rotate(202deg) brightness(115%) contrast(77%);

  --star-full: brightness(0) saturate(100%) invert(70%) sepia(46%) saturate(917%) hue-rotate(357deg) brightness(92%) contrast(95%);
  --star-empty: brightness(0) saturate(100%) invert(34%) sepia(17%) saturate(588%) hue-rotate(20deg) brightness(96%) contrast(93%);

  --theme-invert: 100;
  --theme-brightness: 100%;

  --accent-bg-color: #3584e4;
  --accent-bg-color-hover: #4990e7;
  --accent-bg-color-active: #2a6ab8;
  --accent-fg-color: #ffffff;

  --destructive-bg-color: #c01c28;
  --destructive-fg-color: #ffffff;

  --success-bg-color: #26a269;
  --success-fg-color: #ffffff;

  --warning-bg-color: #cd9309;
  --warning-fg-color: rgb(0 0 0 / 80%);

  --error-bg-color: #c01c28;
  --error-fg-color: #ffffff;

  --window-bg-color: #222226;
  --window-fg-color: #ffffff;
  --window-fg-alt-color: #9e9e9f;

  --view-bg-color: #1d1d20;
  --view-fg-color: #ffffff;

  --headerbar-bg-color: #2e2e32;
  --headerbar-fg-color: #ffffff;
  --headerbar-border-color: #ffffff;
  --headerbar-backdrop-color: #222226;
  --headerbar-shade-color: rgb(0 0 6 / 36%);
  --headerbar-darker-shade-color: rgb(0 0 6 / 90%);

  --sidebar-bg-color: #2e2e32;
  --sidebar-fg-color: #ffffff;
  --sidebar-backdrop-color: #28282c;
  --sidebar-border-color: rgb(0 0 6 / 36%);
  --sidebar-shade-color: rgb(0 0 6 / 10%);

  --secondary-sidebar-bg-color: #28282c;
  --secondary-sidebar-fg-color: #ffffff;
  --secondary-sidebar-backdrop-color: #252529;
  --secondary-sidebar-border-color: rgb(0 0 6 / 36%);
  --secondary-sidebar-shade-color: rgb(0 0 6 / 25%);

  --card-bg-color: rgb(255 255 255 / 8%);
  --card-fg-color: #ffffff;
  --card-shade-color: rgb(0 0 6 / 36%);

  --dialog-bg-color: #36363a;
  --dialog-fg-color: #ffffff;

  --popover-bg-color: #36363a;
  --popover-fg-color: #ffffff;
  --popover-shade-color: rgb(0 0 6 / 25%);

  --thumbnail-bg-color: #39393d;
  --thumbnail-fg-color: #ffffff;

  --shade-color: rgb(0 0 6 / 25%);
  --scrollbar-outline-color: rgb(0 0 6 / 50%);

  --button-separator: #454549;
  --button-bg-color-hover: #434347;
  --button-bg-color-active: #646467;
  --button-bg-color: #38383c;
  --button-flat-bg-color-hover: #48484b;
  --button-flat-bg-color-active: #626264;
  --button-flat-bg-color: #343437;
  --button-flat-bg-color-hover-alt: #313135;
  --button-flat-bg-color-active-alt: #454549;

  --input-button-hover: #424245;
  --input-button-active: #545457;

  --list-separator: #242424;
  --list-bg-color-hover: #3a3a3d;
  --list-bg-color-active: #444447;
  --list-bg-color: #343437;
  --list-shadow:
    0 0.5px 3.5px var(--card-shade-color),
    0 -0px 0px var(--card-shade-color);
  --list-button-bg-color: #48484b;
  --list-button-bg-color-hover: #525255;
  --list-button-bg-color-active: #717173;

  --banner-bg-color: #3d3d42;
  --banner-button-bg-color: #505055;
  --banner-button-bg-color-hover: #5a5a5e;
  --banner-button-bg-color-active: #77777b;

  --destructive-bg-color: #4c3335;
  --destructive-bg-color-hover: #5a393a;
  --destructive-bg-color-active: #834a4a;
  --destructive-filter: brightness(0) saturate(100%) invert(61%) sepia(18%) saturate(1212%) hue-rotate(315deg) brightness(102%) contrast(93%);

  --list-element-fg: #d2d2d2;
  --list-element-bg: #525255;
  --list-element-bg-hover: #616164;
  --list-element-bg-active: #616164;
  --list-element-shadow:
    0 2.5px 4px var(--card-shade-color);

  --destructive-list-button-fg: #f08680;
  --destructive-list-button-bg-hover: #3c373a;
  --destructive-list-button-bg-active: #493c3e;

  --logo-bg: #ffffff;
  --logo-shadow:
    0 0.5px 3.5px var(--card-shade-color),
    0 -0px 0px var(--card-shade-color);
}

@font-face {
  font-family: 'adwaita';
  src: url('assets/fonts/adwaita.ttf') format('truetype');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita';
  src: url('assets/fonts/adwaita.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita';
  src: url('assets/fonts/adwaita.ttf') format('truetype');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita';
  src: url('assets/fonts/adwaita.ttf') format('truetype');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita';
  src: url('assets/fonts/adwaita.ttf') format('truetype');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita';
  src: url('assets/fonts/adwaita.ttf') format('truetype');
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 200;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: 'adwaita-mono';
  src: url('assets/fonts/adwaita-mono.ttf') format('truetype');
  font-display: swap;
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: 'minecraft';
  src: url('assets/fonts/minecraft.ttf') format('truetype');
  font-display: swap;
  font-weight: 600;
  font-style: normal;
}

body {
  /* background-color: var(--window-bg-color); */
  background-color: var(--workspace-bg);

  padding: 0px;
  margin: 0px;

  width: 100%;
  max-width: 100%;

  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  scrollbar-color: transparent transparent;
  scrollbar-width: none;
}