/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */
/* about: tiny, simple, classless CSS framework in the style of Vercel's Geist design system */

/* table of contents
	1. default configuration
	2. dark mode handling
	3. root color scheme
	4. css reset
	5. margins for most elements
	6. font family
	7. body and selection styling
	8. typography
	9. blockquotes
	10. header
	11. footer
	12. buttons and inputs
	13. code and keyboards
	14. details
	15. description lists
	16. horizontal rules
	17. fieldsets
	18. tables
	19. lists
*/

/* 1. default configuration */
:root {
	/* font families */
	--dc-font-sans: "Geist", "Inter", -apple-system, BlinkMacSystemFont,
		"Segoe UI", sans-serif;
	--dc-font-mono: "Geist Mono", monospace;

	/* light colors */
	--dc-cs: light;
	--dc-tx-1: #000000;
	--dc-tx-2: #1a1a1a;
	--dc-bg-1: #fafafa;
	--dc-bg-2: #fff;
	--dc-bg-3: #ebebeb;
	--dc-lk-1: #0068d6;
	--dc-lkb-1: #0072f5;
	--dc-lkb-2: #0062d1;
	--dc-lkb-tx: #ededed;
	--dc-ac-1: #8e4ec6;
	--dc-ac-tx: #ededed;

	/* dark colors */
	--dc-d-cs: dark;
	--dc-d-tx-1: #ededed;
	--dc-d-tx-2: #a1a1a1;
	--dc-d-bg-1: #000;
	--dc-d-bg-2: #0a0a0a;
	--dc-d-bg-3: #2e2e2e;
	--dc-d-lk-1: #52a8ff;
	--dc-d-lkb-1: #0072f5;
	--dc-d-lkb-2: #0062d1;
	--dc-d-lkb-tx: #ededed;
	--dc-d-ac-1: #8e4ec6;
	--dc-d-ac-tx: #ededed;
}

/* 2. dark mode handling */
@media (prefers-color-scheme: dark) {
	:root {
		--dc-cs: var(--dc-d-cs);
		--dc-tx-1: var(--dc-d-tx-1);
		--dc-tx-2: var(--dc-d-tx-2);
		--dc-bg-1: var(--dc-d-bg-1);
		--dc-bg-2: var(--dc-d-bg-2);
		--dc-bg-3: var(--dc-d-bg-3);
		--dc-lk-1: var(--dc-d-lk-1);
		--dc-lkb-1: var(--dc-d-lkb-1);
		--dc-lkb-2: var(--dc-d-lkb-2);
		--dc-lkb-tx: var(--dc-d-lkb-tx);
		--dc-ac-1: var(--dc-d-ac-1);
		--dc-ac-tx: var(--dc-d-ac-tx);
	}
}

/* 3. root color scheme */
:root {
	color-scheme: only var(--dc-cs);
}

/* 4. css reset - cleaned up https://www.joshwcomeau.com/css/custom-css-reset */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	word-break: break-word;
}

body {
	line-height: 1.5;
}

img,
picture,
video,
canvas,
svg {
	display: block;
	max-width: 100%;
}

input,
button,
textarea,
select {
	font: inherit;
}

#root,
#__next {
	isolation: isolate;
}

/* 5. margins for most elements */
address,
area,
article,
aside,
audio,
blockquote,
datalist,
details,
dl,
fieldset,
figure,
form,
input,
iframe,
img,
meter,
nav,
ol,
optgroup,
option,
output,
p,
pre,
progress,
ruby,
section,
table,
textarea,
ul,
video {
	margin-bottom: 1rem;
}

/* 6. font family */
html {
	font-family: var(--dc-font-sans);
}

code,
pre,
kbd,
samp {
	font-family: var(--dc-font-mono);
}

/* 7. body and selection styling */
body {
	margin: 0 auto;
	max-width: 48rem;
	padding: 2rem;
	background: var(--dc-bg-1);
	color: var(--dc-tx-2);
	overflow-wrap: break-word;
	overflow-x: hidden;
}

::selection {
	background: var(--dc-ac-1);
	color: var(--dc-ac-tx);
}

/* 8. typography */
h1 {
	font-size: 2rem;
}

h2 {
	font-size: 1.5rem;
}

h3 {
	font-size: 1.17rem;
}

h4 {
	font-size: 1rem;
}

h5 {
	font-size: 0.83rem;
}

h6 {
	font-size: 0.67rem;
}

p,
a {
	font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1;
	color: var(--dc-tx-1);
	padding-top: 1rem;
}

h1,
h2,
h3 {
	padding-bottom: 0.25rem;
	margin-bottom: 0.5rem;
	border-bottom: 1px solid var(--dc-bg-3);
}

h4,
h5,
h6 {
	margin-bottom: 0.25rem;
}

