:root {
	/* Gruvbox Light Hard */
	--bg:              #f9f5d7;
	--bg-panel:        #fbf1c7;
	--bg-raised:       #ebdbb2;
	--bg-raised-hover: #d5c4a1;
	--fg:              #3c3836;
	--fg-dim:          #665c54;
	--fg-faint:        #928374;
	--border:          #a89984;
	--border-faint:    #bdae93;
	--active-bg:       #3c3836;
	--active-fg:       #f9f5d7;
	--link:            #458588;
	--link-vis:        #b16286;
	--link-hover:      #9d0006;
	--err:             #9d0006;
	--err-bg:          #f9e5e5;
	--err-border:      #cc241d;
	--green:           #98971a;
	--blue:            #458588;
	--red:             #cc241d;
	--bar-bg:          #3c3836;
	--bar-fg:          #f9f5d7;
	--bar-dim:         #928374;
}

[data-theme="dark"] {
	/* Gruvbox Dark Hard */
	--bg:              #1d2021;
	--bg-panel:        #282828;
	--bg-raised:       #3c3836;
	--bg-raised-hover: #504945;
	--fg:              #ebdbb2;
	--fg-dim:          #bdae93;
	--fg-faint:        #928374;
	--border:          #665c54;
	--border-faint:    #504945;
	--active-bg:       #d5c4a1;
	--active-fg:       #1d2021;
	--link:            #83a598;
	--link-vis:        #d3869b;
	--link-hover:      #fb4934;
	--err:             #fb4934;
	--err-bg:          #3b2020;
	--err-border:      #cc241d;
	--green:           #b8bb26;
	--blue:            #83a598;
	--red:             #fb4934;
	--bar-bg:          #282828;
	--bar-fg:          #ebdbb2;
	--bar-dim:         #928374;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
	font-family: Arial, Helvetica, sans-serif;
}

a {
	color: var(--link);
	text-decoration: underline;
}

a:visited {
	color: var(--link-vis);
}

a:hover {
	color: var(--link-hover);
}

h1 {
	margin: 0 0 0.5em 0;
	padding-bottom: 2px;
}

h2 {
	margin: 0.8em 0 0.3em 0;
}

input, button, textarea, select {
	font-family: Arial, Helvetica, sans-serif;
}

button {
	background: var(--bg-raised);
	border: 1px solid var(--border);
	padding: 2px 8px;
	cursor: pointer;
	color: var(--fg);
}

button:hover {
	background: var(--bg-raised-hover);
}

input[type="text"],
input[type="number"] {
	border: 1px solid var(--border);
	padding: 2px 4px;
	background: var(--bg);
	color: var(--fg);
}

select {
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--fg);
}

code {
	font-family: monospace;
}

table {
	border-collapse: collapse;
}

td, th {
	border: 1px solid var(--border);
	padding: 3px 6px;
}

hr {
	border: none;
	border-top: 1px solid var(--border);
	margin: 1em 0;
}