:root {
    --toolbar-height: 100px;
    --toolbar-padding: 12px;
    --toolbar-button-height: 64px;
    --toolbar-bg: #161616;
    --toolbar: white;

    --body-padding: 12px;
    --body: #ffffff;
    --body-bg: #1b1b1b;

    --message-bg: #2d2d2d;
    --message: #eaeaea;

    --saved-list-item-bg: #424242;
    --saved-list-bg: var(--saved-list-item-bg);
    --saved-list-item: #f0f0f0;
    --saved-list-item-bg-hover: #36876f;
    --saved-list-current-bg: #00eaff28;
    --saved-list-current: white;
    --saved-list-item-context-open: #ffffff;
    --saved-list-item-context-open-bg: #3c00ff27;

    --card-index-bg: #212121;
    --card-index: #d4d4d4;

    --scrollbar: #555 #1e1e1e;

    --h1: #f1f1f1;
    
    --p: #eeeeee;

    --textarea-bg: #2a2a2a;
    --textarea: #ffffff;
    --textarea-placeholder: #888;

    --button-bg: #219f73;
    --button: white;
    --button-bg-hover: #218f73;
    --button-hover: white;

    --output-card-bg: #2a2a2a;

    --option-btn-bg: #212121;
    --option-btn: #d7d7d7;
    --option-btn-bg-hover: #268468;
    --option-btn-hover: #ffffff;

    --correct-bg: #1e5223;
    --correct-border: #3dd16f;
    --correct: #caffe0;

    --wrong-bg: #632222;
    --wrong-border: #ff6b6b;
    --wrong: #ffdede;

    --answer-visible-bg: #1d2e1d;
    --answer-visible-border: #3dd16f;
    --answer-visible: #e1ffe9;

    --toolbar-button-bg: #444;
    --toolbar-button: #fff;
    --toolbar-button-bg-hover: #555;

    --input-bg: #000000;
    --input: #ffffff;
    --input-border: #333;

    --item-bg-context: #404040;
    --context-item-delete-bg: red;

    --saved-list-grade-border: #1717173e;
    --saved-list-grade-bg: #1b1b1b74;

    --suggestions-height: 48px;

    --output-card-past-wrong-border: #ff93939a;

    --option-btn-shadow: rgba(0, 0, 0, 0.046);

    --border: rgba(0, 0, 0, 0.363);

    --view-bg: #191919;
    --view: #f7f7f7;

    --folder-bg: #494949;
    --folder: #fbfbfb;

    --compose: #181818;
    --compose-bg: #b6b6b6;

    --titlebar-bg: #1e1e1e;
    --titlebar: #ebebeb;
    
}
.light {
    --toolbar-height: 100px;
    --toolbar-padding: 12px;
    --toolbar-button-height: 64px;
    --toolbar-bg: #ececec;
    --toolbar: black;

    --body-padding: 12px;
    --body: #1a1a1a;
    --body-bg: #ffffff;


    --message-bg: #dedede;
    --message: #000000;

    --saved-list-item-bg: #f8f8f8;
    --saved-list-bg: #e2e2e2;
    --saved-list-item: #1a1a1a;
    --saved-list-item-bg-hover: #cdeee4;
    --saved-list-item-border: #1a1a1a;

    
    --saved-list-current-bg: #00eaff28;
    --saved-list-current: #000000;
    --saved-list-item-context-open: #ffffff;
    --saved-list-item-context-open-bg: #5900ff;


    --card-index-bg: #fdfdfd;
    --card-index: #444444;

    --scrollbar: #bbbbbb #eeeeee;

    --h1: #1a1a1a;
    --p: #333333;

    --textarea-bg: #ffffff;
    --textarea: #111111;
    --textarea-placeholder: #777777;

    --button-bg: #2abf8f;
    --button: #ffffff;
    --button-hover: #ffffff;
    --button-bg-hover: #25ad81;

    --output-card-bg: #ecececbb;

    --option-btn-bg: #fdfdfd;
    --option-btn: #222222;
    --option-btn-bg-hover: #fffed39c;
    --option-btn-hover: #000000;

    --correct-bg: #e6f6ea;
    --correct-border: #3dd16f;
    --correct: #1e5223;

    --wrong-bg: #fdecec;
    --wrong-border: #ff6b6b;
    --wrong: #632222;

    --answer-visible-bg: #eefaf1;
    --answer-visible-border: #3dd16f;
    --answer-visible: #1e5223;

    --toolbar-button-bg: #f8f8f8;
    --toolbar-button: #222222;
    --toolbar-button-bg-hover: #ffffff;

    --input-bg: #ffffff;
    --input: #111111;
    --input-border: #cccccc;

    --item-bg-context: red;

    --context-item-delete-bg: red;
    --saved-list-grade-border: #f2f2f2a6;
    --saved-list-grade-bg: #ffffff;


    --output-card-past-wrong-border: #ff000034;
    
    --border: rgba(255, 255, 255, 0.363);
    
    --view-bg: #cacaca;
    --view: #000000;

    --compose: #b6b6b6;
    --compose-bg: #181818;
}


/* ===== WEBKIT CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar {
  width: 2.7px;
}
*::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb-bg);
}

/* Transparent track (background area behind thumb) */
::-webkit-scrollbar-track {
  background: transparent;
  background: var(--scrollbar-background);
}


*:focus {
  outline: none;
  border-color: var(--border-color);
  box-shadow: none;
}

* {
    box-sizing: border-box;
}

html {
    /* overflow: hidden; */
}

@font-face {
  font-family: 'pri';
  src: url("../fnt/sfpro/SF-Pro-Text-Regular.otf") format('truetype');
  /* size-adjust: 96%; */
}
@font-face {
  font-family: 'sec';
  src: url("../fnt/sfpro/SF-Pro-Text-Heavy.otf") format('truetype');
  /* size-adjust: 96%; */
}
body, input, textarea {
    font-family: 'pri', serif;
    font-size: 12px;
    font-weight: 550; 
    letter-spacing: .015em;
}

body.mobile, input.mobile, textarea.mobile {
    font-size: 20px;
}
body {
    background: var(--body-bg);
    color: var(--body);
    margin: 0;
    padding: 0;
    /* height: auto; */
}

.body * {
  background: var(--body-bg) !important;
  color: var(--body) !important;
}


button {
    cursor: pointer;
}

h2 {
    font-family: 'sec', serif;
    font-size: 15px;
    height: 100%;
    width: 100%;
    margin: auto;
}

#usersList {
    font-family: 'sec', serif;
}

#userLevelDiv {
    font-family: 'sec';
    font-size: 12px;
}