a {
	color: var(--dc-lk-1);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

mark {
	padding: 0.125rem 0.25rem;
	background: var(--dc-ac-1);
	color: var(--dc-ac-tx);
	border-radius: 0.25rem;
}

/* 9. blockquotes */
blockquote {
	padding: 1.25rem;
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-left: 5px solid var(--dc-bg-3);
	border-radius: 0.25rem;
}

blockquote *:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
}

/* 10. header - make sure header addons dont break when modifying */
header {
	background: var(--dc-bg-2);
	border-bottom: 1px solid var(--dc-bg-3);
	padding: 0.5rem calc(50vw - 50%);
	margin: -2rem calc(50% - 50vw) 2rem;
}

header * {
	padding-top: 0rem;
	padding-bottom: 0rem;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

header h1,
header h2,
header h3 {
	border-bottom: 0;
}

header h1 {
	font-size: 1.6rem;
}

header h2 {
	font-size: 1.4rem;
}

header h3 {
	font-size: 1.2rem;
}

header h4 {
	font-size: 1rem;
}

header h5 {
	font-size: 0.9rem;
}

header p {
	font-size: 1rem;
}

header nav {
	font-size: 0.9rem;
}

header h6 {
	font-size: 0.8rem;
}

header nav ul {
	padding: 0;
}

header nav ul li {
	display: inline-block;
	margin: 0;
}

header nav ul li:not(:first-child)::before {
	content: "• ";
}

/* 11. footer */
footer {
	border-top: 1px solid var(--dc-bg-3);
	padding: 0.5rem calc(50vw - 50%);
	margin: 2rem calc(50% - 50vw) -2rem;
}

footer * {
	padding-top: 0rem;
	padding-bottom: 0rem;
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
}

footer h1,
footer h2,
footer h3 {
	border-bottom: 0;
}

/* 12. buttons and inputs */
a button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	background: var(--dc-lkb-1);
	color: var(--dc-lkb-tx);
	border: 0;
	border-radius: 0.25rem;
	box-sizing: border-box;
	cursor: pointer;
}

a button[disabled],
button[disabled],
input[type="submit"][disabled],
input[type="reset"][disabled],
input[type="button"][disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.button:focus,
.button:enabled:hover,
button:focus,
button:enabled:hover,
input[type="submit"]:focus,
input[type="submit"]:enabled:hover,
input[type="reset"]:focus,
input[type="reset"]:enabled:hover,
input[type="button"]:focus,
input[type="button"]:enabled:hover {
	background: var(--dc-lkb-2);
}

textarea,
select,
input {
	padding: 0.25rem 0.5rem;
	margin-bottom: 0.5rem;
	background: var(--dc-bg-2);
	color: var(--dc-tx-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.25rem;
	box-shadow: none;
	box-sizing: border-box;
}

textarea {
	max-width: 100%;
}

input,
progress {
	accent-color: var(--dc-ac-1);
}

/* 13. code and keyboards */
code,
samp,
kbd,
pre {
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.25rem;
	padding: 0.125rem 0.25rem;
	font-size: 0.9rem;
	tab-size: 2;
}

kbd {
	border-bottom: 3px solid var(--dc-bg-3);
}

pre {
	padding: 1rem 1.5rem;
	max-width: 100%;
	overflow: auto;
}

pre code {
	padding: 0;
	border: 0;
}

/* 14. details */
details {
	padding: 0.5rem 1rem;
	background: var(--dc-bg-2);
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.25rem;
}

summary {
	cursor: pointer;
	font-weight: bold;
}

details[open] summary {
	margin-bottom: 0.5rem;
}

details[open] > *:first-child {
	margin-top: 0;
	padding-top: 0;
}

details[open] > *:last-child {
	margin-bottom: 0;
	padding-bottom: 0;
}

/* 15. description lists */
dt {
	font-weight: bold;
}

dd::before {
	content: "→ ";
}

/* 16. horizontal rules */
hr {
	border: 0;
	border-bottom: 1px solid var(--dc-bg-3);
	margin: 1rem auto;
}

/* 17. fieldsets */
fieldset {
	margin-top: 1rem;
	padding: 2rem;
	border: 1px solid var(--dc-bg-3);
	border-radius: 0.25rem;
}

legend {
	padding: auto 0.5rem;
}

/* 18. tables */
table {
	border-collapse: collapse;
	width: 100%;
}

td,
th {
	border: 1px solid var(--dc-bg-3);
	text-align: left;
	padding: 0.5rem;
}

th {
	background: var(--dc-bg-2);
}

tr:nth-child(even) {
	background: var(--dc-bg-2);
}

table caption {
	font-weight: bold;
	margin-bottom: 0.5rem;
}

/* 19. lists */
ol,
ul {
	padding-left: 2rem;
}

li {
	margin-top: 0.4rem;
}

ul ul,
ol ul,
ul ol,
ol ol {
	margin-bottom: 0;
}