:root {
	--background: black;
	--foreground: white;
	--color-warn: #FF6666;
	--color-accent: #c9b7eb;
	--background-surface: #333333;

	--gap-size: 1ch;
	--border-size: 2px;
	--auto-body-pad: 3ch;
}


/* one liners */
p {margin:0px}
th {text-align:left}
table * {padding: 0px}
a {text-decoration: none}
code {font-family: monospace}
a:hover {text-decoration: underline}
h1, h2, h3, h4, h5, h6 {margin: 0px}
ol li {list-style-type: decimal-leading-zero}
ol li::marker, a {color: var(--color-accent)}
button, a, input {cursor: pointer}



html {
	font-size: 120%;
	background: var(--background-surface);
}


body {
	padding: var(--auto-body-pad);
	margin:0px;
	border: solid var(--auto-body-pad) var(--background-surface);
	font-size: 1rem;
	max-width:800px;
	opacity: 0;
	cursor:default;
}


/* Projects table, add border to all but last item */
tbody > *:not(:last-child){
	td {border-bottom: solid var(--border-size) var(--background-surface)}
}


td i {
	border-left: solid var(--border-size) var(--background-surface);
	padding-left: var(--gap-size);
	display:block;
}

td { width: fit-content}


hr {
	border: none;
	height: var(--border-size);
	padding: 0px;
	margin: var(--gap-size) 0px;
	background: var(--color-accent);
	opacity: 0.75;
}


* {
	background: var(--background);
	color: var(--foreground);
	font-family: 'Times New Roman', Times, serif;
}


i {
	color: var(--foreground);
	opacity:0.75;
	height:100%;
}


button, input {
	background: var(--color-accent);
	border: inset var(--border-size) var(--background-surface);
	color: var(--background-surface);
	font-size: 1rem;
	/* font-family: monospace */
}


button:hover {
	background-color: var(--foreground);
	color: var(--background-surface);
}

button:active {
	border-style: outset;
}


.warn, .warn * {
	color: var(--color-warn);
	font-weight: bold;
}


/* For post-context menu catagories */
.cat {
	* {
		padding:0px;
		margin:0px;
	}

	.cat {
		border-left: solid var(--border-size) var(--color-accent);
		margin: 5px 20px;
		margin-right: 0px;
	}


	.cat p {margin-left: 7px}
	article {margin-left: 20px}
	
}

.current {
	margin-top: 20px;
	font-weight: bold;
	/* background: var(--color-accent);
	color: var(--background); */
	padding: 0px var(--gap-size);
	display: inline-block;
	text-decoration: underline;
	text-decoration-color: var(--background-surface);
}

header sub {
	display: block;
	margin-bottom: 2ch;
}

/* Non-desktop styles */
@media (orientation: portrait) {
	html {font-size: 120%}
	body {max-width: 100%}
}