:root {
    /* palette */
    --black-0: #070707;
    --black-1: #0a0a0a;
    --black-2: #0d0d0d;

    --black-3: #181717;

    --grey-0: #ccc8;
    --grey-1: #979494;
    
    --white-0: #f1ecf1;
    --white-1: #dbdadb;
    --white-2: #c7c6c6;

    --purple-3: #a782ce;
	--purple-2: #926cd4;
    --purple-1: #875dc5;
	--purple-0: #754bb2;

    --orange-2: #f4b63f;
    --orange-1: #e88936;
    --orange-0: #ea6531;

    --magenta-3: #d866a8;
    --magenta-2: #c03887;
    --magenta-1: #b42176;
    --magenta-0: #a90c67;


    /* uses */
	--background-color: var(--black-2);
    --background-alt: var(--black-1);
    --background-lighter: var(--black-3);

	--text-color: var(--white-2);
    --text-lighter: var(--grey-1);
	--header-color: var(--white-1);

    --accent-0: var(--purple-0);
    --accent-1: var(--purple-1);
    --accent-2: var(--purple-2);
    --accent-3: var(--purple-3);

    --danger-0: var(--orange-0);
    --danger-1: var(--orange-1);
    --danger-2: var(--orange-2);
    
    --shadow-dark: var(--black-1);
    --shadow-light: var(--grey-0);

    --highlight-shadow: 0 0 2px var(--outline-color), 0 0 10px 5px var(--glow-color), 8px 0 25px 5px var(--background-alt);

    /* fonts */
	--body-font: 'Inconsolata', monospace;
	--header-font: 'Lato', sans-serif;

    /* measurements */
    --corners: 2px;
    --corners-big: 5px;

    /* configurable */
    --pref-font-weight: 300;
}

.theme-light {
    --background-color: var(--white-0);
    --background-lighter: var(--white-1);
    
    --text-color: var(--black-2);
    --header-color: var(--black-2);

    --accent-0: var(--magenta-0);
    --accent-1: var(--magenta-1);
    --accent-2: var(--magenta-2);
    --accent-3: var(--magenta-3);

    --highlight-shadow: none;
}

::selection, ::-moz-selection {
	background-color: color-mix(in srgb, var(--accent-1) 40%, transparent);
	color: #fff;
}

body {
	background-color: var(--background-color);
	color: var(--text-color);
	font-family: var(--body-font);
	text-align: center;

    font-weight: var(--pref-font-weight);

    margin: 0;
}

main {
	margin: 0 auto;
	width: 60%;
}

/* HEADINGS */
h1, h2, h3, h4, h5, h6 {
    color: var(--header-color);
    font-family: var(--header-font);
    font-weight: var(--pref-font-weight);
	letter-spacing: .2em;
	text-transform: uppercase;
	word-spacing: 0.45rem;
	text-wrap: balance;

	/* margin: 0; */
}

h1 {
	font-size: 2.5rem;
}

h4, h5 {
	text-align: left;
}

h4 {
	font-size: 1.17em;
}

input {
    accent-color: var(--accent-1);
}

blockquote {
    border: 1px solid var(--accent-1);
    padding: 1em;
    border-radius: var(--corners-big);
    margin: 1em 0;
}

.header-text {
    font-family: var(--header-font);
}

button {
	background-color: transparent;
	color: inherit;
	font-family: inherit;
    font-size: inherit;
    border: none;

    text-transform: uppercase;
}

button:not(:disabled):hover {
    cursor: pointer;
}

.danger-btn {
    background-color: var(--danger-1);

    color: var(--background-color);
    padding: 1ex;
    border-radius: var(--corners);
}

.danger-btn:hover {
    background-color: var(--danger-0);
}

[type=submit] {
    background: var(--accent-2);
    color: var(--background-color);
    padding: 1ex;
    border-radius: var(--corners);
}

[type=submit]:hover {
    background: var(--accent-3);
}

/* LINKS */
a, button.link {
	--link-color: var(--accent-2);

    color: var(--link-color);
	text-decoration: none;
	text-transform: uppercase;
}

a:hover, button.link:hover {
	--link-color: var(--accent-3);
}

button.link {
	border: none;
	display: inline;
    font-size: 1rem;
	padding: 0;
	margin: 0;
}

/* LISTS */
ul {
	list-style-type: square;
	padding-left: 2.5em;
	text-align: left;	
}

ul > ul {
	list-style-type: circle;
}


/* OTHER MISC */
img {
	color: var(--accent-3);
}

hr {
	background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(117, 117, 117, 0.75), rgba(0, 0, 0, 0));
	border: 0;
	clear: both;
	height: 1px;
    margin: 0 auto;
	width: 30%;
}

.pixel-img {
    image-rendering: crisp-edges;
}

/* ALT STYLES */
a.btn {
    display: block;
    margin: 1em 0;

    background-color: var(--link-color);
    color: var(--background-color);

    border-radius: var(--corners);
    padding: 1ex 1em;
}

img.pixel-art {
	image-rendering: crisp-edges;
}

.whisper {
    color: var(--text-lighter);
    font-style: italic;
}

.align-left {
    text-align: left;
}

.contents {
    display: contents;
}

/* MOBILE STYLING */

@media (max-width: 920px) {
	main {
		width: 85%;
	}
}