:root {
    --container-paddding: 20px;
    --input-padding-vertical: 6px;
    --input-padding-horizontal: 4px;
    --input-margin-vertical: 4px;
    --input-margin-horizontal: 0;
    --vscode-font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    --vscode-font-weight: normal;
    --vscode-font-size: 13px;
    --vscode-editor-font-family: Menlo, Monaco, "Courier New", monospace;
    --vscode-editor-font-weight: normal;
    --vscode-editor-font-size: 18px;
    --vscode-foreground: #cccccc;
    --vscode-errorForeground: #f48771;
    --vscode-descriptionForeground: rgba(204, 204, 204, 0.7);
    --vscode-icon-foreground: #c5c5c5;
    --vscode-focusBorder: #007fd4;
    --vscode-textSeparator-foreground: rgba(255, 255, 255, 0.18);
    --vscode-textLink-foreground: #3794ff;
    --vscode-textLink-activeForeground: #3794ff;
    --vscode-textPreformat-foreground: #d7ba7d;
    --vscode-textBlockQuote-background: rgba(127, 127, 127, 0.1);
    --vscode-textBlockQuote-border: rgba(0, 122, 204, 0.5);
    --vscode-textCodeBlock-background: rgba(10, 10, 10, 0.4);
    --vscode-widget-shadow: #000000;
    --vscode-input-background: #3c3c3c;
    --vscode-input-foreground: #cccccc;
    --vscode-inputOption-activeBorder: rgba(0, 122, 204, 0);
    --vscode-inputOption-activeBackground: rgba(0, 127, 212, 0.4);
    --vscode-inputOption-activeForeground: #ffffff;
    --vscode-input-placeholderForeground: #a6a6a6;
    --vscode-inputValidation-infoBackground: #063b49;
    --vscode-inputValidation-infoBorder: #007acc;
    --vscode-inputValidation-warningBackground: #352a05;
    --vscode-inputValidation-warningBorder: #b89500;
    --vscode-inputValidation-errorBackground: #5a1d1d;
    --vscode-inputValidation-errorBorder: #be1100;
    --vscode-dropdown-background: #3c3c3c;
    --vscode-dropdown-foreground: #f0f0f0;
    --vscode-dropdown-border: #3c3c3c;
    --vscode-checkbox-background: #3c3c3c;
    --vscode-checkbox-foreground: #f0f0f0;
    --vscode-checkbox-border: #3c3c3c;
    --vscode-button-foreground: #ffffff;
    --vscode-button-background: #0e639c;
    --vscode-button-hoverBackground: #1177bb;
    --vscode-button-secondaryForeground: #ffffff;
    --vscode-button-secondaryBackground: #3a3d41;
    --vscode-button-secondaryHoverBackground: #45494e;
    --vscode-badge-background: #4d4d4d;
    --vscode-badge-foreground: #ffffff;
    --vscode-scrollbar-shadow: #000000;
    --vscode-scrollbarSlider-background: rgba(121, 121, 121, 0.4);
    --vscode-scrollbarSlider-hoverBackground: rgba(100, 100, 100, 0.7);
    --vscode-scrollbarSlider-activeBackground: rgba(191, 191, 191, 0.4);
    --vscode-progressBar-background: #0e70c0;
    --vscode-editor-background: #1e1e1e;
  }
  
  body {
    /* padding: 0 var(--container-paddding); */
    color: var(--vscode-foreground);
    font-size: var(--vscode-font-size);
    font-weight: var(--vscode-font-weight);
    font-family: var(--vscode-font-family);
    /* background-color: var(--vscode-editor-background); */
  }
  
  ol,
  ul {
    padding-left: var(--container-paddding);
  }
  
  body > *,
  form > * {
    margin-block-start: var(--input-margin-vertical);
    margin-block-end: var(--input-margin-vertical);
  }
  
  *:focus {
    outline-color: var(--vscode-focusBorder) !important;
  }
  
  a {
    color: var(--vscode-textLink-foreground);
  }
  
  a:hover,
  a:active {
    color: var(--vscode-textLink-activeForeground);
  }
  
  code {
    font-size: var(--vscode-editor-font-size);
    font-family: var(--vscode-editor-font-family);
  }
  
  button {
    border: none;
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    width: 100%;
    text-align: center;
    outline: 1px solid transparent;
    outline-offset: 2px !important;
    color: var(--vscode-button-foreground);
    background: var(--vscode-button-background);
  }
  
  /* span {
    color: #1e1e1e;
    color: #d4d4d4;
    color: #9cdcfe;
    color: #d19a66;
    color: #dcdcaa;
    color: #c586c0;
    color: #d4d4d4;
    color: #dcdcaa;
    color: #b5cea8;
    color: #ce9178;
    color: #6a9955;
    color: #d4d4d4;
    color: #569cd6;
  } */
  
  button:hover {
    cursor: pointer;
    background: var(--vscode-button-hoverBackground);
  }
  
  button:focus {
    outline-color: var(--vscode-focusBorder);
  }
  
  button.secondary {
    color: var(--vscode-button-secondaryForeground);
    background: var(--vscode-button-secondaryBackground);
  }
  
  button.secondary:hover {
    background: var(--vscode-button-secondaryHoverBackground);
  }
  
  input:not([type="checkbox"]),
  textarea {
    display: block;
    width: 100%;
    border: none;
    font-family: var(--vscode-font-family);
    padding: var(--input-padding-vertical) var(--input-padding-horizontal);
    color: var(--vscode-input-foreground);
    outline-color: var(--vscode-input-border);
    background-color: var(--vscode-input-background);
  }
  
  input::placeholder,
  textarea::placeholder {
    color: var(--vscode-input-placeholderForeground);
  }