arcnyxx.net.git

:root {
	--b: rgba(18,  15,  18,  1);
	--c: rgba(9,   7,   9,   1);
	--f: rgba(255, 255, 255, 1);
	--a: rgba(171, 90,  237, 1);
	--s: rgba(194, 135, 242, 1);
	--h: rgba(171, 90,  237, 0.3);

	--k: rgba(164, 36,  59,  1);
	--t: rgba(98,  168, 124, 1);
	--l: var(--a);
	--p: rgba(246, 174, 45,  1);
	--n: rgba(112, 101, 99,  1);
}

::selection {
	background-color: var(--h);
}

html {
	font-family: 'Fredoka', sans-serif;
	font-weight: 300;
	font-size: 16pt;
	line-height: 1.5rem;
	word-spacing: 0.04ch;

	overflow-x: hidden;

	color: var(--f);
	background-color: var(--b);
}

body {
	margin: 0;
	padding: 0 1rem;
	overflow-x: hidden;
}

body > * {
	width: 100%;
	max-width: 70ch;
	margin: 0 auto;
}

h1 {
	font-size: 2rem;
	font-weight: 400;
	margin: 1.5rem 0 1rem;
}

h2 {
	font-size: 1.5rem;
	font-weight: 400;
	margin: 1.5rem 0 1rem;
}

a {
	color: var(--a);
	text-decoration: none;
	border-bottom: 1px solid var(--a);

	transition-property: color border-color;
	transition-duration: 0.5s;
}

a:hover, a:focus, a:active {
	color: var(--s);
	border-color: var(--s);
}

time {
	color: var(--a);
}

nav {
	display: flex;
	flex-direction: row;

	gap: 0.7ch;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--a);
}

nav a {
	padding: 0.5rem;
}

nav a:first-child {
	padding-inline-start: 0;
}

nav a:first-child::before {
	content: ' ';
	color: var(--a);
	border-inline-start: 3px solid var(--a);
	margin-inline-end: 1ch;
}

footer {
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	border-top: 1px solid var(--a);
	margin-top: 2rem;
	padding: 1rem 0;
}

nav a, footer a {
	border-bottom: none;
	color: var(--f);
}

nav a:hover, nav a:focus, nav a:active,
footer a:hover, footer a:focus, footer a:active {
	color: var(--s);
}

header {
	display: flex;
	flex-direction: row;
	align-items: center;
	vertical-align: middle;

	border-bottom: 1px dashed var(--a);
	margin-bottom: 1.5rem;
}

header div {
	flex: 1;
}

header h1 {
	margin-top: 1rem;
	line-height: 2rem;
}

header p {
	margin: 0.25rem 0;
}

header p:last-child {
	margin-bottom: 1rem;
}

header img {
	height: 5rem;
	border-radius: 10px;
	margin: 0.5rem;
}

article {
	border: 1px solid var(--a);
	border-radius: 10px;
	padding: 1rem;
	margin-bottom: 1rem;
}

article div {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	flex-direction: row;
}

article div:first-child {
	justify-content: start;
	gap: 1rem;
	margin-bottom: 0.5rem;
}

article div > *, article img {
	margin: 0;
	padding: 0;
}

article h1 {
	font-size: 1.5rem;
	font-weight: 400;
}

article h1 a {
	border: none;
}

article img {
	position: absolute;
}

article span {
	margin-left: -0.5rem;
}

article span:hover {
	cursor: pointer;
}

section + section {
	margin-top: 2.5rem;
}

img:not(header img, article img), video, object {
	margin: 0.75rem 0 0.75rem 50%;
	max-width: min(90ch, 90vw);
	transform: translateX(-50%);
}

object {
	width: min(90ch, 90vw);
	height: min(80ch, 80vh);
}

code {
	font-family: 'Courier Prime', monospace;
	font-size: 0.8rem;
	font-weight: 400;
	line-height: 1.2rem;
	word-spacing: 0;

	display: inline-block;
	padding: 0rem 0.3rem;
	border-radius: 6px;
	background: var(--c);
}

pre > code {
	display: block;

	line-height: 1.05rem;
	padding: 1rem;
	border-radius: 0.5rem;

	overflow-x: auto;
}

ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

ul:not(.l) li::before {
	content: "–";
	padding-right: 1rem;
	margin: 0.25rem 0;
}

ul.l li {
	margin: 0.25rem 0;
}

span.n {
	border-bottom: 1px dashed var(--f);
}

table {
	width: 100%;
	border-collapse: collapse;
}

tr td:first-child {
	width: 50%;
}

td > div {
	display: flex;
	justify-content: space-between;
}

tr:nth-child(even) {
	background-color: var(--c);
}