: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);
}
