/* dev.css v3, a classless CSS framework - https://github.com/intergrav/dev.css */

/* Table of Contents
   1. Configuration
   2. Dark Mode Handling
   3. CSS Reset
   4. Margins for Most Elements
   5. Font Family
   6. Body and Selection Styling
   7. Typography
   8. Blockquotes
   9. Header
  10. Footer
  11. Buttons and Inputs
  12. Code and Keyboards
  13. Details
  14. Description Lists
  15. Horizontal Rules
  16. Fieldsets
  17. Tables
  18. Lists
*/

/* 1. 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-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-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-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. 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;
}

/* 4. 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;
}

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

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

/* 6. Body and Selection Styling */
body {
	margin: 0 auto;
	max-width: 48rem;
	padding: 2rem;
	background: var(--dc-bg-1);
	color: var(--dc-tx-2);
}

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

/* 7. Typography */
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;
}

/* 8. 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;
}

/* 9. Header */
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: "• ";
}

/* 10. 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;
}

/* 11. 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%;
}

/* 12. 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;
}

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

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

/* 13. 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;
}

/* 14. Description Lists */
dt {
	font-weight: bold;
}

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

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

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

legend {
	padding: auto 0.5rem;
}

/* 17. 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;
}

/* 18. Lists */
ol,
ul {
	padding-left: 2rem;
}

li {
	margin-top: 0.4rem;
}

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