:root {
  --font-main: JetBrainsMono Nerd Font, monospace;
  --font-secondary: JetBrainsMono Nerd Font, monospace;
  
/* colors */
	--foreground: #D3C6AA;
	--bg-dim: #1E2326;
	--bg-0: #272E33;
	--bg-1: #2E383C;
	--bg-2: #374145;
	--bg-3: #414B50;
	--bg-4: #495156;
	--bg-5: #4F5B58;

	--bg-r: #4C3743;
	--bg-v: #493B40;
	--bg-y: #45443C;
	--bg-g: #3C4841;
	--bg-b: #384B55;

	--gray-0: #7A8478;
	--gray-1: #859289;
	--gray-2: #9DA9A0;
	
	--red: #E67E80;
	--orange: #E69875;
	--yellow: #DBBC7F;
	--green: #A7C080;
	--blue: #7FBBB3;
	--aqua: #83C092;
	--purple: #D699B6;
}

body {
  font-family: var(--font-main);
background-color: var(--bg-0);
color: var(--foreground);
scrollbar-color: var(--bg-5);
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-secondary);
color: var(--green);
}

a {
color: var(--blue);
}
a:hover {
background-color: var(--bg-4);
}

textarea {
background-color: var(--bg-1);
border: 0 !important;
}

.helptext, small {
color: var(--gray-2);
}

button {
font-family: var(--font-main);
background-color: var(--bg-3);
color: var(--foreground);
padding: 3px;
border-radius: 4px;
border: 0;
}
button:hover {
background-color: var(--bg-5);
}

li {
border-bottom: 2px solid var(--bg-5) !important;
}

.upgrade {
color: var(--red) !important;
}

.sticky-controls, .sticky {
background-color: var(--bg-0) !important;
}

.editable {
background-color: var(--bg-2) !important;
border-bottom: 2px solid var(--bg-5) !important;
}

strong, b {
color: var(--orange);
}