:root {
  --config-width: 910px;
  --config-width-xxl: 1000px;
  --config-width-xl: 910px;
  --config-width-large: 700px;
  --config-width-medium: 550px;
  --config-width-small: 320px;
  --config-color-link: #1e849e;
  --config-color-background: #eceff1;
  --config-color-background-fade: #ffffff;
  --config-color-background-focus: #f5f5f5;
  --config-color-placeholder: #868686;
  --config-color-focus: #f02e65;
  --config-color-focus-fade: #fef8fb;
  --config-color-focus-hover: #ff729b;
  --config-color-focus-glow: #fce5ec;
  --config-color-focus-dark: #c52653;
  --config-color-normal: #40404c;
  --config-color-dark: #313131;
  --config-color-fade: #818181;
  --config-color-fade-light: #e2e2e2;
  --config-color-fade-super: #f1f3f5;
  --config-color-danger: #f53d3d;
  --config-color-success: #1bbf61;
  --config-color-warning: #ffed4d;
  --config-border-color: #f5f5f5;
  --config-border-radius: 10px;
  --config-prism-background: #373738;
  --config-prism-numbers: #39393c;
  --config-note-background: #f1fbff;
  --config-note-border: #5bceff;
  --config-warning-background: #fdf7d9;
  --config-warning-border: #f8e380;
  --config-social-twitter: #1da1f2;
  --config-social-github: #000000;
  --config-social-discord: #7189dc;
  --config-social-facebook: #4070b4;
  --config-language-bash: #2b2626;
  --config-language-bash-contrast: #fff;
  --config-language-javascript: #fff054;
  --config-language-javascript-contrast: #333232;
  --config-language-html: #ff895b;
  --config-language-html-contrast: #ffffff;
  --config-language-php: #6182bb;
  --config-language-php-contrast: #ffffff;
  --config-language-nodejs: #8cc500;
  --config-language-nodejs-contrast: #373738;
  --config-language-ruby: #fc3f48;
  --config-language-ruby-contrast: #ffffff;
  --config-language-python: #3873a2;
  --config-language-python-contrast: #ffffff;
  --config-language-go: #00add8;
  --config-language-go-contrast: #ffffff;
  --config-language-dart: #035698;
  --config-language-dart-contrast: #2bb1f0;

  // Console
  --config-console-background: #eceff1;
  --config-console-nav-start: #143650;
  --config-console-nav-end: #302839;
  --config-console-nav-border: #2a253a;
  --config-console-nav-switch-background: #ececec;
  --config-console-nav-switch-color: #868686;
  --config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%23868686' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");

  .theme-dark {
      --config-color-background: #1C2138;
      --config-color-background-fade: #1c2138;
      --config-color-background-focus: #1F253F;
      --config-color-link: rgb(76, 174, 219);
      --config-color-placeholder: #1F253F;
      --config-color-focus: rgb(199, 216, 235);
      --config-color-focus-fade: #1e233e;
      --config-color-focus-hover: #d3deea;
      --config-color-focus-glow: #d3deea;
      --config-color-focus-dark: #657586;
      --config-color-normal: rgb(199, 216, 235);
      --config-color-fade: #bec3e0;
      --config-color-fade-light: rgb(24, 24, 24);
      --config-color-fade-super: #262D50;
      --config-color-danger: #d84a4a;
      --config-color-success: #34b86d;
      --config-color-warning: #e0d56d;
      --config-border-color: #262D50;
      --config-prism-background: #1F253F;
      --config-prism-numbers: #1F253F;
      --config-note-background: #1F253F;
      --config-note-border: #262D50;
      --config-warning-background: #1F253F;
      --config-warning-border: #262D50;
      --config-social-twitter: var(--config-color-normal);
      --config-social-github: var(--config-color-normal);
      --config-social-discord: var(--config-color-normal);
      --config-social-facebook: var(--config-color-normal);
      --config-language-bash: var(--config-color-normal);
      --config-language-bash-contrast: var(--config-color-background);
      --config-language-javascript: var(--config-color-normal);
      --config-language-javascript-contrast: var(--config-color-background);
      --config-language-html: var(--config-color-normal);
      --config-language-html-contrast: var(--config-color-background);
      --config-language-php: var(--config-color-normal);
      --config-language-php-contrast: var(--config-color-background);
      --config-language-nodejs: var(--config-color-normal);
      --config-language-nodejs-contrast: var(--config-color-background);
      --config-language-ruby: var(--config-color-normal);
      --config-language-ruby-contrast: var(--config-color-background);
      --config-language-python: var(--config-color-normal);
      --config-language-python-contrast: var(--config-color-background);
      --config-language-go: var(--config-color-normal);
      --config-language-go-contrast: var(--config-color-background);
      --config-language-dart: var(--config-color-normal);
      --config-language-dart-contrast: var(--config-color-background);
      
      // Console
      --config-console-background: #1e233e;
      --config-console-nav-start: #1c2038;
      --config-console-nav-end: #121525;
      --config-console-nav-border: #171b30;
      --config-console-nav-switch-background: var(--config-color-focus);
      --config-console-nav-switch-color: var(--config-color-background);
      --config-console-nav-switch-arrow: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='24' height='24' viewBox='0 0 24 24'><path fill='%231C2138' d='M7.406 7.828l4.594 4.594 4.594-4.594 1.406 1.406-6 6-6-6z'></path></svg>");
  }
}

.theme-light {
  .force-light {
    display: block;
  }
}

.theme-dark {
  .force-dark {
    display: block;
  }
}

.force-dark {
  display: none;
}

.force-light {
  display: none;
}

@watch: ~"only screen and (max-width: 260px)";
@phones: ~"only screen and (max-width: 550px)";
@tablets: ~"only screen and (min-width: 551px) and (max-width: 1200px)";
@desktops: ~"only screen and (min-width: 1201px) and (max-width: 1300px)";
@big-screens: ~"only screen and (min-width: 1200px)";
@dark: ~"(prefers-color-scheme: dark)";

main {
  background: var(--test);

}

img[src=""] {
  visibility: hidden;
  display: inline-block;
}

@import "functions";
@import "typography";
@import "tabels";
@import "grid";
@import "icons";
@import "polyfills";
@import "forms";
@import "scopes/console";
@import "scopes/home";
@import "comps/alerts";
@import "comps/article";
@import "comps/avatar";
@import "comps/box";
@import "comps/cover";
@import "comps/database";
@import "comps/footer";
@import "comps/loader";
@import "comps/modal";
@import "comps/scroll";
@import "comps/tabs";
@import "dependencies/prism";

html {
  padding: 0;
  margin: 0;
  direction: @config-start-dir;
}

body {
  margin: 0;
  background: var(--config-color-background) no-repeat fixed;
}

main {
  min-height: 100%;
}

ul {
  padding: 0;
  margin: 0;

  li {
    margin: 0;
    list-style: none;
  }
}

.force-left {
  direction: ltr;
  text-align: left;
}

.force-right {
  direction: rtl;
  text-align: right;
}

.pull-left {
  float: left;
}

.pull-right {
  float: right;
}