:root {
	--purple-gradient: #DFB1FC, #A457C7, #BD6C8F;
	--pink-blue-gradient: #d8a, #8bd;
}

body {
	background-color: #222;
    color: #eee;
    padding: .5em 0;
	font-family: Verdana;
}

.bg-stars {
	background-image: url("backgrounds/purple-stars.jpg");
}

article {
	max-width: 50em;
	margin-left: auto;
	margin-right: auto;
}

nav {

}

aside {

}



img {
	image-rendering: pixelated;
}

.buttons img {
	margin: 10px 20px 10px 20px;
	transform: scale(1.5);
}



span {
	background: linear-gradient(
		to right, var(--pink-blue-gradient));
	-webkit-text-fill-color: transparent;
	-webkit-background-clip: text;
}

h2, h4 {
	margin: .2em 0;
}

p {
	margin: .5em 0;
}

sup {
	vertical-align: top;
	font-size: .5em;
}

header {
	background: #8884;
	margin: .5em 0;
	padding: .5em 1em;
}



.background {
	background: #8884;
}

.border-purple {
	border-width: 3px;
	border-style: solid;
	border-image: linear-gradient(
		to bottom, var(--purple-gradient)) 1 100%;
}