:root {
	/* Dracula theme */
	--background:	#282a36;
	--foreground:	#f8f8f2;
	--comment:	#6272a4;
	--cyan:		#8be9fd;
	--green:	#50fa7b;
	--orange:	#ffb86c;
	--pink:		#ff79c6;
	--purple:	#bd93f9;
	--red:		#ff5555;
	--yellow:	#f1fa8c;
}

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

code {
	color: var(--orange);
}

pre > code {
	font-family: "IBM Plex Mono";
	border: 0.1rem solid var(--comment);
}

html {
	padding: 1em;
}

@keyframes stars {
	from {
		background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;

	}
	to {
		background-position: 0 550px, 40px 410px, 130px 520px, 70px 250px;
	}
}

body {
	background: var(--background);
	background-image:
		radial-gradient(var(--comment), rgba(98,114,164,.8) 1px, transparent 1px),
		radial-gradient(var(--comment), rgba(98,114,164,.6) 1px, transparent 1px),
		radial-gradient(var(--comment), rgba(98,114,164,.4) 1px, transparent 1px), 
		radial-gradient(rgba(98,114,164,.4), rgba(98,114,164,.2) 1px, transparent 1px);
	background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
	/* background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; */
	animation: 15s linear 0s infinite stars;

	color: var(--foreground);
	font-family: "IBM Plex Mono";
	font-size: 1.2em;
	line-height: 1.5;

	margin: auto;
	max-width: 72ch;
}

nav {
	text-align: right;
	font-size: 0.8em;
}

article {
	font-family: "IBM Plex Serif";
}

article > p > img {
	width: 100%;
	display: block;
	margin: auto;
}

footer * {
	color: var(--comment);
	text-align: center;
}

h2 {
	color: var(--purple);
}

hr {
	border: 0;
	border-top: 1px solid var(--comment)
}

.big {
	font-size: 1.6em;
}

.fabulous {
	background: linear-gradient(to right, var(--pink), var(--orange));
	background-clip: text;
	color: transparent;
}

.subtitle {
	margin-top: -1.2em;
	margin-bottom: 3em;
	font-size: 1em;
}

.invis-list {
	list-style: none;
	padding-left: 0;
}

#profile-img {
	width: 10em;
	border-radius: 50%;
}